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

  • 5
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

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

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

今回の目的

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

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

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

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

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

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

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

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

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

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

image

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

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

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

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

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

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

2016-10-04 17_31_08-Unity Personal (64bit) - UtageWaltz.unity - Waltz - PC, Mac & Linux Standalone _.jpg
はみ出さなくなりました。

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

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

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

Adv Save Managerは以下のような設定にしました。
2016-10-04 18_38_42-Unity Personal (64bit) - UtageWaltz.unity - Waltz - PC, Mac & Linux Standalone _.jpg

CaptureImageは、自分が作るゲームと同じ比率のサイズに変更すると良いと思います。(私の場合は16:9)
2016-10-04 18_39_18-Unity Personal (64bit) - UtageWaltz.unity - Waltz - PC, Mac & Linux Standalone _.jpg

CaptureImageのサイズを96x54に設定しました。
2016-10-04 18_39_04-Unity Personal (64bit) - UtageWaltz.unity - Waltz - PC, Mac & Linux Standalone _.jpg

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

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

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

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

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

CgGalleryのアイコンのサイズを変更します。
これも自分のゲームと同じ比率にします。
image
Inspector>Grid Layout Group>Cell Sizeを、192x108に変更します。

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

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

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

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

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

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

対処方法① オフにする

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

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

image
テストプレイ中、デバッグメニューを使用したい場合は、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をクリック
    image

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

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

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