コマ送りで主人公を動かす

前回でも触れていた、主人公の見た目をコマ送りで再生するプログラムが完成しましたので紹介します。といっても、その殆どはchatgpt大先生によるものですが、望むものを出力するのもかなり早くなり、成長を実感した瞬間でもありました。

分かりにくいですが、歩行アニメーションの様子を貼っておきます。

若干の違和感は残りますが、及第点といったところでしょう。

プログラムの内容を簡単に解説します。

まず、player関数にアニメーションフレーム用のメソッドを置いておき、63行目で移動中かどうかを判定し、動いているならアニメーションフレームに１を足して、70行目で4フレームごとに2枚の画像を切り替えるようにしています。それらを74～77行目で当てはめています。

プログラムの内容はこんな感じです。前回の研究ノートでやりたくても出来なかった部分だったので、内容自体は簡単でも達成感は凄かったです。

という訳で今回はこんな感じで終わろうと思います。
次回の更新内容が未定という大きな問題はありますが、とりあえず滞っている最後のステージ制作に取り掛かろうとは思っています。
以上、お疲れさまでしたー。

参考文献

田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年
田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年

素材：

ぴぽや倉庫 https://pipoya.net/sozai/

ドット絵世界 https://yms.main.jp/