Unity上に12×8のグリッドを作ってみた
ついにゲームの盤面ができた
前回の記事では、工場パズルの土台として「12×8の正方形グリッド」を使うという方針を決めました。
プレイヤーはマス目の上に設備を配置する。
1マスに1つのブロックを置く。
コンベアの向きを変えながら、スタートからゴールまでワークを運ぶ。
ここまで考えたことで、ようやくゲームの盤面が見えてきました。
ただし、まだこの時点では、
頭の中に12×8のグリッドがあるだけ。
Unityの画面には何もありません。
そこで今回は、この12×8グリッドを実際にUnity上へ作っていきます。
ここから少しずつ、「ゲームの企画」だったものが、
実際に操作できるゲームへ変わり始めます。
Codexに渡すための仕様書ファイルを作る
まず最初にやったのが、前回までに整理したMVPの仕様を、
Codexが読めるファイルとして保存することでした。
そのとき出てきたのが、MVP_Spec_v0.1.mdというファイルです。
正直、「.mdって何？」というところからスタートしています。
調べてみると、.mdはMarkdownという形式のテキストファイル。
難しいものではなく、普通の文章に、#や-などを付けて、見出しや箇条書きを表現できる形式です。
たとえば、
# MVP仕様
## グリッド
- サイズ：12×8
- 1マスに1ブロック配置
## ワーク
- 丸形
- コンベア上を移動こんな感じです。
Wordのように、文字色を変えたり、
レイアウトを整えたりする必要はありません。
Codexに読ませるための、シンプルな設計メモという感覚です。
「メモ帳で作っていいの？」というレベルからスタート
ここでも当然、よく分かっていません。
そこでChatGPTに、
MVP_Spec_v0.1.mdはどうやって作成する？
と聞きました。
すると、
VS Codeで作る方法を教えてもらいました。
しかし、さらに私は、
メモ帳でいい？
と質問。
答えは、メモ帳で問題なし。
ということでした。
これは個人的にかなり助かりました。
ゲーム開発を始めたばかりで、
次から次へと知らない言葉が出てきます。
正直、全部を理解してから進んでいたら、
いつまで経ってもゲーム制作が始まりません。
なので今回は、分からなくても、とりあえず必要なところだけ使う。
というスタイルで進めます。
メモ帳を開いて、前回ChatGPTに作ってもらった仕様を貼る。
ファイル名を、MVP_Spec_v0.1.mdにする。
UTF-8で保存。
これで仕様書ファイルの完成です。
Codexに「仕様書を読んで」と頼めるようになった
このファイルをUnityプロジェクト内の、
Assets/Docs/MVP_Spec_v0.1.mdに置きました。
するとCodexに、
このプロジェクト内の
Assets/Docs/MVP_Spec_v0.1.md
を読んでください。STEP1だけ実装してください。
と伝えるだけで、ゲーム全体の仕様を読んだ上で、
必要な部分だけ作ってもらえるようになります。
ここはかなり便利だと感じました。
毎回、
と最初から説明する必要がありません。
仕様書を更新しておけば、Codex側もその内容を前提に作業できます。
機械設計でいうと、毎回口頭で仕様を説明するのではなく、
図面や仕様書を渡して製作してもらう感覚に近いです。
ここでも少し、「AIゲーム開発って意外と設計業務っぽいな」と思いました。
STEP1：まずは12×8のグリッドを表示する
仕様書が用意できたところで、いよいよ最初の実装です。
STEP1の目的は、ものすごくシンプル。
12×8のグリッドを画面に表示する
これだけです。
12×8なので、必要なセルの数は、
96マス。
ゲームとしてはまだ何もできません。
クリックもできない。
設備も置けない。
ワークも流れない。
ただ、96個の正方形が並ぶだけです。
でも今回は、いきなり全部作らない
というルールがあります。
まずは、グリッドだけ。
STEP1の合格条件をGPTが決めてくれる
Codexに実装してもらったら、Unityを起動してPlayボタンを押します。
確認することは、非常にシンプルです。
画面上に、12列×8行のマス目が表示されること。
そして、エラーが出ていないこと。
さらに、セルが96個生成されていること。
この3つができれば、STEP1合格。
こうして、1つずつ合格条件を決めてもらい進めていくことにしました。
この方法は、かなり分かりやすかったです。
ついにUnity上に「ゲームの盤面」が出てきた
そして、Codexに実装してもらい、UnityでPlay。
すると、画面にマス目が並びました。
12×8。
全部で96マス。
ただの白いマス目ですが、個人的にはかなり嬉しかったです。
第4回では、四角形が1つ右へ動いただけでした。
そこから、仕様書を作って、ゲームルールを考えて、
ようやく、工場パズルの盤面らしきものが画面に現れました。
まだ設備はありません。
でも、
「ここにコンベアを置いていくのか」
「この中でラインを考えるのか」
と想像できるようになります。
ここで初めて、ゲーム画面のイメージが、かなり現実的になってきました。
でも、マス目が出ただけではゲームにならない
当然ながら、グリッドが表示されたところで、まだ何もできません。
そこで次は、マウスでセルを選択できるようにする。
STEP2です。
Codexには、こんな内容をお願いしました。
STEP1は正常に動作しました。
STEP2を実装してください。
目的：
マウスでセルをクリックできるようにする。
・マウスカーソル下のGridCell取得
・左クリックでセル選択
・選択セルをハイライト
・別セルを選択すると前のハイライト解除
・Consoleへ座標表示
まだブロック配置は実装しないでください。ここでも、欲張りません。
クリックするだけ。まだコンベアは置きません。
STEP2：クリックしたマスが黄色になる
STEP2をCodexに実装してもらったら、Unityを再生。
グリッドの中から、適当なマスをクリックします。
すると、選択したマスが黄色に変わりました。
これだけでも、一気に「操作している感」が出ます。
さらに別のセルをクリックすると、前の黄色が消えて、
新しく選んだマスだけ黄色になる。
つまり、常に1マスだけ選択される状態です。
Consoleに座標が出る
さらに、セルをクリックするとUnityのConsoleに、
Selected GridCell: (3,5)のように表示されます。
別のマスをクリックすると、
(0,0)
(5,2)
(11,7)のように座標が変わる。
これを見たとき、
「ちゃんとゲーム側がマスの位置を認識している」
ということが分かりました。
私はコードをまったく理解していません。
でも、クリックした場所が黄色になって、座標まで表示される。
それだけで、Codexが裏側で何かちゃんとやってくれていることは分かります。
STEP2の合格条件も明確にする
STEP2では、
次の4つを確認しました。
- グリッドが表示される
- クリックしたセルが黄色になる
- 別のセルを選ぶと前の選択が解除される
- Consoleに正しい座標が表示される
全部OK。
STEP2も合格です。
ここまでくると、ただのグリッドではありません。
プレイヤーが「どのマスを使うか選べる盤面」になっています。
かなり地味ですが、この機能がないと、後からコンベアも、
加工機も、ストッパも、置けません。
いよいよ次は「ブロックを置く」
ここまで来ると、次にやりたくなることは決まっています。
コンベアを置きたい。そこでSTEP3に進みます。
当初は、「コンベアを配置する」だけの機能を作ろうとしていました。
しかし、ChatGPTから、
コンベア専用の配置機能を作るより、
先に「ブロック配置システム」を作った方が後が楽
という提案がありました。
これは確かにその通りです。
今後は、コンベアだけではありません。
- ストッパ
- 加工機
- センサ
- 合流設備
いろいろな設備を追加する予定です。
なら最初から、いろいろなブロックを置ける
共通の仕組みを作った方がよさそうです。
STEP3で作ること
Codexにお願いする内容も、少しゲームらしくなってきました。
コンベアには、進行方向が分かる矢印を表示する。
ただし、まだワークは動かさない。
ここも重要です。
「コンベアを置けるようになったんだから、ワークも流そう」と一気に進みたくなります。
でも、まずは、配置・回転・削除が正しくできることを確認する。
そのあとワークを動かす。
かなり慎重な進め方ですが、
ゲーム開発未経験の自分には、
この方が分かりやすかったです。
この頃から「STEP○」方式が定着していった
ここまで進めて、
今回のゲーム開発のやり方がかなり固まってきました。
- 仕様を決める。
- ChatGPTにCodex用の指示文を作ってもらう。
- Codexに実装してもらう。
- Unityで動かす。
- 合格条件をChatGPTでチェック。
- 問題がなければ、次のSTEPへ。
- 問題があれば、その症状をChatGPTに相談する。
つまり、設計 → 実装 → 試運転 → 確認 → 次工程です。
またしても、やっていることが機械設計っぽくなってきました。
「ゲームを作る」ではなく「小さい機能を積み上げる」
ゲーム開発を始めた当初は、
Codexに、
工場ゲームを作って
とお願いすれば、かなり一気に作れるのでは？
と思っていました。
でも実際に進めてみると、自分のような初心者ほど、
小さい機能に分解した方が圧倒的に分かりやすいと感じます。
- STEP1
- グリッドを出す。
- STEP2
- クリックできるようにする。
- STEP3
- ブロックを置く。
こうして一つずつ積み上げていく。
各STEP単体では、「これがゲームなの？」というくらい地味です。
でも、積み上げると、少しずつゲームになります。
第7回で、ようやく「触れるゲーム」になった
今回までで、ゲームには、12×8のグリッドができました。
そして、セルをクリックすると、選択できるようになりました。
まだワークは流れません。
コンベアも配置できません。
加工機もありません。
でも、画面をクリックして、ゲーム側がその入力を認識する。
これは、第4回で四角形が勝手に動いていたときとは、かなり違います。
初めて、プレイヤーがゲームへ入力できるようになったからです。
ここから、「見るだけの画面」から、「操作するゲーム」へ変わっていきます。
次回は、ついにコンベアを配置する
次のSTEP3では、いよいよ、グリッドの上にコンベアを置きます。
- セルを選ぶ。
- コンベアを配置する。
- 向きを変える。
- 不要なら削除する。
ここまでできると、プレイヤーが、自分で工場ラインを組み立てる
という今回のゲームの中心的な操作が始まります。
そしてその次には、いよいよ、
ワークをコンベアの上で流す。
ここまで来れば、
かなり「工場ゲーム」らしくなってきそうです。
次回は、
【第8回】グリッドの上にコンベアを配置できるようにしてみた
というところから、ゲーム制作を進めていきます。
コメント