【Unity入門】UnityのUIを作ってみよう

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

<UGUI>

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

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

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

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

<Canvas>

とりあえずやってみましょうか。まずはCanvasというものを作ります。Canvasのリンクで詳しい内容を解説していますが、難しかったら無理にみる必要はないです。

create canvas

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

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

そして、Canvasがないとこれらのパーツが表示されないので、CanvasというのはこれらUIを表示するためのコンポーネントだと思ってください。

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

canvas line

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

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

↑の四角は現実世界のキャンバスみたいに白く固定された物ではなく、ぐにょんぐにょんに動くので枠内に収めたと思ったらはみ出したりしますので。

canvas move

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

この四角はCanvasという名前がついていますが、固定されているわけではなく、ゲームビューと連動しています。要は、ゲームの解像度によって大きさが変わるわけです。

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

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

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

Point

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

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

<Image>

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

create image

Canvasの上で右クリックして、UI>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という項目があると思います。

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

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・・・ボタンの機能を持ったコンポーネント

<わからない事があったら>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば、また別の勉強方法があるので違った切り口を使ってみるのもいいと思います。

<オススメの本>

本で詳しい解説がされているので書籍を買ってみるというのも手の一つです。最近はKindle版があるので届くまで待つ事もなく場所も取らないのでとても良いです。

<オンラインスクール>

オンラインスクールでは人に質問する事ができるので、行き詰まってしまった方にオススメです。 無料体験もあるので試しに見てみるのも手ですよ




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




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