前回、第39回では、PUZFLOのメインゲーム画面を整理しました。
- 上部バー
- 左側の設備パネル
- 右側の設備情報
- 生産開始ボタン
- 出荷場ゲージ
ここまで整えたことで、ようやく、
「Unityで設備を動かしている画面」から
「プレイヤーが遊ぶゲーム画面」に近づいてきました。
ただ、ゲームにはメイン画面以外にもたくさんの画面があります。
Steamで販売するなら、こうした画面も含めて、
「ひとつのゲームとして統一されている」
状態にしたいところです。
そこで第40回では、PUZFLOのメインゲーム以外のUIも一気に整えていきます。
まずはタイトル画面から作り直す
ゲームを起動して最初に表示されるのが、タイトル画面です。
ここはプレイヤーがPUZFLOを初めて見る場所でもあります。
ゲーム本編がどれだけ作り込まれていても、
最初の画面が仮ボタンだけでは、
どうしても開発中っぽく見えてしまいます。
そこでタイトル画面は、PUZFLOらしい、
工場・コンベア・設備を感じられるデザインにしました。
現在は中央に、PUZFLO
その下に、Run the Line
というタイトルを表示。
背景も、工場らしい雰囲気のあるデザインにしています。
さらに、設備のアイコンやワークが横へ流れていくような演出を追加しました。
単純な静止画より、「ラインを流すゲームなんだな」という
雰囲気が少し伝わりやすくなったと思います。
PLAYを一番目立たせる
タイトル画面では、
何より、PLAY が一番重要です。
そのため、PLAYボタンは大きく目立つ位置へ配置。
その下に、
- How To Play
- Settings
- Exit
という順番で並べています。
ゲームを起動したプレイヤーが、
「で、どこを押せば始まるの？」
と迷わないことを優先しました。
タイトル画面は豪華にしようと思えば、いくらでも情報を追加できます。
でも最初の画面なので、必要以上に複雑にしないことも重要そうです。
次はポーズ画面
ゲームをプレイ中、ESCキーなどで開くのが、ポーズ画面です。
最初は、単純に、
「再開」だけでもいいかなと思っていました。
でも実際にゲームを遊んでみると、
プレイ中に、
「操作方法をもう一度確認したい」
「音量を変えたい」
「タイトルへ戻りたい」
という場面が出てきます。
そこでポーズ画面を、ゲーム中のメニュー画面として使うことにしました。
ポーズ画面は「迷子になったときの入口」
PUZFLOは、
- 設備配置
- ワーク種類
- 加工回数
- 生産能力
- 出荷条件
など、ゲームが進むほど考えることが増えていきます。
そのため、ポーズ画面から、設定や操作方法へ
アクセスできるようにしておくと、かなり使いやすくなります。
ただし、ボタンを増やしすぎると、
今度はポーズ画面そのものが分かりにくくなります。
なので、再開を一番分かりやすくして、
その下に必要な機能を並べるという構成にしました。
設定画面もゲームらしく整える
次は、設定画面です。
ゲーム制作を始めたばかりの頃は、設定画面について、
ほとんど考えていませんでした。
でもSteamで販売するゲームなら、
- 音量
- 画面
- VSync
など、最低限の設定は必要になります。
特にBGMやSEを追加してからは、
設定画面の重要性が一気に上がりました。
BGMとSEを分けて調整できるようにする
PUZFLOでは、
タイトル画面
生産中
ボタン操作
設備配置
クリア
エラー
など、
いろいろな場所で音を使います。
そのため、単純な、音量ON / OFFだけではなく、
BGMとSEを分けて調整できるようにしました。
プレイヤーによって、
「BGMは小さくしたい」
「効果音はしっかり聞きたい」
という好みも違います。
このあたりも、実際にSteamゲームとして遊んでもらうことを
考え始めたことで、必要になってきた部分です。
VSyncって何？
設定画面を作っている途中で、自分自身も、
VSyncって何？
という状態でした。
これもChatGPTに聞きながら、どういう設定なのか確認していきます。
PUZFLOの場合、高速なアクションゲームではありません。
なので、細かいグラフィック設定を大量に並べるより、
必要なものだけ分かりやすく表示する方向にしました。
ゲーム設定も、多ければいいわけではなさそうです。
操作方法をいつでも確認できるようにする
次に作ったのが、操作方法画面です。
PUZFLOでは、マウス操作だけでなく、
など、
いくつか操作があります。
開発している自分は、当然全部知っています。
でも初めて遊ぶ人は知りません。
当たり前なんですが、ゲームを作っていると、
意外とこの感覚を忘れます。
ESCキーの説明も追加
操作方法画面を見直していると、
ESCキーについても説明した方がよさそうでした。
ゲーム中にESCを押したら何が起きるのか。
キャンセルなのか。
ポーズなのか。
画面を閉じるのか。
こうした小さな部分も、
初めて遊ぶ人にとっては重要です。
そこで、主要な操作は、この画面を見れば
一通り分かる状態を目指しました。
How To Playは「操作」ではなく「遊び方」
ここで少し悩んだのが、
操作方法とHow To Playは何が違うの？
というところです。
最終的には、
操作方法。
↓
どう動かすか
How To Play。
↓
何をすればゲームをクリアできるか
という役割に分けました。
How To Playではゲームの目的を説明する
現在のHow To Playでは、
主に、
- ゲームの目的
- 基本ルール
- ゲームの流れ
- 成功条件
を説明しています。
PUZFLOの場合、単純に設備を置けばいいゲームではありません。
設備を配置する。
- 生産する。
- 問題を見つける。
- 設備や配置を改善する。
- もう一度生産する。
そして、
すべての出荷場で、目標生産能力を同時に達成する。
これがゲームの中心です。
なのでHow To Playでは、操作ボタンの説明よりも、
「このゲームで何を考えるのか」を伝えることを優先しました。
「個/s」もここで説明する
PUZFLOでは、
『 個/s 』
という数字がかなり重要です。
ただ、普段ゲームを遊ぶ人が、最初から、
「0.5個/s」と言われても、分かりにくいかもしれません。
そこで、
0.5個/s ＝ 約2秒に1個
1.0個/s ＝ 約1秒に1個
という形でも説明します。
この数字さえ理解できれば、
- 投入機
- 加工機
- ストッパ
- 出荷場
などの能力も、かなり比較しやすくなります。
最後はセーブ画面
そして今回かなり大きく作ったのが、セーブ画面です。
PUZFLOは、1回遊んで終わるゲームではありません。
- 土地を広げる。
- 設備を増やす。
- 出荷場を増やす。
- 所持金を増やす。
少しずつ工場を大きくしていきます。
なので、当然、続きから遊ぶ必要があります。
複数のセーブデータを選べるようにする
セーブ画面では、
SAVE 01。
SAVE 02。
SAVE 03。
のように、複数のデータを選択できるようにしました。
セーブ枠の追加機能も実装。
さらに、各セーブデータには、
- 出荷場の進行状況
- 所持金
- プレイ時間
- 最終保存日時
などを表示。
これなら、「どのデータが一番進んでいたっけ？」
となっても、ある程度判断できます。
セーブは基本的に自動
PUZFLOでは、頻繁に手動保存するゲームにはしませんでした。
- 設備を置いた。
- 生産を止めた。
- 一定時間経過した。
など、
ゲーム側で自動保存していく方向です。
そのためセーブ画面は、保存する画面というより、
「どのデータから再開するか選ぶ画面」という役割が強くなっています。
そこで表示も、「セーブデータを選択」より、
「再開するデータを選択」の方が分かりやすそうだと考えました。
UIの色や雰囲気も統一する
ここまで作ると、画面ごとにデザインがバラバラなのも気になってきます。
となると、どうしても統一感がなくなります。
そこで、PUZFLOでは、濃いネイビーを基本にして、
そこへ、
などをアクセントとして使う方向にしました。
工場ゲームらしい、少し機械的な雰囲気を残しつつ、
暗くなりすぎないようにしています。
画面を作るたびにChatGPTへ見せる
今回のUI制作では、かなりスクリーンショットを使いました。
Codexで画面を作る。
↓
スクリーンショットをChatGPTへ送る。
要望や壁打ちをする。
「どうですか？」と聞く。
↓
文字が小さい。
余白が広い。
ボタンが目立たない。
説明が分かりにくい。
などを指摘してもらう。
↓
Codexへ修正依頼。
↓
またUnityで確認。
という繰り返しです。
UIは、コードだけ見ても、良いか悪いか分かりません。
実際の画面を見て、「なんか分かりにくい」を直していく作業がかなり多かったです。
UI作りでも「自分の違和感」が重要だった
バグ修正のときもそうでしたが、
今回も、自分の役割は、完璧なUI設計をすることではありません。
例えば、
みたいな、違和感を見つけることです。
そこからChatGPTに相談すると、具体的な改善案にしてくれます。
さらにCodexへ渡せる形まで整理できます。
コードが分からなくても、画面を見て感じたことは伝えられます。
これはUI制作でもかなり重要でした。
ゲームは「中身」だけでは完成しない
PUZFLOを作り始めた頃は、とにかく、
- ワークが流れる。
- 加工できる。
- ストッパが動く。
- 出荷できる。
という、ゲーム内部の仕組みばかり作っていました。
それだけでも十分楽しかったです。
でもSteamで販売しようとすると、それだけでは完成ではありません。
こうした、ゲームの外側も必要になります。
今回UIを作って、ようやくそのことを実感しました。
まとめ｜少しずつ「製品版のゲーム」になってきた
今回、第40回では、
メインゲーム以外のUIをまとめて作りました。
- タイトル画面
- ポーズ画面
- 設定画面
- 操作方法
- How To Play
- セーブ画面
ゲームルールそのものは、ほとんど変わっていません。
でも、これらが揃ったことで、PUZFLO全体がかなり、
ひとつのゲームらしくなってきました。
第1回では、「AIを使ってゲームって作れる？」
というところから始まりました。
それが今では、タイトル画面があり、設定があり、セーブがあり、Windows版も動く。
少しずつですが、本当にSteamで販売するゲームの形が見えてきました。
そして、ここまで来ると、次はいよいよ、
Steam側の準備も進めなければなりません。
ゲームを作るだけでは、Steamでは販売できません。
Steamworksへの登録。
Steam Direct。
税務情報。
ストアページ。
価格。
対応言語。
ストア画像。
次回からは、
「ゲームを作る」から「Steamで販売する準備をする」
段階へ進んでいきます。
コメント