INDIE INDEX

Claude Codeにスプライトアニメーションの切り替えを作らせる頼み方【AIでゲーム開発】

公開 2026-09-24更新 2026-09-24Claude Code

Claude Code に1文を1回頼むと、画像ファイルを使わずにプログラムで描いたコマだけでスプライトシートを作り、立ち・走り・ジャンプ・攻撃の4つのアニメーションを切り替える仕組みができました。画面を持たないブラウザで数えて確かめた範囲では、キーを離すと立ちに戻ること、ジャンプが2コマで着地すると元の状態に戻ること、攻撃が4コマで元に戻ること、左に走ると絵が反転して左を向くことは、すべて頼んだとおりに動きました。

このページの目次
  1. Claude Code に頼んだ文
  2. 頼んだとおりに動くかを確かめる
  3. ジャンプと攻撃のコマ送りを確かめる
  4. 情報源

Claude Code に頼んだ文

空の作業フォルダを1つ決め、Claude Code に次の文を1回だけ渡しました。スプライトの絵をどう作るか・4つのアニメーションのコマ数・キーとの対応・左向きの扱い・画面に出す表示の5つを、ファイルの形とあわせて1つずつ具体的に書いています。

Claude Codeにスプライトアニメーションの切り替えを頼んだ文

作業フォルダは C:\games\my-game\ だけです。このフォルダの外は読まない・書かないでください。

HTML ファイル1つ（game.htm）で、ブラウザで動く横から見たゲームを作ってください。
主人公は、スプライトシート（同じ大きさのコマを横に並べた1枚の画像）でアニメーションします。画像のファイルは使わず、起動したときにプログラムで描いたコマを1枚のスプライトシートにまとめてから、そこから1コマずつ切り出して表示してください。
アニメーションは4つです：立ち（4コマ）・走り（6コマ）・ジャンプ（2コマ）・攻撃（4コマ）。
左右の矢印キーで走り、キーを離すと立ちに戻ります。上の矢印キーでジャンプし、着地すると立ちか走りに戻ります。Z キーで攻撃し、攻撃のコマを最後まで出したら元に戻ります。
左に走ると、主人公の絵は左を向きます。
画面の左上に、いまのアニメーションの名前とコマの番号を出してください。
作り終えたら、4つのアニメーションがどう切り替わるかを、ふつうの言葉で説明してください。

※ このページの枠の中の作業フォルダの道は、例の道（C:\games\ の下）に置き換えて載せています。ほかの文字はそのままです。

Claude Code は HTML ファイルを1つ作り、仕組みを次のように説明しました。

起動したときに、画面に出ない作業用のcanvasへ、立ち4・走り6・ジャンプ2・攻撃4の合わせて16コマを1コマずつ描き、横に並べて1枚のスプライトシートにします。画像ファイルは読み込んでいません。ゲームの画面では、そのスプライトシートから毎回必要な1コマだけを切り出して表示します。左右の矢印キーで走り、離すと立ちに戻ります。上の矢印キーでジャンプし、着地すると立ちか走りに戻ります。Z キーで攻撃し、4コマ出し切ると元に戻ります。左に走っているときは、スプライトの絵を左右反転して左向きにしています。画面の左上には、いまのアニメーションの名前とコマ番号（例：走り 3 / 6）を出しています。

Claude Code は、ブラウザでキーを実際に押す試しはしておらず、コードを読み直して動きを確かめた、とも返しました。読み直しの中で見つけた小さな不具合（攻撃が終わる瞬間に、移動キーを押したままでも一瞬だけ立ちに戻ってしまう判定のミス）は、返す前に直した、とのことです。

頼んだとおりに動くかを確かめる

画面を持たないブラウザで game.htm を開き、キーの押し下げ・離しを送りながら、画面の左上に出るアニメーションの名前とコマ番号を、送るたびに撮った画面で数えました。ゲームの中の変数は関数の中に閉じていて外から読めなかったため、この画面の表示を数える方法だけを使っています。

開いた直後は「立ち」で、コマ番号は1〜4を繰り返していました。右の矢印キーを押している間は「走り」に変わり、コマ番号は1〜6を繰り返しました。右キーを離すと、次の1コマで「立ち」に戻りました。左の矢印キーでも同じく「走り」になり、離すと「立ち」に戻りました。

左に走っているときの絵と、右に走っているときの絵を、同じコマ番号（3 / 6）どうしで並べました。片方を左右反転してから画素の色を数えたところ、7986個の画素で色の差は無く、右向きの絵をそのまま左右反転したものが左向きの絵になっていました。

Claude Codeが作ったスプライトアニメーションのゲームを開いた直後の「立ち」の画面（左）と、右の矢印キーを押して「走り」に変わった画面（右）。どちらも左上にアニメーションの名前とコマ番号が出ている

同じコマ番号（走り 3 / 6）で、右に走っているときの画面（左）と左に走っているときの画面（右）。左向きは右向きの絵を左右反転したもの

ジャンプと攻撃のコマ送りを確かめる

「立ち」の状態から上の矢印キーを短く押すと、「ジャンプ」に変わりました。コマ番号は最初「1 / 2」で、しばらくすると「2 / 2」に変わり、そのあと「立ち」に戻りました。「1 / 2」は上に上がっている間、「2 / 2」に変わったのは下に落ち始めたあとで、着地すると元の「立ち」に戻っています。

右の矢印キーを押したまま「走り」にしてから同じように上の矢印キーを押すと、空中では同じく「ジャンプ」の「1 / 2」→「2 / 2」の順で変わり、着地したときは、右キーを押したままだったので「立ち」ではなく「走り」に戻りました。着地したあとどちらに戻るかは、そのときに矢印キーが押されているかどうかで変わることを確かめています。

上の矢印キーを押した直後の「ジャンプ 1 / 2」の画面（左、上に上がっている途中）と、しばらくあとの「ジャンプ 2 / 2」の画面（右、下に落ち始めたあと）

「立ち」の状態から Z キーを短く押すと、「攻撃」に変わりました。コマ番号は1から4まで増え、4コマ出し切ると次の1コマで「立ち」に戻りました。この一連の試しの間、コンソールにゲームのコードから出たエラーは1件もありませんでした。

攻撃のコマが進んで「攻撃 4 / 4」になった画面（左）と、4コマ出し切って「立ち 1 / 4」に戻った直後の画面（右）

立ち・走り・キーを離すと立ちに戻ること・ジャンプの2コマ・着地で立ちか走りに戻ること・攻撃の4コマで戻ること・左向きの7つは、この試しで確かめた範囲ではすべて頼んだとおりに動いていました。

情報源

Claude Code のほかのページ

このページに出た言葉

関連するページ