UI 9スライスデザイン

カスタムボーダーとコーナーを持つUIを作成する際は、異なるアスペクト比で要素をレンダリングし、ローカライズされたテキストや不明な寸法の他のコンテンツを視覚的に囲む必要があることがよくあります。これにより、境界やコーナーを歪めることなく、さまざまなサイズのUI要素を作成できます。

9スライスアプローチでは、1つの画像（単一のRoblox画像アセット）が内部的に9つのサブ画像に分割され、それぞれ異なるスケーリングルールが適用されます。

スタジオエディタ

スライスの設定は、画像ラベルやボタンのEnum.ScaleTypeとスライスプロパティを直接設定することでも可能ですが、スタジオの内蔵9スライスエディタの方が直感的です。

エディタを開く

スタジオでビジュアル9スライスエディタを開くには：

1. 有効なアセットIDが画像フィールドに入力されたImageLabelまたはImageButtonを選択します。

1. ScaleTypeプロパティをスライスに設定します。

1. 表示されるSliceCenterプロパティをクリックし、行内の**…**をクリックします。

1. 開いたウィンドウには、スライスのエッジを表す4本の赤い線が画像に重なり、ソース画像のサイズも表示されます。

オフセットの設定

スタジオでは、赤い線をドラッグして画像の左側、右側、上端、および下端からのオフセットを設定します。

ドラッグラインの位置を再調整すると、UI要素は自動的に更新されて結果が表示されます。