キャラクターの歩行アニメーションを作ってみた。
前回の「キャラクターの向きを増やしてみた。」では、主人公が移動すると、向きだけが変わり、歩いたというより瞬間移動に近いものとなっていました。
自分の中で少し違和感があったため、主人公の歩行アニメーションを作った方が良いと考えました。
今回もキャラ画像は前回と同じものを使用します。
プログラムの改造は前回行った「主人公が描画される」の部分です。
主人公の歩行アニメーションをつける方法は２パターンあると考えました。
一つ目の方法は、キーを押して一マス移動するごとにキャラの画像が変わるというものです。
この方法では、キーを押す→歩き画像１、キーを押す→歩き画像２というように描画されます。
しかしこれでは、歩いていない状態でも歩いている画像になってしまう場面があります。これでは少し不自然です。
二つ目の方法は、キーを押して一マス移動するときにキャラの画像を複数枚描画し、歩いているように見せるという方法です。この方法にすると、キーを押す→歩き画像１→歩き画像２→停止画像というように描画できるので、歩いていない状態で歩き画像になるという状態にはなりません。
私は二つ目の方法で、歩行アニメーションの実装を行いました。
私は最初、アニメーション画像を順番に描画すれば歩いたように見えると考えていましたが、プログラムを実行してみると、歩き画像１、２、停止画像が重なって描画されてしまいました。このとき私は、キャラが移動する度にマップの更新が入っていることを忘れていました...
つまりどうすれば良いのかというと、
移動キーを押す
↓
マップを描画する
↓
歩き画像１を描画する
↓
マップを描画する
↓
歩き画像２を描画する
↓
マップを描画する
↓
停止画像を描画する.
このようにすれば、キャラが重なって描画されることなくアニメーションが描画できると考えました。
移動キーを押した後を、for文でループさせたら良いと考えた私は、早速プログラムを作ってみました。プログラム自体は動きましたが、移動キーを押しても前回と同じ動作内容で、アニメーションが実装出来ていないように見えました。
エラー無く動作しているのになぜ、アニメーションが表示されなかったのか。しばらく考えてみた結果、「for文のループ速度が速すぎて、すぐに停止画像が描画されている」ということに気が付きました。アニメーションは表示されていないのではなく、アニメーションの切り替わりが速すぎて見えなかっただけでした。
for文のループ遅くすれば良い！と考えた私はsetTimeout()メソッドを使って試行錯誤してみましたがうまくいきませんでした。
自分の実力では無理だと判断し、for文で一定時間待機させる方法など検索してみましたが、自分が思った通りに動くプログラムは作れませんでした。
最終手段として、chatgptの力に頼ることにしました。
「fieldpaint関数内のfor文の中で待機時間を作る方法」を送信したところ、
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function fieldpaint() {
for (let i = 0; i < 2; i++) {
console.log(実行回数: ${i + 1});
// 実際の処理をここに記述
if (i < 1) {
await wait(1000); // 1秒待機
}
}
}
fieldpaint();
このようなコードが生成されました。
このコードを改良し、自分のゲームプログラムに組み込んだ所、アニメーションを正しく描画することに成功しました！
実際のゲーム画面です↓
主人公が歩いている...!
今回は色々と苦戦しましたが、chatgptの力を借りることでアイデアを実現することが出来ました。chatgptはコードの生成だけでなく、生成したコードの解説も行ってくれるので非常に勉強になりました!
