こんにちは！私は２歳の息子を育てるママで、フロントエンドエンジニアとして働いています。最近、ChatGPTがどれくらいコード開発に役立つのか試してみたくなり、息子が遊べるゲームを作ってみようと思い立ちました。今回は、私の初めてのゲーム制作体験について、Phaser.jsを選んだ理由やChatGPTにゲーム開発を手伝ってもらうときのコツなど、開発者の視点でお話しようと思います。
ゲーム作りに挑戦した理由
息子が２歳になって、彼が楽しんで遊べるような簡単なゲームを自分で作ってみたいと思うようになりました。普段はフロントエンド開発の仕事をしていますが、ゲーム開発は全くの初心者。「どうやって作ればいいんだろう？」と思い、まずはChatGPTに相談してみることにしました。
ChatGPTに「子供向けのシンプルなブラウザゲームを作りたいんだけど、どんなツールがいい？」と聞いたら、Phaser.jsというフレームワークを勧められました。JavaScriptでゲームを簡単に作れるツールらしく、初心者向けだというので、私みたいなエンジニアでもすぐに始められるかも、と感じました。
Phaser.jsの魅力とは？
Phaser.jsについて調べてみると、日本語の情報は少ないですが、世界中で多くの開発者に愛用されているフレームワークだということが分かりました。シンプルな2Dゲームから複雑なアクションゲームまで、幅広い種類のゲームを作れるらしいんです。しかも、習得が比較的容易で、初めてのゲーム開発にもピッタリだなと感じて、挑戦することにしました。
ゲーム制作の第一歩
まずは、Phaser.jsの公式サイトや、いくつかの英語のチュートリアルを参考にしながら、基本的なセットアップをしてみました。最初は慣れないフレームワークに戸惑うこともありましたが、そのたびにChatGPTに質問して、コードの生成や問題解決を手伝ってもらいました。
試作で作ったゲームは、画面に表示された数字をタップすると「１、２、３…」と数が増えていく、とってもシンプルなもの。Phaser.jsを使うべきかまだ迷いがあったので、このゲームをPhaser.jsを使ったバージョンと、Canvas要素だけで作ったバージョンで比較してみました。
Phaser.jsの優位性を発見
この試作ゲームを息子に試してもらったところ、タップするときに指を擦りつけるような予測していなかった操作をしました。でも、Phaser.jsで開発したバージョンは、その動きもちゃんとタップとして認識して、正確に挙動してくれました。反対に、Canvasだけで作ったバージョンは、このような操作に対応できず、動作が不安定になってしまいました。
また、Phaser.jsを調べていくうちに、ゲーム開発に特化した便利な機能が充実していることがわかり、最終的にこのフレームワークを使って開発を進めることにしました。次に、具体的なPhaser.jsの機能を紹介しますね。
Phaser.jsの機能とCanvas開発との比較
Phaser.jsには、ゲーム開発を楽にしてくれる機能がいろいろ備わってます。たとえば、こんな機能があります。
- シーン管理: Phaser.jsでは、ゲームの各部分を「シーン」として分けて管理できます。これで、ゲームの状態を整理しやすく、異なるシーン間の遷移も簡単に行えます。Canvasだけでこれをやろうとすると、コード管理がややこしくなること間違いなし。
- 物理エンジン: Phaser.jsには、簡単に物理的な挙動（重力、衝突判定など）を取り入れる機能があるので、リアルな動きのゲームが作れます。Canvasだけだと、追加でライブラリを導入したり、自分で実装したりしないといけないので、手間がかかります。
- アニメーション: Phaser.jsなら、スプライトシートを使ってキャラクターのアニメーションを簡単に実装できます。フレーム管理やループ処理も楽々なので、動きのあるゲーム作りがスムーズです。Canvasだけだと、フレームごとの描画を手動で行う必要があるので、ちょっと面倒。
- 入力管理: タッチやクリック、キーボード入力なども簡単に扱えます。特にモバイルデバイスでの操作に対応しやすいのは、子供向けゲームでは重要なポイント。Canvasだけだと、これを自分で管理しないといけないので、コードが複雑になりがちです。
- オーディオ制御: ゲーム内のサウンドや音楽の再生も簡単に行える機能があって、タイミングや効果音の同期も簡単にできます。ゲームの雰囲気をアップさせるにはもってこいです。Canvasでこれをやろうとすると、別途APIを使う必要があって、手間がかかりますね。
Phaser.jsの使い方については、この記事で詳しく説明しています▽
ChatGPTを使ったゲーム開発のコツ
ChatGPTにゲーム開発を手伝ってもらうときには、質問の仕方にちょっとしたコツがあることにも気が付きました。そのポイントについても紹介しますね。
まず、具体的な問題や目標を明確にすることが重要です。たとえば、「キャラクターがジャンプする動きを実装したい」というざっくりした質問より、「Phaser.jsで、キャラクターをタップするとジャンプする動きはどうやって実装する？」みたいに具体的に聞くと、より的確なアドバイスやコードがもらえます。
次に、ステップバイステップで質問することを心がけるといいです。いきなり難しい質問をするより、まずは簡単なところから順に聞いていくと、プロセスが理解しやすくなります。たとえば、「画面の中央にキャラクターを表示するには？」から始めて、「そのキャラクターをタップすると、効果音を鳴らしながら消えるようにして」という感じで、徐々に詳しくしていくとスムーズです。
さらに、ChatGPTからのコードを試しながら学ぶ姿勢も大事です。提供されたコードをそのまま使うだけじゃなく、自分で動作を確認して、必要ならカスタマイズしてみることで、より深く理解できます。ChatGPTでも解決できないバグが出ることもあり、その場合は発生するタイミングや状況をちゃんと自分で調べて、その内容をChatGPTに伝えるとより効果的な解決策が得られることが多いです。
初めて作ったゲーム「ぱくぱくフルーツ」
そして、ついに完成したのが「ぱくぱくフルーツ」というゲームです。画面にリンゴやバナナなどのフルーツが次々と現れて、それらをタップしてすべてのフルーツを「食べる」と、次のフルーツが現れる仕組みになってます。
さらに、息子が飽きないように、効果音をつけたり、ぽよよんと動くアニメーションも加えました。一度に現れる果物の数は５つに設定して、それをすべてクリアすると新しい果物が出てくるという、ちょっとした場面展開も取り入れています。短時間のあいだにメリハリをつけることで、集中力が続くよう工夫しています。
「ぱくぱくフルーツ」のゲームはこちら▽
ゲームが完成！息子の反応と開発者としての学び
育児の合間にコツコツと作業を進めて、３日くらいでこのミニゲームが完成しました。
早速、息子に遊んでもらったところ、大喜び！画面をタップしながらニコニコ笑顔で楽しんでくれる姿を見て、私もすごく嬉しかったです。シンプルなゲームだけど、息子にとっては大いに楽しめる内容だったみたいで、小さな指先で一生懸命果物をタップしながら夢中になって遊ぶ姿を見て、「作ってよかったな」と心から思いました。
初めてのゲーム開発を終えて
初めてPhaser.jsを使ってゲームを作ってみて、想像以上に楽しい経験ができました。もちろん、まだまだ学ぶことはたくさんありますが、息子の笑顔を見られたのは、何よりの成果です。そして、ChatGPTがこれほどまでに開発をサポートしてくれることには驚きました。
これからも、息子の成長や興味に合わせて、彼が喜んでくれるゲームを作っていきたいと思います。ゲームは「ゲームでぴこぽ」にアップしていくので、ぜひチェックしてみてくださいね！
Phaser.jsは、初心者でも簡単にゲームを作れることを実感できたフレームワークなので、興味がある方はぜひ挑戦してみてください！