UIタブで画面に文字やボタンを出す

Roblox Studio講座（全17回）の第14回です。第1回から読む

前回はアバタータブを見ました。今回はUIタブです。前回と違い、こちらはアスレチック（オビー）づくりで実際に使う場所です。

今日はここを解説します

左から3番目のタブです。

UIって何？

UI とは、画面に貼りついて表示されるもののことです。

第1回から見てきたパーツや地形は、3Dの世界に置くものでした。カメラを動かせば見え方が変わりますし、遠くにあれば小さく見えます。

UIはちがいます。カメラをどこに向けても、いつも同じ場所に表示されます。 タイムの表示、スコア、「ゴール！」のメッセージ——プレイヤーがいつも目にする部分です。

最初はほとんど灰色。それでいい

タブを開くと、GUI以外のほとんどが灰色になっているはずです。故障ではありません。

理由はシンプルで、先に入れものを作らないと、中身を置けないからです。お弁当箱がないのにおかずだけ用意しても、詰める場所がありませんよね。それと同じです。

だから、UIづくりはいつもこの順番になります。

1. GUI で入れものを作る
2. その中に、ラベルやボタンを置く

GUI — まず入れものを作る

いちばん左のボタンです。ここで作るのが ScreenGui という入れものです。

Studioの説明も「新規GUIコンテナを作成」。コンテナとは入れもののことです。

このボタンにも▼があり、4種類から選べます。

• ScreenGui — 画面に貼りつく。タイムやスコアの表示はこれ
• SurfaceGui — パーツの表面に貼りつく。壁の看板や、そこに文字を書きたいとき
• BillboardGui — 3Dの世界に浮かび、いつもこちらを向く。キャラクターの頭の上に名前を出したいとき
• AdGui — 広告を出すためのもの

Screen は画面、Surface は表面、Billboard は看板という意味です。名前が役割をそのまま表しています。

オビーではこう使い分ける

言葉だけだと分かりにくいので、これから作るオビーで例を挙げます。

見分け方はかんたんです。

• 画面のすみにずっと出しておきたい → ScreenGui
• 物の表面に貼りたい → SurfaceGui
• 空中に浮かべて、どこから見ても読ませたい → BillboardGui

ScreenGui はカメラを動かしても位置が変わりませんが、SurfaceGui と BillboardGui は3Dの世界にあるので、離れると小さく見えます。

まず覚えるのは ScreenGui です。今回はこれを選んでください。

1. UIタブの「GUI」から ScreenGui を選ぶ
2. エクスプローラを見ると、StarterGui の中に新しいものが増えている

灰色だったボタンが押せるようになれば成功です。入れものができたので、中身を置けるようになりました。

第10回で StarterGui を「始めるときに画面に出す文字やボタン」と紹介しました。まさにその場所です。ここに入れておくと、ゲームが始まったときにプレイヤー全員の画面に配られます。

ボタンの右にある「▼」が大事

中身の説明に入る前に、知らないと必ずつまずくことをお伝えします。

「ラベル」「入力」などのボタンには、右側に小さな ▼ が付いています。これは種類を選ぶためのもので、ボタンをそのまま押すといま選ばれている種類が置かれます。

たとえば「ラベル」にマウスを乗せると、こう出ます。

「テクスチャのアセットIDを指定」——つまり、いま選ばれているのは画像用のラベルです。このまま押しても、文字は出ません。

▼を押すと、選べる種類が出てきます。

• ImageLabel（イメージラベル）— 画像を出す
• TextLabel（テキストラベル）— 文字を出す

Image は画像、Text は文字という意味です。文字を出したいときは TextLabel を選んでから置いてください。この一手間を知らないと、「ラベルを置いたのに何も出ない」と悩むことになります。

一度選ぶとその種類が覚えられるので、次からはボタンを押すだけで置けます。

中身を置く3つ

入れものができたら、いよいよ中身です。よく使うのはこの3つです。

フレーム — まとめる箱

四角い枠です。それ自体は文字も絵も出しませんが、Studioの説明にもあるとおり他の部品をまとめる入れものとして使います。

「タイム表示とスコア表示をひとまとめにして、いっしょに動かしたい」というときに便利です。

ラベル — 文字や画像を出す

見せるだけの部品です。UIでいちばん出番が多いのがこれです。

「のこり時間 30」「ゴール！」のような表示は、TextLabel で作ります。前に書いたとおり、▼で切りかえてから置いてください。

入力 — プレイヤーが押せる

こちらはプレイヤーが操作できる部品です。「スタート」「もう一度あそぶ」のような押せるボタンを作ります。

ラベルとの違いは、押せるかどうかです。見せるだけならラベル、押させたいなら入力、と覚えてください。

こちらも▼で種類が選べます。ツールチップが「画像を含むGUIボタン」となっているとおり、初期は画像用が選ばれています。

見た目と並べ方を整える3つ

残りの3つは、置いたあとに整えるための道具です。どれも▼で種類を選びます。

外観 — 見た目を飾る

角を丸くする、ふちを付ける、色をグラデーションにする、といった飾りです。ツールチップの UICorner は角を丸くするもので、初期はこれが選ばれています。

レイアウト — きれいに並べる

部品をたくさん置いたとき、自動できれいに並べてくれる道具です。UIGridLayout は方眼のように格子状に並べるもの。縦一列や横一列に並べる種類もあります。

1つずつ手で位置を決めなくてよくなるので、ボタンをたくさん並べるときに助かります。

拘束 — 形をくずさない

画面の大きさが変わっても、形がくずれないようにする仕組みです。

Robloxはスマホでもパソコンでも遊べるので、画面の形がバラバラです。何もしないと、細長い画面で文字がつぶれたりします。UIAspectRatioConstraint はたてよこの比を保つもので、四角いボタンが縦長につぶれるのを防ぎます。

スタイル編集

いちばん右のボタンです。色や形のきまりをまとめて決めて、あちこちに同じ見た目を適用する道具です。

ボタンを10個作るとき、1つずつ色を決めるのは大変です。「うちのゲームのボタンはこの色」と決めておけば、まとめて揃えられます。作るものが増えてきたときに効いてきます。

まとめ

• UI は画面に貼りついて表示されるもの。3Dの世界に置くパーツとは別
• 最初はほとんど灰色。先に入れものを作らないと中身を置けないから
• 順番は GUI で入れものを作る → 中身を置く。入れものは画面用の ScreenGui を選ぶ
• 入れものは StarterGui に入り、ゲーム開始時にプレイヤーの画面へ配られる
• 中身は フレーム（まとめる箱）／ラベル（見せるだけ）／入力（押せる）
• ボタンの ▼ で種類を選ぶ。文字を出したいときは TextLabel に切りかえてから押す
• 外観・レイアウト・拘束で見た目と並びを整える

次回はスクリプトタブです。いよいよ、ゲームを動かすプログラムの入り口に近づいてきました。