UnityのUIを作ってみよう【UGUIの使い方基礎】

この記事は本のように順を追って解説しています。この記事は途中のページになります。
この記事を見ていて、現在の状況がわからない場合や忘れてしまった事などが出てきたら↓のリンクから目次ページへ飛べますので立ち戻って見てください。

<UGUIを使ってみよう>

さて、今回はUIを制作していきたいと思います。

UIというのはUserInterfaceの略でユーザーとデバイスとの接点を差すらしいです。

ボタンとかスコア表示とかそういうやつです。

UnityではUIを作成するためにUGUIという機能を使用するのですが、割とその定義から外れて2次元的な表現全般に使えたりします。

2次元の表現(絵の表示や文字、ボタンなどなど)に便利な機能と思ってもらえればいいかなと思います。

これを使ってUnityの基本的なUIの作り方を覚えてみましょう。

<Canvasを作ってみよう>

言葉で言うよりやった方がわかりやすいと思うので、とりあえずUGUIを使ってみましょうか。

まずはCanvasというものを作ります。

Canvasのリンク先で詳しい内容を解説していますが、今は難しいと思うのでスルーしてもOKです。

CanvasというのはUGUIを表示できるようにするための機能です。これがないとUGUIが見えない状態になってしまいます。

まずはヒエラルキーウィンドウで右クリック>UI>Canvasで作ります。

create canvas

↑のUIの一覧の中に色々ありますが、ここにたくさん表示されているのがUIのパーツになります。これらのパーツを作ってUIを作成していきます。Canvasはこれらを表示するためのものになります。

Canavasを作成できたらシーンビュー上に

canvas line

↑のような白い四角が出てきたと思いますが、ぶっちゃけ無視していただいて構いません。

「キャンバス」と「UI」というからにはこの白い四角の中に絵を描く感じみたいにボタンとかテキストとか絵とかを入れていくのかなーと思いがちですが、そう思って作り始めると痛い目を見るので一回↑の四角は無視しましょう。

↑の四角は現実世界のキャンバスみたいに白く固定された物ではなく、ぐにょんぐにょんに動きます。

枠内にUIを収めたと思ったらはみ出したりします。

canvas move

↑のように白い四角が可変しているのが見て取れます。

この四角はCanvasという名前がついていますが、固定されているわけではなく、ゲームビューと連動しています。

要は、ゲームの解像度によって大きさが変わるわけです。

ゲームの解像度って固定なんじゃないの?って話なんですが、例えばブラウザゲーだったらユーザーがブラウザをどういった大きさにしているのかわかりませんし、iOS/Andoridだったら16:9の画面かもしれませんし、2:1の画面かもしれません。タブレットの可能性もあります。

四角の中ぴったりに絵を描いていって、自分の画面では正しく動いているけど、違う人の画面では、はみ出してましたというのはよくある話です。

まぁ、難しいことを最初から頭に入れる必要はありませんが、絵を描くキャンバスとはちょっと違うよっていうのは頭に入れておいてください。

Point

CanvasはUIを表示する為のコンポーネントだよ!
・解像度とUIの設置場所には気をつけてね!

UIの設置方法については解像度の解説をする時に解説します。

とりあえず、Canvasを作成した事によって様々なUIを表示させる事ができるようになりました。

<Imageで絵を表示してみよう>

さて、UIを設置する為のCanvasを作れたので、中身を作っていきましょう。

まずは絵を表示させてみたいと思います。

Canvasの上で右クリックして、UI>Imageをクリックしてください。

create image

これでImageがCanvasの子オブジェクトになったかと思います。

scene image

なんか白いものが画面上に出てきました。これはImageがCanvasの子オブジェクトになっている為表示されています。

そしたら今度は、ペイントでも何でもいいので適当に絵を描いてみてください。

paint

↑自分はこんな感じに描いてみました。そのファイルをjpgでもpngでもいいので保存してください。保存できたら、そのファイルをUnityのProjectフォルダにドラッグ&ドロップします。

drag and drop

するとプロジェクトの中に描いた絵が追加されたと思います。

プロジェクトウィンドウで追加した絵を選択した状態でインスペクターをみて下さい。

sprite

すると追加した絵のパラメータがたくさん出てくるのですが、このTextureTypeというのをSprite(2D and UI)というやつに変更して下さい。できたら

click apply

右下にあるApplyというボタンをクリックして下さい。基本的にパラメータを変更した場合、右下のApplyを押すまでは反映されません。Applyを押さずに違うやつを操作しようとすると

select apply

↑のようにパラメータの変更をApply(適用するのか)、Revert(破棄するのか)を強制的に選択させられます。これが出ちゃった人は今回はApplyを選択して下さい。

このSpriteとは何ぞやという話なんですが、デフォルトの状態ではただのテクスチャだったわけですが、Spriteにすることによって2Dグラフィックスオブジェクトになります。

何のこっちゃかわからないと思うので、とりあえずSpriteにした事によって性質が変わったと思ってもらったらいいかなと思います。Spriteにすると色々な機能が使えるようになるのですが、一度にたくさん言っても覚えきれないと思うので、今はなんか性質が変わった程度の認識で大丈夫です。

今度はヒエラルキーウィンドウでImageを選択した状態でインスペクターをみて下さい。

click image

ゲームオブジェクトImageの中にコンポーネントのImageが存在すると思います。(ややこしい)ここの、Source Imageの所の右側の◉みたいなボタンを押して下さい。

