デジタル系アナログ人間

ランドストーカー on JavaScript作成記（3） 初めに 前項の作成記（2） の最後に書いた稀有な経験の興奮からやっと醒め、 作成を続けます。 ツイートでは、NPC・BG切り替え・Z方向の当たり判定と言ってますが、 天啓でも有って突然レベルが上がったりしない限り、 いきなりそんなモノを作れるワケも無いです。 さて、どうしましょうか。 影を試す 内藤さんにRTされて以降、 色々なランドストーカーに詳しい方にフォローされました。 それに触発されて再びゲーム自体を調べ始め、 かつてのゲームレビューや感想を検索で読んでみたりした所、 当時もちょっと気に成った「影問題」に当たりました。 影問題とは、ライルや他のスプライトに影が無く、 位置関係の把握が困難という意見です。 個人的には影が無い事は全く気に成らなかったのですが、 物は試しと言う事で作ってみます。 元々のゲームの中にはスプライトやオブジェクトの影が一切無いので、 何となく適当に作ってみました。 ライルのモーションの画像の中に仕込んでみました。 次はコードを書きます。 コードを書くと言っても、 ライルのモーション（影のみのヤツ）を先行で一回描画するだけです。 まずは実際に描画させて画像の中の影の位置を微調整します。 次は影が落ちる高さの演算です。 と言っても、ライルの重力処理で使ってるモノが そのまま参照出来るので、特に新たに書く必要はありません。 そんなこんなでアッサリ出来た、本家のランドストーカーに無かった新要素・影の有るライルです。 分かり易いように動画ではジャンプ力を強化し、途中から速度を半減、30fpsで動かしてます。 「速度を下げねェと分からんって、やっぱ要らねェんじゃ・・・」 と思いましたが、動く足場とかにも影が有れば少しは難易度が下がったのかも知れないので、影派の人達の言うことも一理有るかな、という感じですね。 実際、速度を下げた場合は位置関係を把握し易くなってます。 NPC作成を開始 遂に逃げる先が無くなって追い込まれました。 村の全景と個別の建物が出来たんで、もうNPCを作るしか無いです。 NPCとはゲーム用語で、Non Playable Characterの略・・・と思ってますが、合ってますかね。 まあ要するに自分の意思と無関係に動くキャラクターです。 RPGには付きモ...

ランドストーカー on JavaScript作成記（2） 初めに 前項 のランドストーカーのウォーキングシミュレーターを更新し続け、 無人のメルカトルの町を歩くという、個人的には爽快な所まで行けました。 町の南側から港に向かう際に必死に誤魔化してますが、 レイヤー処理、要するに背景とライルの重ね合わせの処理が出来ていません。 通常の2DのRPGでは 「この部分はメインキャラクターより手前」 「この部分はメインキャラクターより奥」 と決まっている事が多いです。 しかしランドストーカーは、描画こそ2Dですが内容は3Dですので、 何らかのオブジェクトに対し 「ライルが手前なら手前、ライルが奥なら奥」に描画する事で奥行きを表現しています。 ゲーム開始直後のマサンの村で言えば、村長の家の前の広場に有る謎の石像、各種建物、竹製っぽく見える柵などです。 上の画像を見るとライルの描画されている絶対座標はホボ同じですが、 右のライルは手前に描画されていて、 左のライルは奥に描画されています。 カメラから見ると右のライルは石像よりも手前でジャンプしてるので、石像よりも手前に描画されます。 同様に左のライルも、カメラから見ると石像より奥に立っている為に、石像よりも奥に描画されます。 ゲームを操作しているプレイヤーの視点で考えると、至極当然な見え方です。 つまり全てのスプライトは高さを持つBGオブジェクトに対し、手前か奥を判別して描画する順番を変えているわけです。 コレを作らないと、キャラクターを普通に動かすというとりあえずの目標に届きそうに有りません。 HTMLやCSSでレイヤーと言えば、z-indexです。 コレを動的に書き換えれば良さそうです。 早速コードを書いて実行してみましたが、何故か動きません。 色々と考えて色々と試してみましたが、どうにも動きません。 そんな時は検索。 色々と調べていて、ふと検索ワードを変えてみました。 「JavaScript ゲーム」 遂にCanvasを使い始める そのワードで得た検索結果に、 JavaScriptで作ったゲームやJavaScriptでのゲーム製作講座等がありました。 最初の方にシューティングゲーム製作の講座のyoutube動画が有ったので、何かの参考になるかなと徐に観始めます。 以前からゲーム関連の話題で 「ゲー...

