10連休も近いですし、Unity で自分の好きなシューティングゲームでも作成しようと考えました。
これまで Unity で 簡単なアニメーション を試したり、Unity ちゃんを動かしたり して遊んできましたし、他の環境で ゲームを作成した 経験はあるので、まあなんとか作れるのではないか、と。
とはいえ Unity の UI 周りがイマイチわかっていないので、無料アセットとして公開されている公式の Unity Samples: UI の中身をみて、理解していきたいとおもいます。
うまく理解できたら、そのまま拡張して自作ゲームに組み込みたいな、などと。
初期設定
今回利用しているのは Windows 版の Unity 2018.3.12f1 (64-bit) です。新規にプロジェクトを作成し、アセットストアから Unity Samples: UI をインポートします。
多くのファイルが含まれていますが、そのまま「インポート」をクリックして全てプロジェクトに追加します。
プロジェクトに以下のようにフォルダが追加されていればインポートは完了です。
Menu 3D シーン
Scenes フォルダにある Menu 3D シーンを読み込んでみましょう。
ヒエラルキーには以下のように読み込まれます。
実行すると以下のような感じで、宇宙を背景としたゲームメニューが表示されて操作できます。
シューティングゲームにそのまま使えそうな感じで良いですね。
背景部分
背景には星(?)が流れる宇宙空間が表示されていますが、これは簡単な仕組みなので先に見ておきましょう。
ヒエラルキーに表示されている SF Scene Elements が背景なのですが、Prefab フォルダに元のデータがあるので、そちらを参照したほうがわかりやすいです。
Background という一枚絵(スプライト)の前にパーティクルを動かして星(?)の動きを表現しています。そしてそれを Main Camera で表示しています。
実際のゲームでは、これをゲーム画面と置き換えます。なおこの Prefab を流用し、タイトル文字でも上に被せれば、そのままゲームのオープニング画面にすることもできそうですね。
メニューが右から出てくる動作
さて、上記の背景の上に表示されるメニュー MainManu について見ていきましょう。シーンを開始するとメニューが右から出てきますが、これはどうやって実装されているのでしょうか？
インスペクタを確認すると、MainMenu という アニメーター(アニメーションコントローラー) が設定されているのがわかります。
このアニメーターの内容を確認すると、以下のような内容が設定されていることがわかります。
ここでわかることは
- Open と Closed という2つのアニメーションが追加されている
- Open と Closed は互いに遷移(白い矢印)する
- ゲーム開始時は Entry から遷移して Closed の状態から始まる
でしょうかね。そして追加された Closed のアニメーションがこちら
アニメーションといっても、オブジェクトの位置を指定しているだけで、時間で値を変化させているわけではありません。「長さ0のアニメーション」が「静止画」を意味するのと同じこと？かも。
同様に Open のほうのアニメーションも、オブジェクトの位置を指定しているだけのようです。
何これ？これじゃアニメーションの意味が無いじゃん？って思いますよね。でもゲーム画面ではメニューが動いているわけで、やっぱりこれもアニメーション指定の方法のひとつなんですよ。
アニメーター(アニメーションコントローラー)の MainMenu に戻って、Closed アニメーションから、Open アニメーションに向かう白矢印、つまり遷移をよく見てみます。
この 遷移 は2つのアニメーションを交換する動作であり、この遷移もまたアニメーションなのです。Closed という画面の外側にある位置を指定したアニメーションから、一定の時間をかけて、Open という画面内にある位置を指定したアニメーションへと状態を遷移していく。
その時に重なっているアニメーションを合成するので、その比率が時間で変化すれば、Close という状態から、Open という状態へだんだん変化するアニメーション的な表現となります。
つまりこの白矢印の遷移が、メニューを画面外から画面内に移動させるアニメーションを実装している実態なのでした。
ちなみに一番下にある Conditions はこの遷移の開始条件になります。つまりこの遷移、Closed から Open への遷移は、Open というパラメーターが True になると開始する、ということです。外部から遷移をコントロールするには、この Conditions の設定を利用します。
誰がメニューを開いたのか
アニメーター(アニメーションコントローラー)の MainMenu における遷移が、メニューを開くアニメーションを実施していることはわかりました。で、次の疑問は「で、誰が最初にメニューを開くの？」です。もっと言えば「誰がアニメーターの中の Closed から Open への遷移を開始させたの？」であり、更に言えば「誰が遷移の開始条件である Open パラメーターを True に設定したの？」という疑問です。
メニューの初期状態は Closed で、つまりは隠れています。通常のゲーム上では何かのボタンを押してメニューを開くわけですが、今回の Menu 3D シーンは、シーン開始時に自動的にメニューが開いています。この部分の処理を探してみましょう。
ヒエラルキーを見てみると MenuManager と、そのものズバリな感じのオブジェクトがあります。インスペクターを見ると、PanelManager というスクリプトが設定されており、例の MainMenu アニメーターが引数として指定されています。
このスクリプトを開き、シーン開始時に自動実行 される OnEnable 関数の定義を確認してみましょう。
public Animator initiallyOpen;
private int m_OpenParameterId;
public void OnEnable()
{
m_OpenParameterId = Animator.StringToHash ("Open"); // アニメーターのパラメーター名を指定
OpenPanel(initiallyOpen); // 指定されたメニューを開く
}
※ C#コードは主要でない部分、今回の処理に関係ない部分を少し削って紹介しています
OpenPanel 関数は以下のように定義されています。anim.SetBool 関数のところでさきほどの MainMenu アニメーターの Open というパラメータが True になり、これにより Closed アニメーションから Open アニメーションへの遷移が開始され、メニューが表示される(表示位置に移動する)わけです。
private GameObject m_PreviouslySelected;
public void OpenPanel (Animator anim)
{
anim.gameObject.SetActive(true);
var newPreviouslySelected = EventSystem.current.currentSelectedGameObject;
anim.transform.SetAsLastSibling(); // Transformリストで最後の順番になるよう移動
CloseCurrent();
m_PreviouslySelected = newPreviouslySelected;
anim.SetBool(m_OpenParameterId, true); // これが遷移を開始させる
GameObject go = FindFirstEnabledSelectable(anim.gameObject);
SetSelected(go); // メニューの最初の項目を選択状態にする
}
マニュアルの 画面遷移の作成 ページにほぼ同じロジックが解説されていますので、コード理解の助けにしてみてください。
PanelManager スクリプトにはこれ以外にもメニューを操作する関数が幾つも定義されています。のちほど必要であれば、また戻って眺めてみましょう。
メニュー構成
シーンを実行すると、以下のようなメインメニューが右から出現します。この出現に関してはもう仕組みがわかりました。
次は表示されたメニューそのものに対し、その仕組みを探っていきましょう。まず、ヒエラルキーを眺めてみると、表示とうまく対応したカタチでオブジェクトが階層構造に並んでいることがわかります。さすが公式サンプルです！
まあ、今回はシンプルなデザインですからね。タイトルやボタンなど各要素ごとに、背景となる画像と、文字を表示するラベルを使用しています。
例えば Window の画像のところの背景色を青から緑に変えると、
メニューの背景が問題なく緑色になります。
これは背景に使用している画像が半透明の白で作成されたものなので、指定した色とうまく組み合わさってパーツの形が表現されるわけです。こういった「白黒の半透明画像に色を組み合わせるデザイン要素」の準備の仕方は、最近よく使われるようになりました。便利ですよね。
また TitleLabel オブジェクトに設定されたテキスト "GUI Demo" を適当に変更すれば…
実行すると表示が変更されているのがわかります。
このへん、シンプルで非常に流用し易くて助かります。
なお余談ですが、このメニュー全体の枠は Window オブジェクトに指定された1つの画像で実現されています。つまり上と下にある二重部分は、そうデザインされたものです。それに対してメニューのタイトル部分ですが、こちらはシンプルな一本線の枠の画像を使用しています。タイトル枠が二重に見えるのは、この画像を2つ、位置をズラして表示しているからです。ティルト機能でメニューを傾けると、この二種類の表現の違いがわずかに影響を与えているのを感じることができるとおもいます。
各ボタンの制御
各ボタンの動作ですが、インスペクタを確認するとボタン専用スクリプトが使用されています。ボタンに関しては【uGUI】Buttonの使い方 の記事がわかりやすかったです。
ボタン専用スクリプトの遷移には幾つか指定方法があるのですが、今回は「アニメーション」が指定されています。
ここで各アクションに指定されているアニメーションと、そのトリガー(パラメーター)は、その下で指定されているアニメーター SF Button の中に含まれています。
例えば Highlighted アニメーションは以下のように選択されたボタンを少し上(z軸でマイナス方向)に持ち上げ、バックグラウンドの描画色を白に設定するようになってます。
ボタンスクリプトはボタンの見た目をコントロールする汎用的なモジュールになっていて、非常に便利ですね。
各ボタンのアクション
さきほど紹介した 【uGUI】Buttonの使い方 の記事にもありますが、ボタン専用スクリプトは選択時のアクションも定義できます。
例えば一番下の「Quit」ですが、クリック時のアクションとして以下のように定義されています。
これは順に
- Editor実行時、ランタイム実行時共に
- 呼び出し元は ApplicationManager で
- ApplicationManager.Quit 関数を呼び出す
と設定されています。実際に呼び出される関数の定義はこちら。まあ、普通の終了処理ですよね。
public void Quit ()
{
#if UNITY_EDITOR
UnityEditor.EditorApplication.isPlaying = false;
#else
Application.Quit();
#endif
}
もうひとつ、その上にある「Settings」ボタンのアクションも見てみましょう。
- Editor実行時、ランタイム実行時共に
- 呼び出し元は MenuManager で
- PanelManager.OpenPanel 関数を呼び出す
- その際の引数はアニメーターの Settings で
これによって Settings サブメニューに制御が移るわけですね。
サブメニューも原理は同じなので深くは追いませんが、Settings サブメニューにある「Back」アクションの設定は見ておきましょう。
先ほどと同じメニュー遷移で、ただ引数が元のメニューである MainMenu であることだけが異なることがわかります。PanelManager にある OpenPanel 関数が汎用的に利用できることがわかりますね。素晴らしいです。
ボタン以外のUI部品
「Settings」サブメニューの更に中にあるサブメニュー、例えば「Video」にはボタン以外の部品が使われています。
Quality の項目ではスライダーが使用されていますし、Anti-Aliasing にはチェックボックスが使用されていますね。これらについても見ておきましょう。
ヒエラルキー上の表示はこちら。
構成を眺めていて驚いたのが、これらスライダーとチェックボックスの実現に、画像を2枚しか使っていないこと！チェックボックスで使用している Checkmark 画像を除くと、以下の3つのオブジェクトは同じ画像を使用しています。
- スライダーの背景部分となる Handle Slide Area オブジェクト
- スライダーのツマミ部分となる Handle オブジェクト
- チェックボックスの外箱である Background オブジェクト
これらで共通で使われている画像が、単なる白い、角を丸めた正方形の SF Generic_0 だったりします。
この正方形のサイズを変更して、上記の3つのパーツの一部を作成しているわけです。なんと器用な！
そして実際の動作ですが、スライダーには専用のスクリプトがあり、以下のように使用されています。実際にゲームに組み込む場合には、値の変化時のアクションを設定する必要がありそうですね。
またチェックボックス(トグル)にも専用のスクリプトがあり、以下のように使用されています。こちらも実際に組み込む場合には、値の変化時のアクションを設定する必要がありそうです。
なお今回使用しているこれらのUI部品はアセットの Prefab にまとめられています。これらを利用するだけでokです。
ただ、用意されていない部品は自作する必要があります。これについては別途チャレンジしたいな、と考えていまして、もし何かまとめられたら投稿しますね。
UI部品間の移動
各UI部品の動作の仕組みはだいたい理解できたと思います。では、メニュー内で、ボタンやスライダーなど各UI部品の間を移動する仕組みはどこで実装されているのでしょうか？
uGUI を利用しようとすると自動的に作成される EventSystem に、そのための実装がありました。Standalone Input Module です。
このモジュールがキーボード、マウス、コントローラーなどの入力を受け、UI部品間の移動や、送信/キャンセルなどのアクションをサポートしてくれているようです。
なおその上にある Event System マネージャー が、イベント開始時の最初の選択位置(今回はMainMenuの「Conrinue」)を指定してくれているようですね。
※ 開始直後に OpenPanel 関数が呼ばれて最初の項目が選択状態になるので、上記 Event System マネージャーの設定は必須ではない気もしています
傾くWindow
コントローラー等で操作していると気がつきませんが、マウスで操作するとメニューの Window がマウスの位置によって少し傾くのがわかります。
この部分の実装を確認してみましょう。メニュー中の Window オブジェクトのインスペクタを見ると、TiltWindow スクリプトが指定されているのがわかります。
以下がそのコードです。わりと汎用的に使えそうなので、省略なしでコピペしてみました。
using UnityEngine;
public class TiltWindow : MonoBehaviour
{
public Vector2 range = new Vector2(5f, 3f);
Transform mTrans;
Quaternion mStart;
Vector2 mRot = Vector2.zero;
void Start ()
{
mTrans = transform;
mStart = mTrans.localRotation; // 傾きの初期値
}
void Update ()
{
Vector3 pos = Input.mousePosition; // マウスの位置
float halfWidth = Screen.width * 0.5f;
float halfHeight = Screen.height * 0.5f;
float x = Mathf.Clamp((pos.x - halfWidth) / halfWidth, -1f, 1f); // 画面中のマウスのx位置
float y = Mathf.Clamp((pos.y - halfHeight) / halfHeight, -1f, 1f); // 画面中のマウスのy位置
mRot = Vector2.Lerp(mRot, new Vector2(x, y), Time.deltaTime * 5f); // 実際の傾きを線形補間
mTrans.localRotation = mStart * Quaternion.Euler(-mRot.y * range.y, mRot.x * range.x, 0f); // 3次元的に実際に回転させる
}
}
スクリプトに範囲指定の欄があるので、値を10倍にしてみます。
すると実行画面で Window の傾きがかなり派手に変化したのが確認できました。
参考リンク
uGUI を学ぶ上で参考になった初心者向け資料をご紹介しますね。
まとめ
今回は公式アセットの Unity Samples: UI を対象に、含まれている Menu 3D シーンを中心に中身を眺めてみました。
シンプルかつ汎用性のある作りで、これをベースに拡張して自分のゲームのメニューを作成するのは容易だとおもわれます。私も自分のゲームに組み込んでみたいと思いますので、その際の経験なども別途まとめられたらいいな、と考えています。
それではまた！