Mini-Spiel-UI: Benennungskonventionen für transparente Bilder, Buttons, Icons und Charakter-Sprites

Liegen in Ihrem Projektordner Dateien wie btn_ok.png, button_confirm.png, 按钮_确定.png? Drei Benennungsstile, drei Deutungen – der Anfang von drei Kollaborations-Katastrophen.

Den Fehler habe ich selbst gemacht. Beim ersten Mini-Spiel-Projekt lagen am Ende über 200 Assets im Art-Ordner – die Hälfte englische Abkürzungen, die Hälfte wörtliche chinesische Übersetzungen, manche hießen schlicht 新建文件夹 (2).png. Dateien finden war wie die Nadel im Heuhaufen; jede UI-Änderung kostete einen halben Tag, nur um den passenden Zustand zu identifizieren.

Dieser Artikel beantwortet eine Frage: Wie machen Sie UI-Ressourcen mit einer Benennungsformel auf einen Blick verständlich? Präfix, Kategorie, Funktion, Zustand – vier Bausteine reichen.

Kapitel 1: Der echte Preis chaotischer Namen – warum Standards zählen

Eine echte Geschichte zuerst.

Letztes Jahr haben zwei Freunde und ich ein Casual-Mini-Spiel gebaut: Ich Code, ein Kollege Art, einer Game Design. Im zweiten Monat kamen zwölf Button-Assets – alle 按钮1.png bis 按钮12.png. Auf die Frage, welcher Bestätigen und welcher Abbrechen ist, kam: „Schauen Sie auf die Bilder.“

Fünfzehn Minuten später hatte ich die Zuordnung – zwölf ähnliche abgerundete Rechtecke mit leicht unterschiedlichen Farben. Nach dem Launch kam ein neues Farbschema: wieder zwölf Dateien, diesmal 新按钮1.png bis 新按钮12.png. Alte blieben, neue mischten sich – 24 „Buttons“ im Ordner.

Das Tencent-WeChat-Game-Team hat gemessen: Sinnvolle Benennung spart bis zu 80 % Suchzeit. Keine Kleinigkeit. Zehn Asset-Suchen à drei Minuten pro Tag = 30 Minuten; mit Standard nur noch sechs. Pro Monat rund zwölf Stunden – genug für einen neuen Feature-Prototyp.

Noch ärgerlicher für Skripte. Ein Tool sollte alle PNGs mit btn_-Präfix ersetzen – lief stundenlang leer, weil die Art-Dateien kein btn_ hatten, nur Chinesisch. Zwei Stunden Handarbeit.

Im Code wird es noch deutlicher:

// Saubere Benennung
this.confirmButton.spriteFrame = assets.get('btn_ok_pressed');

// Ohne Standard
this.confirmButton.spriteFrame = assets.get('button2');

Die erste Zeile: Bestätigen-Button, gedrückt. Die zweite? button2 – Ordner öffnen, PNG ansehen, merken. Bei jeder UI-Änderung wiederholen – Lesbarkeit bricht weg.

Kapitel 2: Die Universalformel – ein Muster für alle Fälle

„Standard“ klingt schwer – die Kernformel ist einfach:

Präfix_Funktion_Zustand.png

Oder ausführlicher:

[email protected]

Vier Teile, von links nach rechts präziser. Beispiel: [email protected] – Mail-Modul, Icon, Suche, gedrückt, 2×. Jedes Segment hat Bedeutung.

Häufige Präfixe

Fünfzehn Abkürzungen aus Tencent-Cloud-Cocos-Tutorials und UI-Design-Richtlinien:

Abkürzung	Vollform	Einsatz
bg	background	UI-Hintergrund, Popup-Hintergrund
nav	navbar	Navbar-Elemente
tab	tabbar	Tab-Bar-Icons
btn	button	Buttons
icon	icon	Funktions- und Status-Icons
img	image	Allgemeine Bilder
txt	text	Text als Bild (z. B. Titel)
pop	popup	Popup-bezogen
bar	bar	Fortschritts- und Statusbalken
mask	mask	Masken
sep	separator	Trennlinien
del	delete	Löschen
add	add	Hinzufügen
msg	message	Hinweise, Sprechblasen
logo	logo	Logo

Gemeinsam: kurz, merkbar, sofort erkennbar. btn statt button, bg statt background – weniger Tippfehler, weniger Zeichen.

Modulspezifisch vs. allgemein

Zuerst fragen: Nur in einem Modul oder projektweit?

Allgemein: kein Modulpräfix, Kategorie zuerst – bg_home.png, nicht home_bg.png. Hintergründe können überall wiederverwendet werden.

Modulspezifisch: Modulpräfix für Batch-Arbeit – mail_icon_search.png. Neues Mail-UI: alle mail_*-Dateien auf einmal.

Größenvarianten

