UnityのGUIの基本的な作り方――uGUIのPanel、Button、Text、Imageの使い方：ゲーム開発初心者のためのUnity入門（15）（2/5 ページ）

[薬師寺国安，PROJECT KySS]

uGUIのPanelにImageを敷き詰める

　まずはPanelを配置し、その中に画像をタイルのように敷き詰めてみよう。

GUIの基となるCanvasの子要素としてPanelを配置

　図5の状態のままで、Hierarchyの「Create」→「UI」→「Panel」と選択する。図6を見ると分かるが、GUIの基となるCanvas内にPanelが子要素として配置されている。

図6　Canvasの子要素としてPanelが配置された

　このCanvasはとてつもなく大きく、ゲーム画面のサイズと同じになる。このCanvas内に配置されたPanelは、マウスのトラックボールなどを使って画面を縮小することで、全体像を見ることができる（図7）。ただし、その場合ユニティちゃんを配置していた「Plane」は極小になり、画面からは見えなくなるが、実行すると表示されるので問題はない。

図7　画面を縮小してCanvas内のPanelを表示した

画像をSpriteに変換

図8　取り込んだ盆栽の画像

　Unityメニューの「Assets」→「Import New Asset」からローカルフォルダにある適当な画像ファイルを選択する。筆者は図8のような画像を取り込んだ。

　図8の画像を選択し、Inspectorの「Texture Type」に「Sprite（2D and UI）」を選択する（図9）。取り込んだ画像を「Panel」などに利用するには、必ず「Sprite」に変換をしておく必要がある。「Apply」ボタンをクリックしておこう。

図9　取り込んだ画像の「Texture Type」に「Sprite（2D and UI）」を指定する

uGUIのImageを使う

　次に、Hierarchyから「Panel」を選択し、表示されるInspectorの「Image（Script）」の「Source Image」に、図11で「Sprite」に変換した、盆栽の画像をドラッグ＆ドロップする。すると、Panel全体に盆栽の画像が表示される（図12）。

図10　「Panel」の「Source Image」に盆栽の画像をドラッグ＆ドロップして、Panel全体に画像が表示された

　次に、図11から「Image Type」に「Tiled」を選択する。すると、Panel内に盆栽の画像がタイル状に表示される（図11）。

図11　「Image Type」に「Tiled」を選択して、Panelに画像がタイル状に表示された

実行結果

　これで実行すると、動画1のようになる。

動画1　盆栽の中を駆け回るユニティちゃん

　前面に盆栽の画像がタイル状に並んだPanelが表示され、Panelの背後でユニティちゃんが動き回る。

　しかしPanelは本来、このように使うものではない。Panel上にButtonなどを配置してアクションコマンドを作り、ボタンクリックなどでユニティちゃんのアクションを変化させるなどが有効な使い方の1つだろう。ここからは、その方法を解説する。

Rect ToolでPanelの幅を縮める

図12　「トランスフォームツール」の「Rect Tool」

　Hierarchyから「Panel」を選択し、図12の「トランスフォームツール」の赤い四角で囲った、「Rect Tool」で、Panelを動画2のように操作して幅を狭める。

動画2　Rect Toolの使い方

　すると、図13のような表示になる。

図13　Panelの幅を狭めた

　Scene画面では向かって左にPanelを狭めているように見えるが、実行すると、盆栽画像が敷き詰められたPanelは右手に表示される。これは、開発画面ではCanvas内の「UIオブジェクト」は全て左右逆転して表示されるからだ。

　後ほどButtonを配置すると分かるが、Buttonの文字も左右逆転して表示される。しかし、実行すると正常に表示されるので大丈夫だ。