UI-Packs

Redline Inventar-Slots — 72px-Raster

13 72×72 Alarmrot Inventarfelder: leer, Hover, ausgewählt, gesperrt, blockiert, Ablageziel; runde und sechseckige Ausrüstungsfelder, Hotbar, drei Seltenheitsrahmen.

  • ui
  • svg
  • transparentes png
  • Inventar
  • Slot
  • Item-Rahmen
  • Seltenheit
  • Raster
  • Cyberpunk
  • Warnung
  • hud
  • rot
Eine Reihe quadratischer Inventar-Slots auf Schachbrettgrund: leer, Hover, ausgewählt mit Eckhaken und diagonal schraffiert gesperrt, gefolgt von farbigen Seltenheitsrahmen und einem gekachelten Acht-Slot-Raster
1600×651 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Slots bei 72px, als Ausrüstungsbuchten bemessen statt als Inventarraster. Der vertiefte Sockel hält eine leere Bucht offensichtlich leer — der Zustand, der zählt, wenn ohnehin schon etwas schiefläuft.

Ein Inventarraster braucht kein Panel, sondern ein eckigen, das kachelt. Jedes Feld hier ist 72×72 mit denselben Aussenmassen — die einzige Ausnahme ist das zweizellige Feld für grosse Gegenstände mit 144×72, 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 76 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.

Download

Direkter Link · keine Anmeldung · keine Warteseite
ZIP herunterladen87 kB

Komplettes Set — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und Readme

Dateien in diesem Pack
DateiFormatGrößeDownload
Komplettes Set — SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und ReadmeZIP87 kB Holen →
Leerer Slot, bearbeitbares SVGSVG1.1 kB Holen →
Ausgewählter Slot mit Eckhaken, bearbeitbares SVGSVG1.6 kB Holen →

So wird es benutzt

  1. Lege die Slots im Abstand von 76 px an — 72 px Sprite plus 4 px Zwischenraum — dann bleiben die Ränder einen Pixel auseinander statt sich zu verdoppeln.
  2. Zeichne das Item-Icon zentriert im Slot bei etwa 50 px; die innere Vertiefung misst 66 px, alles Größere berührt den Rand und schluckt den Rahmen.
  3. Tausche für ausgewählte und gesperrte Zustände das ganze Slot-Sprite, statt eine Färbung darüberzulegen, denn Eckhaken und Schraffur gehören zum Sprite.
  4. Die Seltenheitsrahmen ersetzen den leeren Slot eins zu eins — gleiche Maße, gleiche Vertiefung — ein Seltenheitswechsel ist also ein einziger Texturtausch ohne Layoutänderung.

Lizenz

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

Namensnennung zum Kopieren
"Redline Inventar-Slots — 72px-Raster" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/redline-inventory-slots