第１回 生成AIでポチポチ ゲームを作ろうの会 キックオフ & １時間で作るポチポチゲーム入門 2024/11/2@オンライン doradora09 ※画面は開発中のものであり、 実物とは異なる可能性があります

自己紹介 自己紹介 • Twitter ID : doradora09こと大城。 専門はデータ分析。日曜ぽちぽちゲームクリエイターをはじめました(Lv.1) ゲーム開発歴 • 本業では無し。趣味で少しトライするくらい • 生成AIが出てきたので、その力を借りればゲーム開発いけるのでは？ と目論んでおります。 好きなゲーム • シミュレーションゲームとかカードゲーム系は好きです。 (ここ2年くらいはCiv6をiPadでやってます。拡張パックのマンサムーサ良い)

この会の趣旨 1 なければ作る みなさんの作品もぜひLTなどでご紹介ください・・！ 2 極力ノーコーディング 生成AIの可能性をフル活用 3 コミュニティ形成 ワイワイやりましょう

今回使用する生成AI / 素材 / 開発環境 ChatGPT Plus コード生成とゲームロジックの設 計に活用。20$程度の課金 Suno-3.5 ゲーム用BGMの作曲に使用。 これも確か商用利用は要課金。 DALL-E ゲームグラフィックスの生成に利 用。ChatGPT経由で利用。 SE音のフリー音源 効果音ラボ様より。無料。 https://soundeffect- lab.info/sound/battle/ HTMLの動くブラウザ ノートPC推奨(ファイルを開いた りするので)。なお、プレイだけ ならiPadやスマホでもOK GitHub ゲームを一般公開する際のWebサ ーバ代わりに利用。

今回作成するゲームの概要 ジャンル シンプルなクリッカーゲーム。(サイコロダイスあり) 目標 なるべく少ないターン数でのドラゴンの撃破 特徴 AIが生成したグラフィックスと音楽を使用、(ほぼ)ノーコーディング 難易度 ５時間 + ５時間くらいで制作 ( 今日は１時間でいけるとこまで開発 ) https://doradora09.github.io/chatgames _20241019v2_dragon/d.html

HTML / CSS / JSについて 1 HTML ゲームの構造を定義 2 CSS ゲームのスタイルとレイアウトを設定 3 JavaScript ゲームのロジックと動きを実装 今回はChatGPT-o1 miniへの渡しやすさを重視して、 最初は１つのHTMLファイルに３つ書く形で実装 ( ちゃんとした構造化は次回以降の課題にて。 )

Githubについて アカウントとリポジトリ作成 ゲームプロジェクトの保存場所 を設定 コードの管理 今回は簡単のため、フォルダご とにバージョンa, b, c, dとしてま す 公開 Webサーバとして動作するので、完 成品はそこで公開します ( 開発は手元のPCとブラウザでOK )

テスト方法 について • 今回は最初は簡単のために、１つ のフォルダに全てのファイルを設置 してます ( a, b, c.html ) -> 別URLにあるd.htmlにはフォルダ構 造を分離したものを置いてます • フォルダをgithubからダウンロード して、そのままブラウザでindex.html を立ち上げればローカル環境でも動 作するはずです Zipで落として解凍、a, b, c.htmlを 再利⽤してください( c.htmlがよいかも )

ということで、 ここからは実際に１時間くらい みなさんとワイワイしながら開発デモ..!!

各種リンク 初期ver ( a, b, c ) ・GitHub https://github.com/doradora09/chatgames_20241019_dragon ・公開ページ https://doradora09.github.io/chatgames_20241019_dragon/ 完成ver ( d ) ・GitHub https://github.com/doradora09/chatgames_20241019v2_dragon ・公開ページ https://doradora09.github.io/chatgames_20241019v2_dragon/ 素材 / コーディング ・Suno AI https://suno.com/ ・ChatGPT https://chatgpt.com/ ・効果⾳ラボ https://soundeffect-lab.info/sound/battle/ •

今後 やりたい ことの メモ

Enjoy..!!