Zwei Button-Größen:

btn_ok_big_n.png      # groß, normal
btn_ok_small_n.png    # klein, normal

Oder mit Pixel:

btn_ok_128_n.png
btn_ok_64_n.png

Eine Variante im ganzen Projekt – nicht big/small, mal Zahlen, mal l/s. Chaos entsteht durch Inkonsistenz, nicht durch die Regel selbst.

Kapitel 3: Buttons und Icons – Zustände auf einen Blick

Buttons sind die zahlreichsten und zustandsreichsten UI-Assets: normal, gedrückt, selektiert, deaktiviert. Empfehlung aus UI-Naming-Praxis:

Zustand	Vollform	Abkürzung	Beispiel
Normal	normal	n / def	btn_ok_n.png
Hover	hover	h	btn_ok_h.png
Gedrückt	pressed	p / pre	btn_ok_p.png
Selektiert	selected	s / sel	btn_ok_s.png
Deaktiviert	disabled	d / dis	btn_ok_d.png

Einzelbuchstaben: kurz. btn_ok_n.png statt btn_ok_normal.png – schneller zu tippen, übersichtlicher. Wenn das Team Vollformen will: einheitlich Vollform, nicht gemischt.

Buttons in der Praxis

Blauer Bestätigen-Button, vier Zustände:

btn_ok_n.png
btn_ok_p.png
btn_ok_s.png
btn_ok_d.png

Weitere Farben:

btn_blue_ok_n.png
btn_red_ok_n.png
btn_green_ok_n.png

Reihenfolge: Kategorie (btn) + Farbe + Funktion (ok) + Zustand (n). Alphabetische Sortierung gruppiert Farben – gut für Batch-Tausch.

Icons: Funktion zuerst

Meist zwei Zustände:

icon_search_n.png
icon_search_d.png

Nicht icon1.png, sondern icon_search.png oder icon_delete.png – Zweck ohne Bild öffnen.

Typischer Fehler

button_确认_正常.png – englisches Präfix, chinesische Funktion und Zustand. Probleme:

1. Sortierung: chinesische Zeichen sortieren instabil
2. Skripte: Regex mit CJK wird mühsam
3. Team & i18n: später alles umbenennen

Sicher: Englisch, Kleinbuchstaben, Unterstriche – btn_ok_n.png.

Kapitel 4: Charakter-Assets – Animationsframes ohne Chaos

Komplexer als Buttons: viele Aktionen (idle, walk, run, attack, hurt, death, jump), Richtungen, viele Frames.

Der größte Stolperstein: einstellige Nummern.

hero_run_left_1.png
hero_run_left_2.png
...
hero_run_left_10.png

Im Explorer steht hero_run_left_10.png zwischen 1 und 2 – lexikografisch, weil 10 mit 1 beginnt.

Zweistellig erzwingen:

hero_run_left_00.png
hero_run_left_01.png
...
hero_run_left_10.png

00–09 vor 10. Über 100 Frames: dreistellig (000–999).

Charakter-Formel

Charaktername_Aktion_Richtung_Frame.png

Beispiele:

• hero_idle_down_00.png – Held, idle, unten, Frame 0
• player_run_left_01.png – Spieler, laufen, links, Frame 1
• enemy_attack_right_02.png – Gegner, Angriff, rechts, Frame 2

Aktions-Vokabular

Aktion	Englisch	Abkürzung (optional)
Idle	idle	—
Gehen	walk	—
Laufen	run	—
Angriff	attack	atk
Treffer	hurt	—
Tod	death	die
Sprung	jump	—
Zauber	cast	—

atk kürzer, für Neulinge weniger klar. Weniger als 20 Frames: Vollform; darüber Abkürzung erwägen – sehr lange Pfade werden abgeschnitten.

Richtungen

Vier Richtungen: up, down, left, right.

Acht Richtungen per Index 0–7 – kompakt, aber man muss nachschlagen. Direkte Namen:

hero_attack_up.png
hero_attack_upright.png
hero_attack_right.png
hero_attack_downright.png
hero_attack_down.png
hero_attack_downleft.png
hero_attack_left.png
hero_attack_upleft.png

Länger, aber selbsterklärend. Wenige Richtungen: Namen. Viele: Index kann kompakter sein.

Kapitel 5: Cocos-Creator-Verzeichnisstruktur

Benennung: wie heißt die Datei. Struktur: wo liegt sie. Beides zusammen beschleunigt die Suche.

Empfohlene Struktur (Tencent Cocos-Tutorial):

assets/
├── textures/
│   ├── ui/
│   ├── icons/
│   ├── backgrounds/
│   └── characters/
├── audio/
│   ├── effects/
│   └── music/
├── animations/
├── prefabs/
└── scripts/

Allgemein vs. modulspezifisch

300 Dateien in textures/ui/ – öffnen, scrollen, suchen dauert ewig.

