LT : ChatGPTとhtml/css/jsで 3D⾵ゲームを作ろうとして 苦戦している話 2025/1/18 @doradora09

モチベーション & お詫び・・ • モチベーション • ⾊々とテーマを検討していましたが、 ウィザードリィっぽいダンジョンの画⾯(3D⾵2D画⾯) を作れないかな、というのがそもそもの発想 • お詫び • 完成版ではなく、試⾏錯誤の途中段階の記録です • 次回の兄弟コミュニティの「⽣成AIでポチポチゲームを作ろうの会」 あたりでリベンジ予定

ウィザードリィとは • めちゃムズの古き良き RPG • 「ダンジョンに迷う」 をガチで体験できる • 最初のシリーズは 1985年 引⽤：https://fm-7.com/museum/products/9gyjgaaf/

参考：Switch版だとこんな感じ • 最近はソシャゲメー カー？がリメイクして たりもするっぽいです が、こちらが王道スタ イル 引⽤：https://store- jp.nintendo.com/item/software/D70010000086435?srsltid=AfmBOoqYolm6yKxzSQj6Gig0eTYt6IH4Sbq wmAZoJKcWrPMlyH1z5cwv

断念した⽅法と代替案 • 当初の予定 • ⽣成AIで作った画像をいい感じに組み合わせられないか、と検討 -> 「回転」がめちゃ⾯倒・・ 画像枚数の組み合わせ問題 -> ⽣成AIでの画像にばらつきあり (⾓度を揃えるのがめんどい・・) • 代替案 • 画像ではなく「⽂字」にする？ -> 3Dっぽさは減るので没 • そもそも3D系のhtml/jsライブラリは？ -> こっちでトライ

当初の予定(⽂字版) • Chat先⽣にチャチャット 作ってもらったのがこちら ( ３枚の視点 ) • 本当は１枚画像で表現した いが、組み合わせが⼤変 • 同じ位置でも90度回転で4 パターン • ２つ先まで⾒通せるように すると組み合わせ増

jsのいい感じのライブラリに頼る • いくつかのライブラリが あったものの、今回はA- Frameを利⽤ • なお物理エンジンを組み込 んだ別のライブラリ (Cannon.jsなど)もあるよ うだが、htmlファイル１ 枚ではたまにエラー吐いて いたので今回は⾒送り 物理エンジンの例

試作段階がこちら • 制限時間内にコインを 集める、という別の趣 旨だが回転や壁との衝 突判定も⼿元のJSで実 現 • ⼀応、htmlをファイル 実⾏でも動くが、 pythonでローカルサー バは⽴ち上げて実⾏が 確実 • 300⾏くらい

⼤変だった点と今後の改善ポイント • ⼤変だった点 • 環境構築 (動くライブラリやらなんやら。6-7種類試した) • 物理エンジンが使えない状態での当たり判定など • 今後の改善ポイント • もっと、ダンジョンっぽい⾒た⽬に • 回転の縛りとか • 迷路を複雑化 -> ゲーム性を⾼めるなら、そこにRGP要素を加える

所感：先⼈すごい。JavaScriptを勉強したい • 3D⾵ゲーム、40年近く前 に、この仕組みを作った ⼈たちすごい ( 制約の多さから、⼀種 の俳句とも感じる ) • ⼿元で簡易的なデモを作 るにはJSは相性が良さそ うなので、⾊々とキャッ チアップしていきたいな と思います

Enjoy .. !!