select image

すると何やら、色々出てきますが、さっき描いた絵があると思うのでそれをダブルクリックして下さい。

image

と、このように、先程のImageに自分の描いた絵が反映されてゲーム画面で見れるようになりました。

ちょっとここで、Imageのインスペクターを見てみて下さい。

いつもはTransformだったのにRectTransformというまた別のものになっています。

これはちょっと難しいので詳しくはまた今度解説しようと思いますが、PosX,PosY,PosZの下にWidthとHeightという項目があると思います。

これをいじる事によって絵の大きさを変えることができます。

PosX,PosY,PosZで位置を変更することもできます。

width height

ちなみに、画像が画面に表示されているのはCanvas Rendererというコンポーネントがついているおかげです。これはCanvasの子オブジェクトの時にしか働かないのでCanvasの子オブジェクトから外してしまうと何も映らなくなってしまいます。

他にもなんかたくさんパラメータがありますが、だんだん慣れていくうちに使えるようになればいいと思うので今回はおいときます。

Point

・UIはキャンバスの子オブジェクトにすると映るようになるよ!
・Imageは絵を表示させるUIだよ!
・Imageで絵を表示させたい場合はテクスチャをスプライトにしなきゃいけないよ!

<Textで文字を表示させてみよう>

次はテキストの表示について解説していきます。

create text

Cavasの上で右クリック>UI>Textをクリック

scene view text

するとシーンビューにこんなやつがあらわれます。(見つけられない人はヒエラルキーのTextをダブルクリックしてみて下さい)

ヒエラルキーでTextを選択した状態でインスペクターを見ると

text inspector

Textというコンポーネントがくっついていることがわかります。この中のTextと書いてある所をいじってみましょうか

ゲームオブジェクトTextの中のコンポーネントTextの中の変数名Text。ややこしい

text component

適当にあああと打ってみたらシーンビューに反映されました。日本語を打つ際はエンターを押して確定しないと表示されないので注意して下さい。

このTextという機能はちょっと注意点があります。それについては↓の記事でまとめてみましたので興味のある方は見てみてください。インスペクター上のパラメータについても解説しています。

これで画面上に文字を表示させる事ができました。




<Buttonでボタンを作ってみよう>

次はボタンを作成してみましょう。

create button

Cavasの上で右クリック>UI>Buttonをクリック

button scene view

すると↑のようなボタンができると思います。

button hierarchy

ボタンというのは実はボタン単体というわけではなく、ボタンの子オブジェクトにテキストがついてきます。「Text」がついてきているため、ボタンの上にButtonと表示されているわけです。

button component

また、インスペクターを見ても、Imageが一緒にくっついてきているのが見て取れます。

このButtonというのは見た目上はTextとImageが作っているわけです。

ではこのButtonというのは何なのかというと「ボタンという機能」をつけるという意味になります。

では少しボタンらしくしてみましょう。

button click method

↑のようなスクリプトを書いて、適当なゲームオブジェクトにアタッチしてください。何でもOKです。

メソッドにpublicとついていると思いますが、これは「公開する」という意味でしたね。このpublicをつける事によって、このメソッドはこのスクリプトの外から呼べるようになりました。

そして、ButtonのインスペクターのOnClickとなっているところの+ボタンをクリックしてみてください。

click inspector

そうすると↑のようになったと思います。

今度はこのNone(Object)となっているところに先ほどスクリプトをアタッチしたゲームオブジェクトをヒエラルキーからドラッグ&ドロップし、No Functionとなっているところを先ほど作ったスクリプト名>TestClickを選択してください。

setting unity event

この状態で再生ボタンを押し、ボタンをクリックしてみてください。

click button game

ボタンが押されて、メソッドが呼び出されているのが見れるようになりました

Buttonはこのように、押されたらプログラムのメソッドを呼び出すという形になっています。

ボタンを押したら○○をするとかいった動作はこのメソッドの中にそういう命令を書く事になります。

何となくボタンの使い方はわかっていただけたでしょうか?ボタンについての詳しい説明は↓の記事にて行っていますが、今は全部理解する必要はないので興味のある方は見てみてください。おそらくわからない部分が多々あると思いますが、わからなくても大丈夫です。

<まとめ>

Point

・UnityのUIを作るシステムはUGUIと言うよ!
・UGUIはCanvasの子オブジェクトじゃないと表示されないよ!
Canvasの白枠に合わせてUIを置いちゃまずいよ!

覚えておきたい

Canvas・・・UGUIを表示するのに必要。表示領域を作る
・Image・・・絵を表示させるためのコンポーネント
・Text・・・テキストを表示させるためのコンポーネント
・Button・・・ボタンの機能を持ったコンポーネント

<わからない事、質問等があれば>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば

自分の Youtubeの動画にコメントで質問していただければ動画でお答えしようと思います。

文章同士のやり取りだと伝わりづらいし、ラリーに時間がかかりそうなので動画で回答します。

↓の動画が回答の一例になります。どの動画でもいいのでご遠慮なくコメントしてください

できたらチャンネル登録よろしくお願いします!




さて、UIの基本的な作り方がなんとなくわかってきたでしょうか。UGUIの種類や使い方はまだまだあるのですが、今回はこの辺りで置いておこうと思います。次回はオブジェクトを複製する際の便利な機能について解説していこうと思います。




タイトルとURLをコピーしました