Allgemein: textures/icons/ usw.

Modulspezifisch:

assets/
├── modules/
│   ├── login/
│   │   ├── textures/
│   │   ├── prefabs/
│   │   └── scripts/
│   ├── battle/
│   │   ├── textures/
│   │   ├── prefabs/
│   │   └── scripts/

Login-UI? Nur modules/login. Kampf? Nur modules/battle.

Nicht zu tief schachteln

textures/ui/buttons/blue/rounded/ mit je zwei Dateien – fünf Klicks statt ein Blick auf den Namen.

Eine Klassenebene reicht, außer sehr große Mengen (z. B. über 50 Charakter-Sprites). textures/ui/ für Buttons, Balken, Trenner; textures/icons/; textures/backgrounds/. Drei Ebenen, klar.

Prefabs und Skripte nah bei Assets

Login-Button-Prefab in modules/login/prefabs/, Textur in modules/login/textures/ – kurze Pfade, weniger Sprünge.

Cocos-Dokumentation: Verwandte Dateien nah beieinander – kürzere Referenzen, einfachere Migration.

Kapitel 6: Sieben Goldregeln – Tencent Game Team

Kombiniert mit eigener Praxis.

1. Knapp, aber informativ

btn_ok_n.png – Button, OK, normal.

button_confirm_normal_state_blue_rounded_large.png – zu lang.

Regel: drei bis fünf Segmente; Details wie „rounded“ in Code-Kommentare.

2. Von allgemein zu spezifisch

environment_forest_tree_01.png

Umgebung → Wald → Baum → Variante 1. environment_forest findet alles Waldbezogene.

3. Sortierung durch Präfix

Wichtige Kategorie vorne – hero_ bündelt Held-Assets unter h, nicht verstreut unter character_hero_.

4. Ein Format: snake_case oder camelCase

Ein Stil im ganzen Projekt.

snake_case: Dateisystem-freundlich, klare Grenzen, einfache Regex. Team will camelCase? Einheitlich camelCase – nicht mischen.

5. Einheitliche Nummerierung

Einstellig sortiert falsch – Nullen füllen: bis 99 zweistellig, darüber dreistellig.

6. Gleiche Verbform

spin vs. spinning – eine Form:

cha_sonic_spin_01.png
cha_sonic_spinning_02.png   # falsch – gleiche Aktion, andere Form

cha_sonic_spin_01.png
cha_sonic_spin_02.png       # richtig

7. Einheitliche Rechtschreibung

Britisch vs. amerikanisch: ambience/ambiance, colour/color. Eine Variante (oft US) – sonst verpasst das Skript Hälften der Dateien.

Kapitel 7: Transparente und Sonder-Assets

Transparente PNGs

Suffix _trans oder _overlay:

btn_trans_round.png
icon_overlay_star.png

Transparenz sieht man im Namen nicht – Suffix als Erinnerung.

Masken

mask_rounded.png
mask_circle.png
mask_gradient.png

Wenige Dateien – textures/ui/masks/ oder direkt unter textures/ui/.

Mehrsprachigkeit

title_zh.png
title_en.png
title_ja.png

Oder ISO:

btn_start_zh-CN.png
btn_start_zh-TW.png
btn_start_en-US.png
btn_start_ja-JP.png

Weniger als fünf Sprachen: Kurzcodes reichen.

Dichte (@1x / @2x / @3x)

[email protected]
[email protected]
[email protected]

Wie iOS/Android; TexturePacker erkennt es. Skalierung nach dem Zustand: [email protected], nicht btn_ok@2x_n.png.

Sonderzeichen vermeiden

Leerzeichen → Unterstrich. Klammern → Zahl. Chinesisch → Englisch.

Windows erlaubt CJK; manche Linux-Server, FTP und CI/CD nicht zuverlässig. Sicher: Englisch, Kleinbuchstaben, keine Sonderzeichen.

Fazit

Vier Bausteine: Präfix, Funktion, Zustand, Detail.

btn_ok_n.png – Button, OK, normal. hero_run_left_00.png – Charakter, Aktion, Richtung, Frame. Damit lösen Sie etwa 90 % der Fälle.

Der Rest: zweistellige Nummern, durchgängig Englisch, einheitliche Abkürzungen – entscheidet über Effizienz im Alltag.

Drei Einstiege:

1. Projekt prüfen – Art-Ordner, falsche Namen, mit der Formel umbenennen
2. Abkürzungsliste – bg/btn/icon/nav mit dem Team festhalten und sichtbar machen
3. Struktur trennen – allgemein vs. modulspezifisch, nicht alles in einen Ordner

Benennung ist Gewohnheit, kein Einmal-Event. Mit btn_ok_n.png, zweistelligen Frames und Englisch werden Projekte klarer – und die Suche schneller.