こんにちは、ひっしーです。
ゲームには欠かせないものがあります。
UI(ユーザーインターフェース)です。
今回は、このUIをUnityで再現していきましょう。
今回の目次です。
- UI(ユーザーインターフェース)とは、
- UIテキストを作成する
- Canvasについて
- UIボタンを作成する
- UIボタンでプログラムを実行する
- まとめ
UI(ユーザーインターフェース)とは、
まずはUIについて軽く説明します。
UIというのは、ゲームで言うところのHPバーやメニュー画面、スマホゲームだと画面上に表示される十字キーなんかもUIです。
ユーザー(私たちが使う)インターフェース(入力部分)という意味でゲーム世界の外側に配置されるものです。
私たちにしか見えないものなのでシーンビューでの表示も異なってきます。
では、実際にUIを作成してみましょう。
UIテキストを作成する
ヒエラルキービューの+ボタンから[UI]>[Text]を作成してください。
ヒエラルキービューに作成されたTextをダブルクリックしてシーンビューに表示してみましょう。
すると、シーンビューでピックアップされ「New Text」という表示を確認できます。
ゲームビューにも下のほうに小さく表示されています。
次にテキストの編集についてです。
表示させる文字を編集するには、おなじみのインスペクタービューから変更が可能です。
TextのインスペクタービューにTextというパラメーターがありますので、中身を編集してみましょう。
「反撃のおうち」と入力してください。
すると、シーンビューとゲームビューに表示されている文字が変わりました。
このように、Textの中身を編集することで表示させる文字を変えることが出来ます。
UIテキストを使用することでゲーム内に文字を表示させることが可能になりました。
Canvasについて
先ほど、Textを作成した際に、Textの親にCanvasというものが作成されていることに気づきましたでしょうか。
このCanvasはUIを表示させるために欠かせないものです。
CanvasをUnityの説明で確認してみましょう。
Canvas コンポーネントは UI が配置、描画される抽象的な領域です。すべての UI 要素は Canvas コンポーネントがアタッチされたゲームオブジェクトの子でなければなりません。メニュー( GameObject > Create UI )から UI 要素オブジェクトを作るとき、シーンに一つも Canvas オブジェクトがなければ自動的に作成されます。
https://docs.unity3d.com/ja/2018.4/Manual/class-Canvas.html
UIが表示される抽象的な領域という少しイメージしづらい説明に思えるかもしれません。
私なりにわかりやすく説明すると、Canvasはカメラに張り付いたフィルムのようなものです。
例えば、透明なフィルムに文字を書いてレンズに張り付けたとします。
すると撮影物の手前に文字が表示されますね。
たとえ撮影するものを変えたとしても文字だけはいつも表示されています。
ゲームのUIもプレイヤーがゲーム内をどれだけ動いたとしても表示は変わらないですよね。
つまりゲームの外側を描画するための領域ということになるのです。
このCanvasの特性を理解するためにゲームオブジェクトを今まで通りに作成してみましょう。
ヒエラルキービューでCubeを作成してPositionをX:0,Y:0,Z:0に設定しましょう。
ここまで設定が完了してどうでしょう、Cubeがとても小さく表示されていないでしょうか。
シーンビューに表示されているテキストがとても大きくみえます。
しかしゲームビューに注目してください。
すると、テキストの大きさはCubeと同じぐらいに見えます。
このようにCanvasに表示されているものはゲームオブジェクトとは別の大きさ単位で管理されるので編集する際は注意が必要です。
UIボタンを作成する
UIにはボタンを表示することもできます。
しかも、このボタンは配置するだけでゲーム上でクリックできるようになる便利機能です。
ボタンを配置して押したときにプログラムを実行できるようにしてみましょう。
まずは、ボタンを作ります。
ヒエラルキービューの+ボタンから[UI]>[Button]で作成しましょう。
作成すると「Button」と書かれたボタンのUIがシーンビューに表示されました。
ButtonのUIにTextがくっついていることがわかりますでしょうか。
ボタン枠に表示されている「Button」の文字はこのテキストに書かれている文字が表示されているだけなんですね。
では、ボタンにプログラムを関連付ける前にボタンの動きを確認してみましょう。
Unityの再生ボタンでゲームを再生して、ゲームビューのボタンをクリックしてみてください。
すると、クリックしたときに暗転することがわかります。
クリックの入力を受けてボタンが反応している証拠です。
では簡単にボタンをクリックしたときにプログラムを実行する実装を行ってみましょう。
UIボタンでプログラムを実行する
まずは、スクリプトを作成します。
C#スクリプトの作成はこちらの記事で紹介しているのでご確認ください。
新人エンジニアがゲーム開発エンジンUnityを使ってみた5【C#スクリプトで動かす】
作成したスクリプトの名前は「TestButton」としてください。
スクリプトを開き、プログラムコードの以下の箇所を削除してください。
そうしましたら以下のコードをスクリプトにコピペします。
//↓ボタンが押された時の処理
public void PushButton()
{
Debug.Log("ボタンが押されました！");//consoleに「ボタンが押されました！」と表示する
}
スクリプトを作り終えたらこのスクリプトを入れておく箱を用意する必要があります。
少しややこしいですが、ボタンで動作させようとしたときには、直接スクリプトを張り付けるのではなくスクリプトが追加されたオブジェクトを指定する必要があるのです。
ここは、重要なので覚えておいてください。
では、空のオブジェクトを作りましょう。
今まではCubeやSphereなど実体のあるオブジェクトを作っていましたが、実態が無いオブジェクトも作れます。
今回のようにスクリプトだけの箱にしたいときなどに便利です。
ヒエラルキービューの+ボタンから[Create Empty]で作成してください
作成されたGameObjectにスクリプトをドラッグ＆ドロップして追加してください。
ここまで出来たらボタンの操作に移ります。
Buttonを選択してインスペクタービューのButtonパラメーターにあるOn Clickの+ボタンを押してください。
すると画像のような表示になるので、Noneとなっているところに先ほど作成したGameObjectをドラッグ＆ドロップして追加してください
そうしたら、No Functionとなっている部分を開いて実行したいプログラムを選択します。
[TestButton]>[PushButton()]と選択してください。
これでボタンにプログラムの実行をさせる準備が整いました。
では実際に動きを見てみましょう。
今回のプログラミングは実行するとコンソールに文字を表示するものなのでエディタ画面にコンソールを表示しておきましょう。
コンソールの表示はメニューバーの[Window]>[General]>[Console]で行えます。
Unityの再生ボタンをクリックしてゲームビューからボタンをクリックしてみてください。
ボタンをクリックするたびにコンソールに「ボタンが押されました！」と表示されました。
このように、UIのボタンを使用するとプログラムを簡単に実行することが出来るのです。
このボタンを利用すれば、スマホゲーム画面に表示されているコントローラーのように扱うこともできそうですね。
まとめ
いかがでしたでしょうか。
UIは少し今までの考え方と異なる部分があるので難しく感じる部分もあったかと思いますが、是非みなさんも頑張って触ってみてください。
今回の重要ポイントはこちらです。
・UIはゲーム世界の外側の動き、操作する人用の表示
・UnityのUI表示はCanvasが無いと表示できない
・Canvasの表示は普通のオブジェクトとシーンビューでの見え方が違う
・ボタンUIはボタンが押されたときにプログラムを実行できる
今回の解説はやや駆け足気味でしたが、ここまで読んでいただいている方は確実にUnityレベルが上がっていると思いますのでついてきてくれていると信じています。
これからもUnity に触れ自分の思い思いの創作が出来るよう学んでいきましょう。
（Written by ひっしー）