ランドストーカー ウォーキングシミュレーター on JavaScript 作成リポート 以下の記事は、旧版となります。 今ではCanvasを使った方法に変えてゼロから作り直しましたが、作成の経緯・変遷として残します。 新版の記事はコチラ になります。 覇邪の封印シミュレーター や ファンタシースター ダンジョンシミュレーター の記事も合わせてお読み頂くと、 コマ切れにしたImageをTableで配置してゲームグラフィック描画に挑むという狂気の世界 を垣間見る事が出来ます。 また新版を作成するにあたり、 プログラミング講座のサイト及びyoutube動画の作成者　あきちょん氏 に深く感謝します。 一方的に勝手にお世話に成りました。ありがとうございます。 シューティング編のみですが、全部観ました。 初めに メガドライブの大好きなタイトル、スーパーハイドライド（ハイドライド3の移植版）のシミュレーターを作るべくアレコレやっていて 気付いたらランドストーカーの主人公・ライルをキャプチャーしていました。 発売から29年も経ちますが、今でも色褪せないで私を魅了し続けている稀有なソフトです。 詳しくは そんな偏愛をぶつけた記事 を参照してください。 そんなこんなでカーソルキーでライルを歩かせてみる方向へと舵をきり、とりあえず作り始めてみることにします。 相変わらず方向性が定まりませんので、どうなることやら。 まずは素材 他のシミュレーターの時もそうですが、いきなり html や JavaScript を書き始めずに、まずは画像の用意から始めます。 理由は コードで描画する技術力が無い というだけなので、良い子はマネしないで下さい。 最初は動かして動画で撮影します。 次にその動画をコマ送りして、パターンを数えます。 その後は画像にて保存し、順番をキチンと並べればOKです。 今回の対象・ライルは4方向に動きますので、静止時は4パ...

ファンタシースター ダンジョンシミュレーター ver 0.1 on JavaScript 初めに 気分転換の為に作り始めた、ファンタシースターのダンジョンシミュレーターの公開にチャレンジしてみます。 「公開にチャレンジ」とは、 ・BGMは流していないので公開可能な気がする ・ココのブログのシステム上、画像を簡単に取り扱えない の二点について、チャレンジしています。 実際にウチのローカルで動かしてる動画はコチラ 前進後退しか出来ない初期版 方向転換可能になったver0.1 画像のプリロード 前回作った覇邪の封印シミュレーターや、先日公開した動画では、 0ピクセルのサイズで描画しておいた各パーツ達です。 今回は全部出してみます。 前回の覇邪の封印の公開後にツイートしたと思いますが、 何もせずにコードを書くと、いざ描画となった時に読み込みを始める為に、 アニメーションの際にラグが出来てしまいます。 それを回避し描画命令の際に即座に表示させる為に、予め描画させておきます。 最初の7個の画像は、画面の1/4（左上部分）のみです。 それぞれ左右反転・上下反転・上下左右反転させて描画して画面を構成しています。 その下の画像は、左右キーを押して回転する時に使っています。 こちらは1/2（上部分）なので、上下反転で画面を構成します。 右回転時、左回転時、目の前がストレート、目の前が壁など、 色々なパターンで左右反転させたり逆順で描画させたりします。 ...