[Unity]宴でゲームを作り始める -UIのレイアウト-


前回の記事 [Unity]宴でのプロジェクト立ち上げ手順 の続きになります。

・スマホ向けゲームを作成しています。
・画面のサイズは960x540です。
・宴2.6.13を使用しています。

・(初心者にとって)難しい設定や時間のかかる設定はなるべく回避しよう、という方向性で制作しています。
・自分用のメモなので、解説はざっくりです。

今回の目的

宴でプロジェクトを立ち上げると、必要なボタンや画面は既に配置されていますが、スマホ向けゲームでは不要な項目があったり、セーブ画面でアイコンの一部が画面からはみ出していたりするため、修正が必要です。
まだイラスト(ゲームで使用する物)はまだ何も用意していない状態ですが、自分が作るゲームに合わせて、UIのレイアウトだけでも先にやっておくことにします。

タイトル画面をレイアウトする


タイトルを表示させると、デフォルトではこのような配置になっています。

レイアウトしていきます。
ダウンロードは私の場合使用しないのでオフにしました。
既存のボタン(ギャラリー等)をコピーして、「クレジット」と「利用規約」ボタンを作ります。(中身は現段階ではまだ作りません。とりあえずレイアウトだけ。)

ボタンのレイアウトには、ゲームオブジェクトの位置を揃えるに、「均等割り付け(Y軸)」を追加したエディタ拡張を使用します。([Unity]宴でのプロジェクト立ち上げ手順参照)

適当に配置した後、ボタンを複数選択した状態で、「Tool」→「X座標揃え」や、「均等割り付け(Y軸)」を選択すると、

このように位置が揃います。

UIのレイアウトは、InspectorのRect Transformから数値を入力する方法もありますが、このエディタ拡張を使うと短時間で均等にボタンを配置することができます。
(正確に●ピクセルおきに配置したい等の場合は、Rect Transformから数値入力すると良いと思います。)

コンフィグ画面をレイアウトする

デフォルトではこのようになっています。

プラットフォームによっては、「マウスホイールで文字送り」や「フルスクリーン表示」は非表示にすると良いと思います。

タイトルボタンや、スキップ系の選択肢、環境音は、使わない予定なのでオフにして作成することにしました。
タイトルボタンをオフにした理由は、ユーザーがゲームプレイ中にうっかり押してしまうと、セーブせずにタイトルに戻ってしまうためです。
スキップ系の選択肢は、シナリオ量や構成によってはあった方が良いと思います。


こんな感じになりました。

セーブ・ロード画面をレイアウトする

デフォルトではこのようになっています。

ゲーム画面上では、このようにアイコンがはみ出してしまっている状態です。

アイコンがはみ出すのを簡単に回避するには、AdvEngineのAdv Save Managerで、Save Maxの数を7にします。


はみ出さなくなりました。

1画面にセーブアイコンが収まったので、GridPage下のPageCarouselsをオフにします。

セーブアイコンの変更は、下記Q&A(宴公式ホームページより)が参考になります。
選択肢のサイズや配置の変更について

セーブアイコン内のテキストを編集するときは、一時的に文字(下の画像では「あいうえおあいうえお…」)を入れると見やすいです。

Adv Save Managerは以下のような設定にしました。

CaptureImageは、自分が作るゲームと同じ比率のサイズに変更すると良いと思います。(私の場合は16:9)

CaptureImageのサイズを96x54に設定しました。

レイアウトが完了しました。

ギャラリー画面を変更する

デフォルトではこのような状態です。

ギャラリー画面は、現段階ではどのように利用するか考え中のため、最低限の修正のみ行います。

サウンドルームは使用しない予定なので、サウンドボタンをオフにしました。

CgGalleryのアイコンのサイズを変更します。
これも自分のゲームと同じ比率にします。

Inspector>Grid Layout Group>Cell Sizeを、192x108に変更します。


アイコンのサイズが変更されました。

SceneGalleryのアイコンも同様に変更します。

ちなみに、現段階でゲームを実行し、ギャラリーを見てもアイコンは表示されません。(まだシナリオにCG回想やシーン回想を組み込んでいないため)

デバッグメニューをオフにするor位置を変更する

ゲーム再生中、画面右上の隅を押すと、デバッグメニューが表示されます。

私は画面右上の隅にUIを表示することが多いので、このままではテストプレイの際に意図せずデバッグメニューを開いてしまいます。

対処方法① オフにする


テストプレイ中、デバッグメニューを使用する予定がない場合は、デバッグメニューをオフにします。

対処方法② SwitchButtonの位置を変更する


テストプレイ中、デバッグメニューを使用したい場合は、SwitchButtonの位置やサイズをゲーム内のUIと重ならないように変更します。

UIにカーソルが重なった時のSEを消す

各ボタンには、デフォルトでUgui Button Seスクリプトが付いていて、ボタンをクリックした時の音(mouse_click_1)と、ボタン上にカーソルが来た時に鳴る音(mouse_hover_1)が設定されています。
スマホ向けゲームのため、mouse_hover_1は不要なので、消去します。
(消去しなくても特に問題ないと思いますが、自分の場合、テストプレイ時にスマホと同様音が鳴らないようにしておきたいと思ったので、消去しました。)

(※もっと効率的なやり方があると思いますが、参考までに私がやっている手順を書いておきます。)

①とりあえず思い付くボタン(タイトル画面にあるボタン等)からmouse_hover_1を消していく

②一通り消したところで、以下の手順で漏れがないか検索

  1. mouse_hover_1を選択した状態で右クリックし、Find References In Sceneをクリック

  2. Hierarchyにmouse_hover_1が使用されているオブジェクトが表示されるので、その中からUgui Button Seがアタッチされているオブジェクトを探す

  3. Ugui Button Seのmouse_hover_1を選択した状態でDeleteキーを押し、mouse_hover_1を消す

  4. 1~3を繰り返す(全てのボタンからmouse_hover_1が消えたら、Find References In Sceneをクリック後、Hierarchyに何も表示されなくなる)