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