Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20241221_第2回ポチポチゲームの会_シューティングゲームの巻
Search
NobuakiOshiro
PRO
December 20, 2024
Technology
1
87
20241221_第2回ポチポチゲームの会_シューティングゲームの巻
https://genai-pochi-games.connpass.com/event/339022/
NobuakiOshiro
PRO
December 20, 2024
Tweet
Share
More Decks by NobuakiOshiro
See All by NobuakiOshiro
20250709_MacStudioとLlama-4Maverickでローカル画像認識
doradora09
PRO
0
24
20250709_第3回_GenAIアナリティクス勉強会at東京_オープニングトーク
doradora09
PRO
0
46
20250625_生成 AI 活用2年目の壁を突破せよ_(60min版)
doradora09
PRO
0
49
20250628_生成AIおすすめyoutube共有会_ChatGPT部第69回
doradora09
PRO
0
55
20250607_AIから始めるロボット勉強会_HuggingFaceについて
doradora09
PRO
0
22
20250604_ビール片手に生成AIデモ
doradora09
PRO
0
19
20250524_ChatGPT部第67回_オープニングトーク
doradora09
PRO
0
11
20250503_第1回AIロボット勉強会_自動生成サマリ(ファクトチェック前)
doradora09
PRO
0
17
20250503_第1回aiロボット勉強会
doradora09
PRO
0
24
Other Decks in Technology
See All in Technology
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
150
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
What’s new in Android development tools
yanzm
0
320
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
PO初心者が考えた ”POらしさ”
nb_rady
0
210
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
AWS認定を取る中で感じたこと
siromi
1
190
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Faster Mobile Websites
deanohume
307
31k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf 2023
tenderlove
30
1.1k
Six Lessons from altMBA
skipperchong
28
3.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Speed Design
sergeychernyshev
32
1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Docker and Python
trallard
44
3.5k
Transcript
第2回 ポチポチゲームを 作ろうの会 〜 シューティング ゲームを作ろう︕ の巻 〜 2024/12/21 @doradora09
⾃⼰紹介 @doradora09こと⼤城、出⾝は沖縄、東京 で就職して今は福岡に移住。 本業は昔数年Webエンジニア->データサイエ ンス関係。 ⽣成AI使えば昔やりたかったゲーム開発ができ るのでは︖ということでこの勉強会を⽴ち上げ ました。
この会の趣旨 • ないなら作る、でワイワイやる • 極⼒、ノーコーディング • ぜひみなさんの作品も いつかプレイさせてください・・︕
この会でよく使ってる⽣成AIや素材等 ChatGPT Plus / Pro コード生成とゲームロジッ クの設計に活用。20$程度の 課金 Suno.AI ゲーム用BGMの作曲に使用。
これも確か商用利用は要課金。 DALL-E ゲームグラフィックスの生成 に利用。ChatGPT経由で利用。 SE音のフリー音源 効果音ラボ様より。無料。 https://soundeffect- lab.info/sound/battle/ HTMLの動くブラウザ PC環境推奨(ファイルを開いた りするので)。なお、プレイだ けならiPadやスマホでもOK GitHub ゲームを一般公開する際の Webサーバ代わりに利用。
前回と、今回のテーマ • 前回は「ドラゴンスレイヤー」 という名前で コマンド選択式のポチポチゲー ムを作ってました。 • 今⽇は横スクロールなシュー ティングゲームを1時間で作り ます(少⼈数ならハンズオン)
https://doradora09.github.io/chatgames_ 20241019v2_dragon/
完成版の例 • (BGM注意) https://doradora09.github.io /20241221_chatgames_shooting_starrimlegion /
ゲーム開発ハンズオン
ChatGPT Proをお貸しします (後でパスワード変更しておきます) • チャット欄にアカウント・パスワードをお送りしますので OpenAIのサイトからChatGPTにアクセスしてみてください • https://openai.com/index/chatgpt/ • ちなみに複数名で同時利⽤する場合はタブが乱⽴しますので、
ニックネームとか⽬印をタブの名前につけておくと良いかも です [注意] ID / Passの 外部公開は 禁⽌
参考︓ IDを⼊れて、 続けるをクリック。 次にパスワードを ⼊れる ChatGPTの画⾯ o1-miniのモデルは早い ので切り替えおすすめ ( 好きなモードでOK
)
ChatGPT活⽤上の注意点 • 右上のアイコン->設定->デー タコントロール->「すべての ⼈のためにモデルを改善する」 をOFFにしてご利⽤ください • ⼤原則、個⼈情報⼊れないこと ( 今回はゲーム開発なので⼤丈
夫だと思いますが、念の為 ) ここがオフなのを確認
ゲーム開発のヒント
ゲーム開発のヒント • ストーリーの⾻⼦を⽣成AIに作らせる • それをhtml/css/jsの1ファイルでゲーム化 • 必要に応じてupdate & デバッグ •
画像と⾳楽とSE⾳の追加 • 完成版のGitHub Pagesでの公開
シューティングゲームの要素例 • 横スクロール︖縦スクロール︖ • 敵の強さ / 弾幕 / ボス戦 •
武器のパワーアップ / シールド • ボムの実装 (敵の球も消す) • エンディング
Chat先⽣作のコードの実⾏⽅法と補⾜ • htmlファイルの場合、テキストエディタなどにソースコード をコピペして、ファイルの拡張⼦を「.html」にすれば、ダブ ルクリックするだけでブラウザにて動きます • ちなみに、ChatGPT-4o、またはo1、o1-proであればファイ ル⾃体のアップロードも可能ですが、個⼈的にはo1-miniが チョッパやなので、ソースコードをコピペしてChat先⽣に指 ⽰だしすることが多いです。
ファイル管理 • 最初はhtmlファイル1つに全ての処理をまとめた⽅がChat先 ⽣とのやりとりは楽です(ただ、1000⾏を超えるとちょっと怪 しい) • ある程度バージョンアップしたら、ファイル名を変えて世代管 理するとよいです(動かなくなることがあるので) • 最初はフォルダに全ての要素を平置き、そのうちBGMやSE⾳、
画像が増えてきたら素材⽤のフォルダを作ってそのファイルパ スを指定してもよいでしょう(例︓se/shot.mp3、など)
開発時のデバッグ⽅法 • 基本は「こういう問題が起きている」とChat先⽣に連携 • ⾔葉で書きにくいものはスクリーンショットを撮って共有も 有効 • 画⾯がうんともすんとも⾔わない時はブラウザの「開発者 モード」でエラーログが出ていないかをチェック
• Chormeブラウザの場合は右上の3点 リーダー -> その他のツールà デベ ロッパーツールで、「Console」タブを クリックするとエラーログが⾒れます 画⾯参考︓ ここに⾊々出てきます
( 問題がなければ何も出ません )
• Githubのアカウントが必要です https://github.co.jp/ • ゲーム開始のファイルをindex.htmlとして保存して、 Githubにリポジトリ登録&ファイル保存、Github Pagesで公開 設定をして数分まてば全世界からプレイできるようになります ゲームの公開 これで今⽇からあなたもポチポチゲームクリエイター・・︕︕
Enjoy..!!