カスタムボーダーとコーナーを使用して UI を作成すると、エレメントを異なるアセプト比率でレンダリングし、ローカライズテキスト または他のコンテンツの不明なサイズのコンテンツを視覚的に包む必要があります。これにより、ボーダーまたはコーナーを歪ませずに、さまざまなサイズの UI エレメントを作成できます。
9-Slice アプローチでは、1つの画像 (Roblox の単一の画像アセット) が内部的に 9つのサブ画像に分割され、それぞれに異なるスケーリングルールがあります。
| サブイメージ | スケーリング |
|---|---|
| 1 3 7 0> 9 0> (コーナー) | なし |
| 2 8 (上/下の端) | 横長 |
| 4 6 （左/右の端） | 垂直 |
| 5 (中央) | 横長 + 縦長 |
Studio エディタ
スライス構成は、Enum.ScaleType とスライスプロパティをイメージレーベルまたはボタンに直接設定することにより、可能です。しかし、Studio の内蔵 9-Slice Editor は、より直感的です。
エディタを開く
Studio: でビジュアル 9-Slice Editor を開くには：
- スケールタイプ プロパティを スライス に設定します。
- 表示される SliceCenter プロパティをクリックし、行内の … をクリックします。
- 開いたウィンドウで、4つの赤い線がイメージを重複し、スライスの端を表します。ソース画像サイズも表示されます。
オフセットを設定
Studio で、赤い線をドラッグして、画像の左、右、上、および下の隅にオフセットを設定します。
精度を向上させる必要がある場合は、エディタウィンドウの右側のフィールドにオフセット値を入力します。
ドラガーラインを再設定すると、UI エレメントが自動的に更新され、結果を表示します。
オフセット値は、UI オブジェクトの SliceCenter プロパティ値と一致しません。オフセット値は、ソース画像のエッジとドラガーが関連付けられたサイドの間のピクセル数を表示します。