はじめに
こんにちは、まつさこ です。
今回は、RobloxでUIを配置する方法を紹介します。その過程で、体力ゲージのように動作するバーゲージを作成します。
必要なパーツの準備
まずは、UIを配置するためのパーツを準備しましょう。
StarterGui にマウスカーソルを合わせ、「+」ボタンをクリックして ScreenGui を追加します。
次に、ScreenGui に Frame を追加します。先ほどと同様に ScreenGui にマウスカーソルを合わせ、「+」ボタンをクリックして Frame を追加します。
ゲーム画面の左上に白い正方形が配置され、カメラの位置に関わらず常に画面に表示されるようになります。これが Frame です。
さらに、ゲージの内側を表現するためにもうひとつ Frame を追加します。Frame の下にもう一つ Frame と追加して、Gauge という名前にしておきましょう。
区別できるように、Gauge の背景色（BackgroundColor3）を変更しておきます。Sizeも、x,y共にOffsetを 90 にし、一回り小さくしておきましょう。
ScaleとOffsetの違いについては、後ほど説明します。
UIの調整
AnchorPoint
Frame には、AnchorPoint と Position というプロパティがあります。これらは、UIの配置に関わる重要なプロパティです。
AnchorPoint は、UIの配置の基準点を指定します。X軸とY軸のそれぞれについて、0から1の値を指定します。例えば、X軸が0.5、Y軸が0.5の場合、UIの中心が基準点になります。少しわかりづらいですが、基準点には黒い点が表示されます。
LuaスクリプトからUIパーツの位置やスケールを変更する際は、この AnchorPoint が基準となります。
※Rotationは、常にFrameの中央（Anchorが0.5, 0.5の位置）が回転の中心となるようです。
Position
Position には、X軸Y軸共に Scale と Offset という項目があります。
Scale は親要素に対する相対的な位置を0~1の値で指定します。親要素の左上が0,0、右下が1,1です。
下の画像の Frame オブジェクトは、 ScreenGui （つまり画面全体）に対して、左上から 0.5, 0.1 の位置に配置されています。X軸方向には中央、Y軸方向には上から10%の位置に配置されているということです。
Size
Size にも、X軸Y軸共に Scale と Offset という項目があります。
Scale は親要素に対する相対的なサイズを0~1の値で指定します。親要素のサイズに対して、どの程度の割合で表示するかを指定します。Offset はピクセル単位で、絶対的なサイズを指定します。
下の画像の Frame オブジェクトは、 ScreenGui （つまり画面全体）に対して、幅 0.75 高さ 0.1 のサイズを持っています。つまり、画面全体の幅の75%と高さの10%のサイズを持っているということです。
編集ウィンドウのサイズを変えると、UIのサイズも変わることが確認できると思います。
ゲージの作成
先述の AnchorPoint と Position 、 Size の説明を踏まえて、ゲージを作成していきます。内側の緑の Gauge のX軸方向のサイズを変更することで動作させる想定で組みます。
ポイントは
-
GaugeのAnchorPointを (0, 0.5) に設定することでサイズを変更した時の基準が左端になるようにする -
Positionを Scale(0.02, 0.5) に設定することで、Frameの左端から2%の位置かつ縦方向には中央に配置されるようにする
-
Sizeを Scale(0.96, 0.8) に設定することで、Frameの幅の96%、高さの80%のサイズを持つようにする
これで、ゲージの内側の Gauge が作成できました。
Gauge のX軸方向のSizeのScaleを 0~0.96 の間で変更することで、ゲージをMinからMaxまで動かすことができます。
スクリプトの作成
最後に、ゲージのサイズを変更するスクリプトを作成します。
Gauge の子要素として GaugeScript という名前で LocalScript を追加します。
local gauge = script.Parent
local function SetGauge(rate)
gauge.Size = UDim2.new(rate * 0.96, 0, 0.8, 0)
end
-- テスト
SetGauge(0.8)
SetGauge 関数は、引数に与えられた値を元に Gauge のサイズを変更する関数です。テストとして、SetGauge(0.8) を呼び出しているので、ゲームを再生するとゲージが80%になっているのが分かると思います。
RemoteEventを使用するなどして、適切なタイミングで SetGauge を呼び出すことで、ゲージを動作させることができます。
まとめ
今回は、RobloxでUIを配置する方法を紹介しました。その過程で、体力ゲージのように動作するバーを作成しました。
読んでくださりありがとうございました🤗
Discussion