今回はUnityでUIを作成してみましょう。↑の動画でも解説していますので、是非ご活用ください。
この記事は本のように順を追って解説しています。この記事は途中のページになります。
この記事を見ていて、現在の状況がわからない場合や忘れてしまった事などが出てきたら↓のリンクから目次ページへ飛べますので立ち戻って見てください。
＜UI・GUIとは＞
UIというのはUser Interfaceの略でユーザーとデバイスとの接点を差すものです。画面に表示されるデザイン、フォントなど、背景など、ユーザーの視覚に触れる全ての情報が「UI」と呼ばれるらしいです。
が、ゲームで「UI」と言うと「視覚に触れる全ての情報」というよりかは、ゲーム内の情報や操作できる機能を２次元的に表現したものを差すことが多いです。
ボタンとかスコア表示とかそういうやつですね。
また、これらは画面上にグラフィックで表すことからGUI（Graphical User Interface)とも言われます。
本来２つは違う意味ですが、ゲームにおいてはUIもGUIもほとんど一緒のものであることが多いです
＜UGUIを使ってみよう＞
UnityではUIを作成するためにUGUIという機能を使用します。
調べても出てきませんでしたが多分Unity Graphical User Interfaceの略だと思います。
この機能を使用する事で、誰でも簡単にUIを実装できるようになりました。全くUnity様様です。
それではこのUGUIを使ってUnityの基本的なUIの作り方を覚えてみましょう。
＜Canvasを作ってみよう＞
さて、それではUGUIを使ってUIを作成していきましょう。
言葉で言うよりやった方がわかりやすいと思うので、まずはやってみましょうか。
まずはCanvasというものを作ります。
CanvasというのはUGUIを表示できるようにするための機能です。
CanvasがないとUGUIが見えない状態になってしまいます。なので、まずCanvasを作成して、UGUIが見える環境を作ろうということです。
それではヒエラルキーウィンドウで右クリック＞UI＞Canvasで作ります。
↑のUIの一覧の中に色々ありますが、ここにたくさん表示されているのがUIのパーツになります。これらのパーツを作ってUIを作成していきます。Canvasはこれらを表示するためのものになります。
Canavasを作成できたらシーンビュー上に
↑のような白い四角が出てきたと思いますが、これにとらわれないようにしてください。
「キャンバス」と「UI」というからにはこの白い四角の中に絵を描く感じみたいにボタンとかテキストとか絵とかを入れていくのかなーと思いがちですが、そう思って作り始めると痛い目を見るので一回↑の四角は無視しましょう。
ちょっとこちらを見てください。
白い四角がぐにょんぐにょんに動いているのがわかるでしょうか？
このCanvasというのは現実世界のキャンバスみたいに白く固定された物ではなく、ゲームビューと連動しています。
要は、ゲームの解像度によって大きさが変わるわけです。
ゲームの解像度って固定なんじゃないの？って話なんですが、例えばPCゲーだったらユーザーがウィンドウをどういった大きさにしているのかわかりませんし、iOS/Andoridだったら16:9の画面かもしれませんし、2:1の画面かもしれません。タブレットの可能性もあります。
ゲームのプラットフォームやプレイヤーが使っているデバイスの機種によって解像度は変わります。白い四角は人それぞれの大きさがあるのです。
ということは、四角の中ぴったりにUIを作っていくと、自分の画面では綺麗に表示されているけど、他の人の画面では、はみ出していたり見切れていたりするかもしれません。
・CanvasはUIを表示する為のコンポーネントだよ！
・解像度とUIの設置場所には気をつけてね！
まぁ、難しいことを最初から頭に入れる必要はありませんが、絵を描くキャンバスとはちょっと違うよっていうのは頭に入れておいてください。
今はちょっと難しくて考えられないかもしれませんが、一応Canvasについての詳細と、解像度に関する記事を紹介しておきます。詳しく知りたい方のみご覧ください。
とりあえず、Canvasを作成した事によって様々なUIを表示させる事ができるようになりました。
＜Imageで絵を表示してみよう＞
さて、UIを設置する為のCanvasを作れたので、今度はUIの中身を作っていきましょう。
まずは絵を表示させてみたいと思います。
Canvasの上で右クリックして、UI＞Imageをクリックしてください。
これでImageというオブジェクトが作成され、Canvasの子オブジェクトになったかと思います。
なんか白いものが画面上に出てきました。これはImageがCanvasの子オブジェクトになっている為表示されています。
もし、子オブジェクトになってない場合はドラッグ＆ドロップで子オブジェクトにしてあげれば映るようになります。UGUIはCanvasの子オブジェクトになっていないと表示されないので注意してください。
親子関係について忘れた、わからないという方は↓の記事を参考にしてみてください。
そしたら今度は、ペイントでも何でもいいので適当に絵を描いてみてください。
↑自分はこんな感じに描いてみました。そのファイルをjpgでもpngでもいいので保存してください。
保存できたら、そのファイルをUnityのProjectウィンドウにドラッグ&ドロップします。
するとプロジェクトの中に描いた絵が追加されたと思います。
プロジェクトウィンドウで追加した絵を選択した状態でインスペクターをみて下さい。
すると追加した絵のパラメータがたくさん出てくるのですが、このTextureTypeというのをSprite(2D and UI)というやつに変更して下さい。できたら
右下にあるApplyというボタンをクリックして下さい。基本的にパラメータを変更した場合、右下のApplyを押すまでは反映されません。Applyを押さずに違うやつを操作しようとすると
↑のようにパラメータの変更をApply（適用するのか）、Revert（破棄するのか）を強制的に選択させられます。これが出ちゃった人は今回はApplyを選択して下さい。
このSpriteとは何ぞやという話なんですが、デフォルトの状態ではただのテクスチャだったわけですが、Spriteにすることによって2Dグラフィックスオブジェクトになります。
何のこっちゃかわからないと思うので、とりあえずSpriteにした事によって性質が変わったと思ってもらったらいいかなと思います。Spriteにすると色々な機能が使えるようになるのですが、一度にたくさん言っても覚えきれないと思うので、今はなんか性質が変わった程度の認識で大丈夫です。
もし、詳しく知りたい場合は↓の記事で解説していますので、参考にしてみてください。
今度はヒエラルキーウィンドウでImageを選択した状態でインスペクターをみて下さい。
ゲームオブジェクトImageの中にコンポーネントのImageが存在すると思います。（ややこしい）ここの、Source Imageの所の右側の◉みたいなボタンを押して下さい。
すると何やら、色々出てきますが、さっき描いた絵があると思うのでそれをダブルクリックして下さい。
と、このように、先程のImageに自分の描いた絵が反映されてゲーム画面で見れるようになりました。
ちょっとここで、Imageのインスペクターを見てみて下さい。
いつもはTransformだったのにRectTransformというまた別のものになっています。
これはちょっと難しいので詳しくはまた今度解説しようと思いますが、PosX,PosY,PosZの下にWidthとHeightという項目があると思います。
これをいじる事によって絵の大きさを変えることができます。
PosX,PosY,PosZで位置を変更することもできます。
ちなみに、画像が画面に表示されているのはCanvas Rendererというコンポーネントがついているおかげです。これはCanvasの子オブジェクトの時にしか働かないのでCanvasの子オブジェクトから外してしまうと何も映らなくなってしまいます。
他にもなんかたくさんパラメータがありますが、詳しい解説は↓の記事で行なっています。詳しく知りたい方は参考にしてみてください。
・UIはキャンバスの子オブジェクトにすると映るようになるよ！
・Imageは絵を表示させるUIだよ！
・Imageで絵を表示させたい場合はテクスチャをスプライトにしなきゃいけないよ！
＜Textで文字を表示させてみよう＞
次はテキストの表示について解説していきます。
Cavasの上で右クリック＞UI＞Textをクリック
するとシーンビューにこんなやつがあらわれます。(見つけられない人はヒエラルキーのTextをダブルクリックしてみて下さい）
ヒエラルキーでTextを選択した状態でインスペクターを見ると
Textというコンポーネントがくっついていることがわかります。この中のTextと書いてある所をいじってみましょうか
ゲームオブジェクトTextの中のコンポーネントTextの中の変数名Text。ややこしい
適当にあああと打ってみたらシーンビューに反映されました。日本語を打つ際はエンターを押して確定しないと表示されないので注意して下さい。
このTextという機能はちょっと注意点があります。それについては↓の記事でまとめてみましたので興味のある方は見てみてください。インスペクター上のパラメータについても解説しています。
これで画面上に文字を表示させる事ができました。
＜Buttonでボタンを作ってみよう＞
次はボタンを作成してみましょう。
Cavasの上で右クリック＞UI＞Buttonをクリック
すると↑のようなボタンができると思います。
ボタンというのは実はボタン単体というわけではなく、ボタンの子オブジェクトにテキストがついてきます。「Text」がついてきているため、ボタンの上にButtonと表示されているわけです。
また、インスペクターを見ても、Imageが一緒にくっついてきているのが見て取れます。
このButtonというのは見た目上はTextとImageが作っているわけです。
ではこのButtonというのは何なのかというと「ボタンという機能」をつけるという意味になります。
では少しボタンらしくしてみましょう。
↑のようなスクリプトを書いて、適当なゲームオブジェクトにアタッチしてください。何でもOKです。
メソッドにpublicとついていると思いますが、これは「公開する」という意味でしたね。このpublicをつける事によって、このメソッドはこのスクリプトの外から呼べるようになりました。
そして、ButtonのインスペクターのOnClickとなっているところの＋ボタンをクリックしてみてください。
そうすると↑のようになったと思います。
今度はこのNone(Object)となっているところに先ほどスクリプトをアタッチしたゲームオブジェクトをヒエラルキーからドラッグ＆ドロップし、No Functionとなっているところを先ほど作ったスクリプト名＞TestClickを選択してください。
この状態で再生ボタンを押し、ボタンをクリックしてみてください。
ボタンが押されて、メソッドが呼び出されているのが見れるようになりました
Buttonはこのように、押されたらプログラムのメソッドを呼び出すという形になっています。
ボタンを押したら○○をするとかいった動作はこのメソッドの中にそういう命令を書く事になります。
何となくボタンの使い方はわかっていただけたでしょうか？ボタンについての詳しい説明は↓の記事にて行っていますが、今は全部理解する必要はないので興味のある方は見てみてください。おそらくわからない部分が多々あると思いますが、わからなくても大丈夫です。
＜まとめ＞
・UnityのUIを作るシステムはUGUIと言うよ！
・UGUIはCanvasの子オブジェクトじゃないと表示されないよ！
・Canvasの白枠に合わせてUIを置いちゃまずいよ！
・Canvas・・・UGUIを表示するのに必要。表示領域を作る
・Image・・・絵を表示させるためのコンポーネント
・Text・・・テキストを表示させるためのコンポーネント
・Button・・・ボタンの機能を持ったコンポーネント
さて、UIの基本的な作り方がなんとなくわかってきたでしょうか。UGUIの種類や使い方はまだまだあるのですが、今回はこの辺りで置いておこうと思います。次回はオブジェクトを複製する際の便利な機能について解説していこうと思います。
