Slate Inventar-Slots — 64px-Raster

Inventar-Slots bei 64px mit vier Zuständen und den Seltenheitsrahmen. Der leere Sockel ist vertieft, mit einer hellen Kante oben und einem Schatten unten, und darin liegt der ganze Trick: Ein Inventarraster wird als Raster aus Löchern gelesen, und ein Slot, der nicht wie ein Loch aussieht, liest sich als Button.

Ein Inventarraster braucht kein Panel, sondern ein eckigen, das kachelt. Jedes Feld hier ist 64×64 mit denselben Aussenmassen — die einzige Ausnahme ist das zweizellige Feld für grosse Gegenstände mit 128×64, und das ist eine eigene Datei statt eines gedehnten eckigen, weil das Dehnen eines nicht nine-slice-fähigen Felds seine Ecken verzerrt. Setze sie 68 px auseinander, dann lesen sich die Ränder als ein Raster statt als Reihe einzelner Kästen.

Die Zustände sind als Struktur gezeichnet, nicht als Farbe. Das ausgewählte Feld bekommt Eckmarken, das gesperrte eine Diagonalschraffur, das Hover-Feld hebt seinen Rand eine Stufe, das blockierte trägt ein Kreuz und das Ablageziel einen gestrichelten Akzentrahmen. Das ist Absicht: der Inventarbildschirm ist in den meisten Spielen die unruhigste Fläche, liegt unter Gegenstandsgrafik in allen Farbtönen zugleich, und ein Zustand, der nur eine Randfarbe ist, verschwindet in dem Moment, in dem ein rotes Schwert im Feld liegt.

Blockiert und gesperrt sind absichtlich getrennte Sprites. Ein gesperrtes Feld lässt sich später öffnen; ein blockiertes weist den Gegenstand ab, der gerade am Cursor hängt. Beide gleich zu zeichnen ist der Weg, auf dem ein Inventar dem Spieler die falsche Regel beibringt. Die Ausrüstungsfelder brechen aus demselben Grund mit dem eckigen — ein Accessoire-Slot ist rund, ein Edelstein-Slot sechseckig, sodass die Form vor jedem Tooltip sagt, was dorthin gehört.

Die drei Seltenheitsrahmen greifen die Farben für Leben, Mana und Ausdauer aus dem Rest der Familie wieder auf, jeder mit einer Eckmarkierung zusätzlich zum farbigen Rand — wer nach Seltenheit sortiert, liest also zwei Signale, und keines davon konkurriert mit der Item-Grafik in der Mitte des Slots.

Alles ist als bearbeitbares SVG und als flaches transparentes PNG in 1x, 2x und 4x enthalten. Die Slot-Innenflächen sind transparent, was du hinter dem Raster renderst, scheint also durch, statt von einer eingebrannten Hintergrundfarbe verdeckt zu werden.

Creative Commons Namensnennung 4.0 — Kostenlos für kommerzielle Nutzung. Namensnennung erforderlich. Vollständige Bedingungen · Was das in der Praxis heißt