UI の見た目の変更

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

外観変更モジュール を使用すると、GuiObjects の外観をさらにカスタマイズできます。

グラデーション

Class.UIGradient オブジェクトは、親 GuiObject に色と透明度のグラデーションを適用します。

グラデーションを構成するには:

  • グラデーションの ColorSequence プロパティを通じて、Color を設定します。
  • その透明度を Datatype.NumberSequenc' を通じてグラデーションの Class.UIGradient.Transparency|Transparency プロパティで設定します。
  • Class.UIGradient.Offset|Offset プロパティを介して、グラデーションの開始点を選択します。
  • Class.UIGradient.Rotation|Rotation プロパティを通じて、グラデーションの角度を選択します。

カラーシーケンス

グラデーションの色のシーケンスを設定するには:

  1. In the エクスプローラー ウィンドウ, select the UIGradient .

  2. In the プロパティ window, click inside the property field, then click the button to the right of the input box. 色のシーケンスポップアップが表示されます。

    色のシーケンスの下のトライアングルは、そのトライアングルのポイントの色を決定します。

    Color sequence popup from white to white
  3. 色の順番をクリックし、次に の小さな正方形をクリックして ポップアップウィンドウを開きます。

  4. キーポイントの色を選択します。

    Color sequence popup from red to white
  5. 必要に応じて、あなたは次を行うことができます:

    • グラフのどこかをクリックして別のキーポイントを追加します。
    • 既存のキーポイントを新しい位置にドラッグするか、キーポイントを選択し、 時間 入力を通じて特定の時間値を入力します。
    • Select キーポイントを選択し、 Delete ボタンをクリックして削除します。
    • クリックすることでシーケンスをリセットします。

透明度

グラデーションの透明度を範囲内で調整するには:

  1. In the エクスプローラー ウィンドウ, select the UIGradient .

  2. In the プロパティ window, click inside the 透明度 property field, then click the button to the right of the input box. 番号順番が表示されます。

    番号シーケンスグラフにある各スクエアは、 キーポイント で、その時点の透明度値を決定します。

    Number sequence popup from 0.5 to 0.5
  3. 任意のキーポイントをクリックしてドラッグしたり、タイム および 値 入力を通じて特定の時間/値の組み合わせを入力します。

    Number sequence popup from 0 to 1
  4. 必要に応じて、あなたは次を行うことができます:

    • グラフのどこかをクリックして別のキーポイントを追加します。
    • Select キーポイントを選択し、 Delete ボタンをクリックして削除します。
    • クリックすることでシーケンスをリセットします。

オフセットと回転

Class.UIGradient.Offset|Offset と Rotation プロパティは、グラデーションのコントロールポイントと角度を調整できます。次の図に示すように、 Offset は親の幅または高さの 11

オフセット (X) = 0
オフセット (X) = 0.25
オフセット (X) = -0.25

同様に、グラデーションを回転すると、コントロールポイントも回転します。

回転 = 0
回転 = 45
回転 = -90

ストローク

Class.UIStroke インスタンスは、テキストまたは境界線にアウトラインを適用します。キー機能には以下が含まれます:

  • ストロークのアウトラインの 色 と 厚さ を調整可能。
  • ストロークの透明度を親の透明度に独立して設定できます。
  • 3つの コーナースタイル (ラウンド、ベル、またはミート)。
  • Stroke グラデーション サポート通過の UIGradient インスタンス。

テキストのアウトライン/ボーダー

親によって、UIStroke は、 テキストのアウトライン または、 境界 として操作されます。親に 1> Class.UIStroke1> をテキストオブジェクトに、4> Class.UI

UIStroke の子供とテキストラベル
UIStroke と UICorner の子供たちを含むフレーム

テキストオブジェクトに適用すると、デフォルトのストローク動作を ApplyStrokeMode プロパティでオーバーライドし、テキスト自体ではなく、オブジェクトの境界にストロークを適用できま

UIStroke.ApplyStrokeMode = コンテキスト
UIStroke.ApplyStrokeMode = Border

厚さ

Class.UIStroke.Thickness|Thickness プロパティを通じて、ストロークの幅を設定できます。これは、親の外側のピクセルから測定されたピクセル数で表示されます。

UIStroke.Thickness = 4
UIStroke.Thickness = 12

色/グラデーション

Class.UIStroke.Color|Color プロパティを通じて、ストロークの色を設定し、子供を挿入してグラデーションストロークを作成できます。

UIStroke.Color = (0, 95, 225)
UIGradient child で UIStroke を持つ

透明度

Class.UIStroke.Transparency|Transparency プロパティは、親オブジェクトの BackgroundTransparency または TextTransparency の独立してストロークの透明度を設定します。これにより、「空洞」(オリジンのアウトラインのみを含む)のテキスト

TextLabel.TextTransparency = 0 /  UIStroke.Transparency = 0.5
TextLabel.TextTransparency = 1 / UIStroke.Transparency = 0

コーナースタイル

Class.UIStroke.LineJoinMode|LineJoinMode プロパティは、隅角がどのように解釈されるかを制御できます。 RoundBevel 、または 1>Miter1> の値を受け入れます。

UIStroke.LineJoinMode = Round
UIStroke.LineJoinMode = Bevel
UIStroke.LineJoinMode = Miter

コーナー

Class.UICorner インスタンスは、親の GuiObject のすべての四隅にデフォームを適用します。CornerRadius プロパティを使用して、1>Datatype.UDim.Scale|Scale1> また

Scale は、親の子のサブジェクトの長さに基づいて、 パーセンテージ を返します。つまり、 0.5 以上のスケールは

Datatype.UDim.Scale|Scale = 0.25 ・ Datatype.UDim.Offset|Offset =
2> 02>>>

Datatype.UDim.Scale|Scale = 0.5 ・ Datatype.UDim.Offset|Offset = 2> 02> ・

>

Datatype.UDim.Scale|Scale = 0 ・ Datatype.UDim.Offset|Offset =
2> 322> > >

Datatype.UDim.Scale|Scale = 0 ・ Datatype.UDim.Offset|Offset =
2> 642> > >

パッド

A UIPadding オブジェクトは、親の GuiObject に上、下、左、および/または右のパッドを適用します。

たとえば、ボタンの下部または上部にオフセットを適用することで、テキストを上下に移動できます。