Sandbox Inventar-Slots — 56px-Raster

Inventar-Slots bei 56px, eng genug für eine volle Hotbar und ein Neun-mal-neun-Raster auf demselben Bildschirm. Die extrudierte Vorderfläche lässt einen gefüllten Slot gefüllt aussehen, und das zählt hier mehr als anderswo, denn das ganze Spiel besteht darin, Gegenstände dazwischen zu bewegen.

Ein Inventarraster braucht kein Panel, sondern ein eckigen, das kachelt. Jedes Feld hier ist 56×56 mit denselben Aussenmassen — die einzige Ausnahme ist das zweizellige Feld für grosse Gegenstände mit 112×56, 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 60 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 Zero 1.0 — Gemeinfrei. Keine Namensnennung nötig. Vollständige Bedingungen · Was das in der Praxis heißt