前回、第38回では、PUZFLOの動作が重くなってきた原因を調べました。
Unity Editorでは大規模な工場になると30FPS前後まで落ちていましたが、
Windows版としてBuildしてみると、最大規模でもほぼ60FPS。
性能面については、かなり安心できる状態になってきました。
そこで次に気になったのが、
ゲーム画面のUIです。
ここまでPUZFLOでは、
- コンベア
- 投入機
- 加工機
- ストッパ
- 分岐・合流
- ワーク種類
- 土地拡張
- 出荷場
など、かなり多くの機能を追加してきました。
ゲームの中身はどんどん増えています。
でもその一方で、
と、プレイヤーが確認したい情報もかなり増えてきました。
そこで今回は、PUZFLOのメインゲーム画面を本格的に整理していきます。
まずは現在のゲーム画面を整理してみる
ここまでUIを追加してきた結果、現在のゲーム画面は大きく、
- 上部バー
- 左側の設備パネル
- 中央の工場エリア
- 右側の設備情報
- 下部の生産操作
- 出荷場ゲージ
という構成になっています。
個人的に意識したのは、中央の工場をできるだけ広く残すことです。
PUZFLOで一番見てほしいのは、ボタンでも数字でもなく、自分が作った生産ライン。
なので、UIは画面端へまとめる方向にしました。
上部バーには「ゲーム全体の情報」
まず画面上部です。
ここには、プレイ中ずっと確認したい情報を集めました。
例えば、
- 所持金
- 現在の進行状況
- 全体に関係する情報
- 各種メニューへのアクセス
などです。
上部バーを見るだけで、
「今の工場全体がどういう状態なのか」
を確認できるようにします。
特に所持金は常に見えるようにしたい
PUZFLOでは、高性能な設備を置けば、ラインを成立させやすくなります。
ただし、高性能設備ほど高価です。
例えば、「加工機Lを置けば簡単そう」と思っても、所持金が足りない。
あるいは、「Mサイズで何とか成立させて、お金を節約しよう」という判断もできます。
つまり、所持金もライン設計の一部です。
設備詳細を開かないと残金が分からないのでは不便なので、
常に確認できる上部バーへ置くことにしました。
左側は「設備を選ぶ場所」
次は画面左側です。
ここには、設備パネルを配置しました。
開発初期は、設備数も少なかったので、
数個のボタンがあれば十分でした。
でも現在は、
- コンベア
- 投入機
- 加工機
- ストッパ
- 分岐
- 合流
- バッファコンベア
- 識別分岐
- 優先合流
など、かなり増えています。
さらに設備によっては、S・M・Lサイズまであります。
全部を適当に並べると、かなり分かりにくい。
そこで、「設備を置きたいなら左を見る」というルールにしました。
設備を選んで、そのまま工場へ配置する
操作の流れも統一します。
例えば加工機を置く場合、
左側の設備パネルから加工機を選ぶ。
↓
カーソルに半透明Previewを表示。
↓
工場の置きたい場所へ移動。
↓
クリックして配置。
という流れです。
これは以前実装した土地拡張と同じ考え方です。
設備が増えても、基本操作は変えない。
ここはなるべく統一したいと思っています。
右側は「選択した設備を見る場所」
左側が、設備を選ぶ場所なら、
右側は、選んだ設備の情報を見る場所にしました。
例えば加工機を選択すると、
- 設備名
- 価格
- サイズ
- 生産能力
- 設定値
- 現在の状態
などを確認できます。
PUZFLOでは「個/s」がかなり重要
右側の設備情報の中でも、特に重要なのが、能力：○○個/sです。
例えば、投入機が、0.80個/s
加工機が、0.50個/sだったら、
投入側の能力の方が高い。
つまり、「加工機前で詰まりそう」と予想できます。
逆に、加工機側に十分な余裕があれば、安定して流せる可能性が高い。
これまでPUZFLOでは、設備能力をできるだけ、
『 個/s 』
で統一してきました。
その考え方が、ここでかなり生きてきます。
左で選んで、右で確認する
UIを整理したことで、プレイヤーの操作も、
かなり分かりやすくなりました。
左を見る。
↓
設備を選ぶ。
↓
右を見る。
↓
能力や価格を確認。
↓
中央へ置く。
という流れです。
UIって、単純に見た目をきれいにするものだと思っていました。
でも実際に作ってみると、
「プレイヤーをどこへ誘導するか」を決める設計に近い気がします。
「生産開始」は大きく分かりやすくする
PUZFLOでは、設備を配置している状態と、
実際にワークを流している状態があります。
つまり、設計中と、生産中です。
この切り替えはかなり重要です。
そこで、生産開始ボタンは、画面の中でも分かりやすい場所に置きました。
「試運転」から「生産」へ変更
開発初期は、この操作を、試運転と呼んでいました。
機械設計の感覚だと、かなりしっくりくる言葉です。
ただ、Steamで一般の人にも遊んでもらうことを考えると、
少し専門的かもしれません。
そこで、試運転 → 生産へ変更。
ボタンも、「生産開始」という分かりやすい表現にしました。
実際にワークを流して、加工して、出荷する。
なので「生産」の方がゲーム内容にも合っています。
生産を始めると「出荷場ゲージ」を見る
生産開始後に重要になるのが、出荷場ゲージです。
生産開始すると左の設備パネルを
出荷場ゲージに切り替える。
PUZFLOでは、出荷場ごとに、
目標生産能力があります。
例えば、目標が、1.0個/sなら、その出荷場へ、
1秒に1個程度のペースで
安定してワークを送り続ける必要があります。
もちろん、現在、
『 0.26個/s 』
と数字で表示することもできます。
ただ、出荷場が増えてくると、
全部の数字を一つずつ読むのは大変です。
そこで、ゲージ表示にしました。
目標値へ近づくほどゲージが伸びる。
達成すれば、ひと目で分かる。
複数の出荷場を同時に見るゲームなので、
数字よりもかなり直感的です。
「あと1か所」がすぐ分かる
PUZFLOのクリア条件は、
すべての出荷場で目標生産能力を同時に達成すること。
例えば、
出荷場1：達成。
出荷場2：達成。
出荷場3：未達成。
出荷場4：達成。
だった場合、まだクリアできません。
でもゲージがあれば、「あと出荷場3だけ！」ということがすぐ分かります。
ゲームとしても、この「あと少し」が見えるのは結構重要だと思います。
出荷場20になると新しい問題も出てきた
ただし、ゲームをかなり進めると、
出荷場が20個まで増えます。
すると、ゲージが多すぎて画面に収まらない
という新しい問題が出てきました。
現状では、スクロールすれば確認できます。
でも生産中に、何度もスクロールして
確認するのは少し面倒です。
そこで、ゲージだけを一覧表示するモード
を作成しました。
ボタンを押すと、現状の出荷場ゲージと
切り替えて表示させます。
出荷場1～20の状態だけをコンパクトに一覧表示する。
ゲームが大きくなったことで、
UI側にも新しい工夫が必要になってきました。
UIが整うと一気に「ゲームっぽく」なった
今回追加したものは、新しい加工機でも、
新しいワークでもありません。
ゲームルール自体もほとんど変わっていません。
でも、
- 上部バー
- 左設備パネル
- 右設備情報
- 生産開始ボタン
- 出荷場ゲージ
が揃うと、一気に「ゲームを遊んでいる感」が出ました。
これまでは、Unity上で設備を動かしている。
という感じもありました。
でもUIが整ってくると、
プレイヤーが操作するゲーム画面
になってきます。
「何を表示しないか」も重要そう
UIを作っていると、
となります。
PUZFLOの場合、
など、表示できる情報はかなりあります。
でも全部を常に表示すると、逆に分かりにくい。
そこで、
| 画面上部 | 全体情報 |
| 画面左側 | 設計中：設備選択カード 生産中：出荷場ゲージ |
| 画面右側 | 設備詳細カード |
| 画面下部 | 生産・設計 切り替えボタン |
と役割を分けました。
この方がかなりスッキリします。
UIもChatGPTと壁打ちしながら決める
ここでも自分だけで、「これが正解！」と決めたわけではありません。
例えば、
とChatGPTへ相談。
そこから、
「ではこの方向でCodexへ実装してもらおう」
という流れで作っています。
UIについても、
自分 → ChatGPT → Codex → Unityで確認
といういつもの開発方法です。
まとめ｜「機能がある」から「使いやすい」へ
今回、第39回では、PUZFLOのメインゲーム画面を整理しました。
追加・改善したのは、
- 上部バー
- ゲーム全体の情報を見る場所。
- 左設備パネル
- 設置したい設備を選ぶ場所。
- 設計中のみ表示
- 右設備情報
- 設備の価格や能力を見る場所。
- 生産開始ボタン
- 設計から生産へ切り替える場所。
- 左出荷場ゲージ
- 各出荷場の達成状況を確認する場所。
- 生産中のみ表示
どれも、ゲームのルールそのものを増やす機能ではありません。
でも、遊びやすさにはかなり大きく影響する部分でした。
そしてメイン画面を整えていくと、
今度は、
タイトル画面
ポーズ
設定
操作方法
How To Play
セーブ画面
など、ゲーム全体のUIも統一したくなってきます。
次の第40回ではPUZFLOのメインゲーム画面だけでなく、
ゲーム全体のUIを「Steamで販売する製品」らしく
仕上げていくところへ進んでいきます。
コメント