UI-Packs

Neon Inventar-Slots — 64px-Raster

13 64×64 kontrastreiches Neon 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
  • Sci-Fi
  • hud
  • Cyberpunk
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×640 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Slots bei 64px mit durchgezogener facettierter Silhouette: Der Sockel ist ein kantiges Polygon, kein abgerundetes Quadrat, er gehört also zum selben Mesh wie die Panels. Der ausgewählte Zustand hellt eine einzelne Facette auf statt des ganzen Rahmens, was sich als Licht auf einer Kante liest statt als Glühfilter.

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 Schild, Energie und Hitze 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 herunterladen75 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 ReadmeZIP75 kB Holen →
Leerer Slot, bearbeitbares SVGSVG432 B Holen →
Ausgewählter Slot mit Eckhaken, bearbeitbares SVGSVG891 B Holen →

So wird es benutzt

  1. Lege die Slots im Abstand von 68 px an — 64 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 45 px; die innere Vertiefung misst 58 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
"Neon Inventar-Slots — 64px-Raster" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/neon-inventory-slots