Beim Erstellen von UI mit benutzerdefinierten Rändern und Ecken müssen Sie häufig Elemente in unterschiedlichen Seitenverhältnissen rendern und visuell um lokalisierte Texte oder andere Inhalte unbekannter Abmessungen herum anordnen. Dies ermöglicht es Ihnen, UI-Elemente unterschiedlicher Größen zu erstellen, ohne die Ränder oder Ecken zu verzerren.
Mit dem 9-Slice-Ansatz wird ein Bild (ein einzelnes Roblox-Bildasset) intern in neun Unterbilder unterteilt, von denen jedes unterschiedliche Skalierungsregeln hat.
| Unterbild | Skalierung |
|---|---|
| 1 3 7 9 (Ecken) | keine |
| 2 8 (obere/untere Ränder) | horizontal |
| 4 6 (linke/rechte Ränder) | vertikal |
| 5 (Zentrum) | horizontal + vertikal |
Studio-Editor
Die Slice-Konfiguration ist möglich, indem Sie direkt den Enum.ScaleType und die Slice-Eigenschaften auf einem Bildlabel oder Button festlegen, aber der integrierte 9-Slice-Editor von Studio ist intuitiver.
Öffnen des Editors
Um den visuellen 9-Slice-Editor in Studio zu öffnen:
- Wählen Sie ein ImageLabel oder ImageButton aus, bei dem eine gültige Asset-ID in das Feld Image eingegeben wurde.
- Setzen Sie die Eigenschaft ScaleType auf Slice.
- Klicken Sie auf die Eigenschaft SliceCenter, die erscheint, und klicken Sie dann auf die … innerhalb der Zeile.
- In dem sich öffnenden Fenster überlagern 4 rote Linien das Bild und stellen die Kanten der Slices dar. Die Größe des Quellbildes wird ebenfalls angezeigt.
Offset festlegen
Ziehen Sie in Studio die roten Linien, um die Offsets von den linken, rechten, oberen und unteren Kanten des Bildes festzulegen.
Wenn Sie eine bessere Präzision benötigen, geben Sie Offset-Werte in die Felder auf der rechten Seite des Editorfensters ein.
Während Sie die Drag-Linien neu positionieren, wird das UI-Element automatisch aktualisiert, um das Ergebnis zu zeigen.
Die Offset-Werte sind anders als die Werte der UI-Objekt-Eigenschaft SliceCenter und repräsentieren die Anzahl der Pixel zwischen einer Kante des Quellbildes und dem Dragger, der mit dieser Seite verbunden ist.