あっぷりノート

Fix the Bits | あっぷり工房

旅、ギア、サプリ、マインド、トレーニング ── “走る”は創れる

#8 JavaScriptでアクションゲームを作る │ 地面

f:id:you_key69:20220219155234j:plain


走れない代わりに、走るゲームを創るプロジェクト、第8回。

過去のバックナンバーは以下のとおり。

今回は、前回の背景(雲)に加えて

  • 地面
を変更した。

それっぽくなったが、それっぽくなりすぎたかも?


本日の成果物















  • スタート・再開:タップ or [H]キー
  • ジャンプ:タップ or [J]キー

めっちゃマイナーバージョンアップだが、地面をバージョンアップ。

“走ってる感”がさらに増したと思うが、失ったものも少なからずある?


詳しくは後述。

本日のドット絵

今回、新規追加したのは背景の「地面」である。

地面

f:id:you_key69:20220219152458j:plain

いわゆるマップチップというやつだ。

これを横に連続して繋げて地面を表現している。

***

出来映えには満足しているが、この地面を反映したことによってものすごく“パクリ感”が出てしまった気がする。

前回までの背景だと、ほどよいチープさがあったので本家に対するリスペクトというか憧れみたいなのがみえて、可愛げがあったが…


そう、今回のは可愛げがない。

憧れではなく、なんとなく野望のような“黒いモノ”が見えかくれするのだ。


でも安心してほしい。BANされたら潔く身を引くw

しかし、あえてこの地面を採用したのには理由がある。

本日の教材

今回のお手本はロックマン5より「ナパームマン」のステージ動画である。

実際にロックマン5はプレイしたことないにも関わらず、曲がカッコよくてめちゃくちゃ気に入っている。

つまり、「思い出補正」を一切抜きにしても素でクオリティが高いと思うのだ。


チップチューン(ピコピコ音)であることを忘れさせてくれるようなベースラインとドラムビート。

バンドでやってもカッコいいんじゃないかと本気で思っている。


ロックマンの好きなBGMランキングがあれば、間違いなく5本の指に入る。(先日のスカルマンとウッドマン含む)


このBGMが聴きたくて、このステージの地面を採用したといっても過言ではない

いまやYouTubeを観ながら(聴きながら?)ドットを打つ時間が、至福のときなのだ。

本日のソースコード(JavaScript)

長ーい地面画像を左にスクロールしていって、右端が切れる前にまた左端を画面左に戻してスクロールさせる ──

というのを延々と繰り返す設定にした。


敵の移動スピードがそのまま地面の移動スピードが継承するようになっており、敵が止まると地面も連動して止まる(雲も同じ)。

本日の学び

長ーい地面画像を用意するのはわれながら名案だと自画自賛しかけたが、ちょっとつまづいたところがあるので備忘のためシェアさせていただく。

f:id:you_key69:20220219154700j:plain

ゲーム画面の2倍超のサイズ(幅1026px)になるように地面画像を作ったが、それをはてなフォトライフでアップロードすると強制的に縮小されてしまい、余白が出まくってしまう問題があった。

f:id:you_key69:20220219154738j:plain

それは「はてなフォトライフ」の画像サイズのデフォルト値が「800px」になっていることが原因で、設定を予め変えておくことで解決する。

f:id:you_key69:20220219154818j:plain

※設定変更後に再度アップロードする必要があり、すでに800pxでアップロードされている画像は変更できなかった。


手順は以下の記事を参考にさせていただいた。

この場をお借りして御礼申し上げたい(あざっす)。

今後の展望

背景ができ上がっていよいよ枠組みができたので、今度は中身を充実させていく。


アイテムとか、新しい敵とか新アクションとか。

あ、効果音つけるのもまだだった。


なんせ、やりたいことリストはめちゃくちゃ充実しているのである。

走る、を創ろう。