２D猫キャラのサムネイル
はじめに
AIのClaudeに手伝ってもらいながら、ゲームフレームワーク「Phaser」で猫のミニゲームを2本作り、このブログに埋め込んでみました。私がやったのは、猫の絵を描いて渡すことと、遊んでみた感想を伝えることだけです。コードはすべてClaudeが書いています。
今回紹介するのは次の2本です。どちらもこの記事の中で、そのまま遊べます。
- ねこパンチ: 左右から来るおもちゃを、タイミングよく猫パンチで打ち返すゲーム
- レーザーでおいかけっこ: 赤いレーザーポインターで猫を誘導して、部屋に落ちているおやつを食べさせるゲーム
Phaserとは
Phaserは、ブラウザで動く2Dゲームを作るためのJavaScriptのフレームワークです。当たり判定、物理演算、カメラのスクロール、パーティクル(粒子)演出、画面の切り替えなど、ゲームに必要な機能がひととおりそろっています。
最初は「CSSとJavaScriptでも作れるのでは?」と思い、Claudeに聞いてみました。答えは「飾りのアニメーションならCSS+JSで十分。ただ、ゲームにするとPhaserのほうが作る手間が圧倒的に少ない」というものでした。たとえばレーザーの追いかけっこも、猫が点を追うだけなら素のJavaScriptで書けます。でも、家具との当たり判定、部屋のスクロール、花瓶が割れる演出まで入れると、自分で作る部分が一気に増えるそうです。
Phaserで作ったゲームは、HTMLファイル1つにまとめられます。そのため、WordPressのような普通のブログにも置きやすいのが良いところです。
MITライセンスなので、広告収入のある商用サイトでも無料で使えます。
2D猫キャラのアニメーション作成
まず最初に「図形を組み合わせて適当に猫のアニメーションをPhaserで作ってみて」とお願いしました。Claudeは画像生成はできないので、図形を配置する方法で作ってもらいました。それが以下の左側のアニメーション（スマフォでは上側）です。次に、それを参考にして私がClipStudioで猫の絵を描きました。Phaserでアニメーションを作るには、猫キャラを顔、胴体、しっぽ、左耳、右耳、左前足、右前足、目(開き・閉じ)、口(閉じ・開き)のようにパーツ毎に分割した画像で用意する必要があります。コツは、全部のパーツを同じキャンバスサイズのまま書き出すことです。重ねるだけで元の絵どおりに組み上がるので、位置合わせの手間がかかりません。しっぽの付け根や耳の根元は、回転させたときに隙間ができないよう、少し長めに描いておくのがポイントです。パーツを渡すと、Claudeが回転の軸(しっぽは付け根、耳は根元、前足は肩)を決めて、親子関係のある「骨組み」として組み立ててくれました。頭を傾けると、耳や目もいっしょに傾く仕組みです。以下の右側（スマフォでは下側）が最終的にできあがったアニメーションです。
2D猫キャラアニメの図形版と手書き版の比較
猫をタップ（クリック）すると鳴きます。カーソルを動かすと目で追いかけます。
作ってもらったゲーム
手書き版の猫キャラアニメーションを元にして、２本のゲームをClaudeに作ってもらいました。
ゲーム1:ねこパンチ
左右から走ってくるおもちゃを、猫パンチで打ち返すタイミングゲームです。制限時間は60秒です。
遊び方
- おもちゃが左右の ○ に来たらパンチ。PCは ← → キー、スマホは画面の左半分・右半分をタップ
- ぴったりなら「Perfect!」で100点、少しずれると「Good」で50点
- 金色のネズミは300点。10コンボごとに得点が2倍、3倍に上がる
- キュウリはパンチしちゃダメ。猫がびっくりして100点減る
- 最後にS〜Cのランクが出る
Phaserならではの工夫
- 前足がびよーんと伸びるパンチ: 分けて描いた前足を、肩を軸に振り上げながら1.6倍に伸ばしています。パンチが当たる ○ の位置も、前足の角度と長さから自動で計算されます。
- ヒットストップ: Perfectの瞬間、画面全体を0.05秒だけ止めています。格闘ゲームでおなじみの手法で、「当たった!」という手応えが出ます。
- 物理演算で吹っ飛ぶおもちゃ: 打たれたおもちゃは、回転しながら飛んで床で跳ねます。Perfectのほうが遠くまで飛びます。
- パーティクル: 当たった瞬間に、キラキラとスピード線が飛び散ります。
ゲーム2:レーザーでおいかけっこ
赤いレーザーポインターの点で猫を誘導して、部屋のおやつを食べさせるゲームです。こちらも制限時間は60秒です。
遊び方
- PCはマウスを動かすだけ、スマホは指でなぞっている間だけ赤い点が出る
- 猫は赤い点を追いかけて走る
- おやつ(小魚)は10点、金色のおやつは50点
- 花瓶にぶつかると「ガシャン!」と割れて20点減り、猫がびっくりして少し動けなくなる
Phaserならではの工夫
- 画面より広い部屋とカメラ: 部屋は画面のおよそ2倍の広さで、カメラが猫を追いかけてスクロールします。部屋の端より外は映さないように、自動で止まります。
- 家具との当たり判定: ソファや本棚、テーブル、観葉植物にぶつかると、猫は止まったり回り込んだりします。
- 画面外のおやつを指す矢印: 見えるところにおやつがないときは、一番近いおやつの方向に矢印が点滅します。
- 猫らしい動き: 走るとぴょこぴょこ跳ねて、進む方向に体を傾けます。おやつを食べるとにっこり顔、花瓶を割るとびっくり顔に変わります。
難易度はClaudeとの会話で調整した
どちらのゲームも、最初の版は難しすぎました。遊んでみた感想をそのまま伝えると、Claudeが原因を探して直してくれました。
特にレーザーのほうは、私が思っていた原因(慣性)のほかに、カメラのスクロールという見落としていた原因まで見つけてくれたのが印象的でした。
WordPressへの埋め込みでつまずいたこと
記事に直接コードを貼ったら動かなかった。
- カスタムHTMLブロックにJavaScriptごと貼ったのですが、動きませんでした。Claudeによると、高速化プラグイン(Autoptimize)がJavaScriptをまとめたり読み込みを遅らせたりしている可能性があるとのこと。そこで、ゲームを独立したHTMLファイルにして、iframeで読み込む方式に切り替えました。iframeならWordPressの外で動くので、プラグインの影響を受けません。
まとめと感想
プログラムを1行も書かずに、自分の描いた猫が動くゲームを2本、ブログに載せることができました。私の役割は、絵を描くこと、遊んで感想を伝えること、サーバーにファイルを置くことの3つだけでした。
やってみて感じたのは、「どんなゲームにしたいか」と「遊んでみてどうだったか」を言葉にできれば、あとはClaudeが形にしてくれるということです。難しい、遅い、といったざっくりした感想からでも、原因を探して直してくれました。
ぜひ上の2本で遊んでみてください。ベストスコアはブラウザに保存されます。
記事内のゲームに登場する猫のイラストは、筆者が描いたオリジナルキャラクターです。イラストの無断転載・二次利用(改変・再配布・商用利用を含む)はご遠慮ください。記事へのリンクやシェアは大歓迎です。