Asset Slice (9-Slice / 3-Slice)
UI-Panels, Buttons und Rahmen verzerrungsfrei auf jede Größe bringen — Ecken bleiben fix, Kanten und Mitte skalieren.
Kurzbeschreibung
Asset Slice teilt ein Asset entlang von vier Rand-Insets in bis zu 9 Regionen auf und kann damit zweierlei: das Asset verzerrungsfrei auf eine beliebige Zielauflösung zusammensetzen (9-Slice / 9-Patch) oder die Regionen einzeln exportieren. Die vier Ecken bleiben dabei pixelgenau fix, die Kanten skalieren in einer Achse, die Mitte in beiden.
Wofür / Wann
- Du hast ein UI-Panel, einen Button oder einen Rahmen und brauchst ihn in mehreren Größen — ohne dass die Ecken verzerren.
- Du willst ein Asset in seine Rand- und Mittelregionen zerlegen und einzeln weiterverwenden.
- Ein 3-Slice reicht (nur horizontal oder nur vertikal dehnbar) — das ist der 9-Slice-Fall mit einem Inset-Paar auf 0.
Wann nicht Asset Slice:
- Du willst ein Sheet/Atlas in beliebig viele freie Zellen zerschneiden → Asset SliceX.
- Du willst freistellen / Detail reduzieren → Chroma-Key bzw. UnDetail/Pixelize.
So funktioniert's
Aus der Quelle B × H und den vier Insets links/rechts/oben/unten entstehen Spalten und Zeilen:
fixe Ecken, in einer Achse dehnbare Kanten, eine in beiden Achsen dehnbare Mitte (Regionen-Namen
tl, t, tr, l, c, r, bl, b, br). Ist ein Inset 0, entfällt die zugehörige Spalte/Zeile — so ergibt
sich automatisch der 3-Slice-Fall.
Beim Skalieren werden die Ecken 1:1 gesetzt und die Kanten/Mitte auf die Zielmaße gefüllt — mit zwei pixel-treuen Füllmodi:
- Kacheln (
tile, Default): die Region wird pixelgenau wiederholt (letzte Kachel beschnitten) — keine Weichzeichnung, pixel-invariant. - Strecken (
stretch): die Region wird per Nearest-Neighbor auf die Streifengröße gebracht (die explizite, bewusste Skalierungs-Ausnahme).
Einstellungen
| Regler | Wirkung |
|---|---|
| Preset | 9-Slice · 3-Slice horizontal · 3-Slice vertikal · Custom — setzt sinnvolle Inset-Defaults. |
| Insets (links/rechts/oben/unten) | Abstand der Schnittlinien von den vier Kanten, in Pixel. Live-Linien-Overlay in der Vorschau. |
| Füllmodus | Kacheln (pixelgenau wiederholen, Default) oder Strecken (Nearest-Neighbor). |
| Zielgröße | Umschalter Pixel (Breite × Höhe) oder Faktor (wird vor dem Zusammensetzen in Zielpixel umgerechnet). |
| Ausgabe-Modus | Skalieren (ein zusammengesetztes PNG) · Zerschneiden (Regionen einzeln) · Beide. |
Empfohlene Einstellungen je Anwendungsfall:
| Ziel | Empfehlung |
|---|---|
| Pixel-Art-Panel auf neue Größe | 9-Slice + Kacheln, Zielgröße in px |
| Horizontaler Balken/Button | 3-Slice horizontal (oben/unten = 0) |
| Regionen einzeln weiterverwenden | Ausgabe: Zerschneiden (oder Beide) |
CLI / Automatisierung
Headless dasselbe 9-Slice — Aufruf und Positional-Argumente in der CLI-Übersicht. Diese
Operation wählst du mit --operation slice.
Relevante Flags (entsprechen den Reglern oben): die vier Insets --slice-left / --slice-right /
--slice-top / --slice-bottom (px), die Zielgröße --slice-target-width / --slice-target-height
oder --slice-scale FAKTOR, der Füllmodus --slice-fill {tile,stretch} und der Ausgabe-Modus
--slice-output {scale,cut,both}.
Beispiel:
clean_sprite_chromakey.py panel.png panel_out.png --operation slice --slice-left 16 --slice-right 16 --slice-top 16 --slice-bottom 16 --slice-target-width 256 --slice-target-height 128 --slice-fill tile --slice-output scale
FAQ
Wie mache ich ein 3-Slice statt 9-Slice? Setze ein gegenüberliegendes Inset-Paar auf 0 (oder nimm das passende Preset). Dann bleibt nur eine dehnbare Achse — die App lässt die leere Spalte/Zeile automatisch weg.
Verzerren meine Pixel beim Skalieren? Im Modus Kacheln nicht — die Regionen werden pixelgenau wiederholt. Strecken nutzt Nearest-Neighbor (hart, keine Weichzeichnung). Eine weiche Interpolation gibt es bewusst nicht.
Wie heißen die zerschnittenen Dateien?
<name>_tl.png, _t.png, _tr.png, _l.png, _c.png, _r.png, _bl.png, _b.png, _br.png.
Leere Regionen werden übersprungen.
Warum bekomme ich einen Fehler bei kleiner Zielgröße?
Wenn Zielbreite < links + rechts (oder Zielhöhe < oben + unten) ist, passen die fixen Ecken
nicht mehr hinein — die App meldet das als klaren Fehler.
Grenzen
- Nur das 4-Inset-9-Slice-Modell — keine freien N×M-Raster (das macht Asset SliceX).
- Kein visuelles Linien-Ziehen in dieser Version (numerische Insets + Live-Overlay).
- Keine Weichzeichnung / kein Resampling beim Skalieren — nur Kacheln oder Nearest-Neighbor.
Beispiele
Gleicher Maßstab: Ecken bleiben unverzerrt, nur Kanten/Mitte werden gekachelt — beliebige Zielgröße.
Verwandte Features
- Asset SliceX — freies Raster-Zerschneiden in beliebig viele Zellen (ohne Skalieren).