20241221_第２回ポチポチゲームの会_シューティングゲームの巻

https://genai-pochi-games.connpass.com/event/339022/

Transcript

1. 第２回 ポチポチゲームを 作ろうの会 〜 シューティング ゲームを作ろう︕ の巻 〜 2024/12/21 @doradora09
2. ⾃⼰紹介 @doradora09こと⼤城、出⾝は沖縄、東京 で就職して今は福岡に移住。 本業は昔数年Webエンジニア->データサイエ ンス関係。 ⽣成AI使えば昔やりたかったゲーム開発ができ るのでは︖ということでこの勉強会を⽴ち上げ ました。
3. この会の趣旨 • ないなら作る、でワイワイやる • 極⼒、ノーコーディング • ぜひみなさんの作品も いつかプレイさせてください・・︕
4. この会でよく使ってる⽣成AIや素材等 ChatGPT Plus / Pro コード生成とゲームロジッ クの設計に活用。20$程度の 課金 Suno.AI ゲーム用BGMの作曲に使用。 これも確か商用利用は要課金。 DALL-E ゲームグラフィックスの生成 に利用。ChatGPT経由で利用。 SE音のフリー音源 効果音ラボ様より。無料。 https://soundeffect- lab.info/sound/battle/ HTMLの動くブラウザ PC環境推奨(ファイルを開いた りするので)。なお、プレイだ けならiPadやスマホでもOK GitHub ゲームを一般公開する際の Webサーバ代わりに利用。
5. 前回と、今回のテーマ • 前回は「ドラゴンスレイヤー」 という名前で コマンド選択式のポチポチゲー ムを作ってました。 • 今⽇は横スクロールなシュー ティングゲームを１時間で作り ます(少⼈数ならハンズオン) https://doradora09.github.io/chatgames_ 20241019v2_dragon/
6. 完成版の例 • (BGM注意) https://doradora09.github.io /20241221_chatgames_shooting_starrimlegion /
7. ゲーム開発ハンズオン
8. ChatGPT Proをお貸しします (後でパスワード変更しておきます) • チャット欄にアカウント・パスワードをお送りしますので OpenAIのサイトからChatGPTにアクセスしてみてください • https://openai.com/index/chatgpt/ • ちなみに複数名で同時利⽤する場合はタブが乱⽴しますので、 ニックネームとか⽬印をタブの名前につけておくと良いかも です [注意] ID / Passの 外部公開は 禁⽌
9. 参考︓ IDを⼊れて、 続けるをクリック。 次にパスワードを ⼊れる ChatGPTの画⾯ o1-miniのモデルは早い ので切り替えおすすめ ( 好きなモードでOK )
10. ChatGPT活⽤上の注意点 • 右上のアイコン->設定->デー タコントロール->「すべての ⼈のためにモデルを改善する」 をOFFにしてご利⽤ください • ⼤原則、個⼈情報⼊れないこと ( 今回はゲーム開発なので⼤丈 夫だと思いますが、念の為 ) ここがオフなのを確認
11. ゲーム開発のヒント
12. ゲーム開発のヒント • ストーリーの⾻⼦を⽣成AIに作らせる • それをhtml/css/jsの１ファイルでゲーム化 • 必要に応じてupdate & デバッグ • 画像と⾳楽とSE⾳の追加 • 完成版のGitHub Pagesでの公開
13. シューティングゲームの要素例 • 横スクロール︖縦スクロール︖ • 敵の強さ / 弾幕 / ボス戦 • 武器のパワーアップ / シールド • ボムの実装 (敵の球も消す) • エンディング
14. Chat先⽣作のコードの実⾏⽅法と補⾜ • htmlファイルの場合、テキストエディタなどにソースコード をコピペして、ファイルの拡張⼦を「.html」にすれば、ダブ ルクリックするだけでブラウザにて動きます • ちなみに、ChatGPT-4o、またはo1、o1-proであればファイ ル⾃体のアップロードも可能ですが、個⼈的にはo1-miniが チョッパやなので、ソースコードをコピペしてChat先⽣に指 ⽰だしすることが多いです。
15. ファイル管理 • 最初はhtmlファイル１つに全ての処理をまとめた⽅がChat先 ⽣とのやりとりは楽です(ただ、1000⾏を超えるとちょっと怪 しい) • ある程度バージョンアップしたら、ファイル名を変えて世代管 理するとよいです(動かなくなることがあるので) • 最初はフォルダに全ての要素を平置き、そのうちBGMやSE⾳、 画像が増えてきたら素材⽤のフォルダを作ってそのファイルパ スを指定してもよいでしょう(例︓se/shot.mp3、など)
16. 開発時のデバッグ⽅法 • 基本は「こういう問題が起きている」とChat先⽣に連携 • ⾔葉で書きにくいものはスクリーンショットを撮って共有も 有効 • 画⾯がうんともすんとも⾔わない時はブラウザの「開発者 モード」でエラーログが出ていないかをチェック
17. • Chormeブラウザの場合は右上の３点 リーダー -> その他のツールà デベ ロッパーツールで、「Console」タブを クリックするとエラーログが⾒れます 画⾯参考︓ ここに⾊々出てきます ( 問題がなければ何も出ません )
18. • Githubのアカウントが必要です https://github.co.jp/ • ゲーム開始のファイルをindex.htmlとして保存して、 Githubにリポジトリ登録＆ファイル保存、Github Pagesで公開 設定をして数分まてば全世界からプレイできるようになります ゲームの公開 これで今⽇からあなたもポチポチゲームクリエイター・・︕︕
19. Enjoy..!!