投稿

9月, 2021の投稿を表示しています

ランドストーカー ウォーキングシミュレーター on JavaScript 作成リポート

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