UI-Packs

Reliquary UI-Bedienelemente — Checkbox, Schalter und Slider

19 kalter Stein Bedienelemente: Kontrollkästchen, Radio, Schalter, Regler und Stepper, mit Ein, Aus, Teilauswahl und Deaktiviert als Form statt als Farbe. SVG plus PNG.

  • ui
  • svg
  • transparentes png
  • Checkbox
  • Schalter
  • Slider
  • Einstellungen
  • Bedienelemente
  • Fantasy
  • stilisiert
  • Tempel
  • dunkle UI
Einstellungselemente auf Schachbrettgrund — eine leere und eine gehakte Checkbox, ein nicht ausgewählter und ein ausgewählter Radiobutton, ein Schalter aus und an sowie eine Slider-Schiene mit Griff
1600×749 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Elemente bei 22px, bewusst klein gehalten. Ein Ritual- oder Zauberbuchbildschirm ist dicht an Text und ein großes Element konkurriert damit; der gehakte Zustand ist eine gefüllte Fase mit geschnittenem Haken statt eines glatten, passend zum Button.

Das Set deckt ab, was ein Einstellungsbildschirm wirklich braucht: ein Kontrollkästchen, einen Radiobutton, einen Kippschalter, einen Regler mit separatem Knopf und ein Stepper-Paar für diskrete Werte. Jedes zustandsbehaftete Element liefert jeden Zustand als eigene Datei auf 22×22-Basis — der Schalter ist 44×22 und die Reglerbahn 176 px breit, damit sie sich per Nine-Slice auf jede Länge ziehen lässt. Den Regler gibt es zusätzlich leer, voll und vertikal, denn eine Lautstärkesäule ist keine gedrehte Zeile.

An und Aus sind als unterschiedliche Formen gezeichnet, nicht als unterschiedliche Farben. Eine ungehakte Box ist eine leere Vertiefung; eine gehakte ist eine gefüllte Fläche mit eingeschnittenem Haken. Das zählt, weil ein Einstellungsbildschirm genau der Ort ist, an dem ein Spieler am ehesten einen Farbenblind-Modus, einen Graustufen-Shader oder ein stark eingefärbtes Post-Processing laufen hat — und ein Zustand, den man nur am Farbton erkennt, verschwindet unter allen dreien.

Der Regler kommt als Bahn und Knopf statt als ein einziges Sprite. Einen einteiligen Regler zu animieren heisst, ihn pro Wert neu zu zeichnen; mit zwei Teilen dehnst du die Füllung und bewegst den Knopf, und genau das erwartet jedes UI-Toolkit ohnehin. Der Knopf trägt eine Mittelkerbe, damit Drehung und Position auch klein lesbar bleiben, und eine gehaltene Variante ergänzt einen Akzentring für den Ziehzustand.

Deaktiviert ist bei jedem zustandsbehafteten Bedienelement ein eigenes Sprite und keine zur Laufzeit aufgetragene Einfärbung. Eine nicht verfügbare Einstellung und eine ausgeschaltete Einstellung sind verschiedene Dinge — die eine sagt "aus", die andere "daran kannst du nichts ändern" — und ein Bildschirm, der beide gleich zeigt, schickt Spielende auf die Suche nach einem Fehler, den es nicht gibt. Das Kontrollkästchen liefert ausserdem einen Teilzustand für die Alles-auswählen-Zeile über einer gemischten Liste, also genau den Fall, den ein zweizustandiges Kästchen falsch meldet.

Alles ist als bearbeitbares SVG und als flaches transparentes PNG in 1x, 2x und 4x enthalten, gezeichnet aus denselben sechs Tönen in tiefes Indigo wie der Rest der Familie Reliquary.

Download

Direkter Link · keine Anmeldung · keine Warteseite
ZIP herunterladen72 kB

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

Dateien in diesem Pack
DateiFormatGrößeDownload
Komplettes Set — 8 SVG-Quellen, PNG-Exporte in 1x/2x/4x, Lizenz und ReadmeZIP72 kB Holen →
Kippschalter (An-Zustand), bearbeitbares SVGSVG461 B Holen →
Slider-Schiene, bearbeitbares SVGSVG746 B Holen →

So wird es benutzt

  1. Tausche zwischen An- und Aus-Zustand die ganze Textur, statt ein Sprite einzufärben; die beiden Zustände unterscheiden sich in der Form, eine Färbung allein bildet das nicht ab.
  2. Die Slider-Schiene ist mit je 7 px Kappe an beiden Enden nine-slice-fähig — dehne die Mitte und die runden Enden bleiben in jeder Breite intakt.
  3. In Unity verdrahtest du die beiden Dateien mit Background und Checkmark der Toggle-Komponente, oder du tauschst das Sprite in einem onValueChanged-Handler für ein Setup mit einem Bild.
  4. Zentriere den Griff auf der Füllkante: Er ist 19 px breit, versetze ihn also um die Hälfte davon von der rechten Füllkante, damit er auf dem Wert sitzt und nicht dahinter.

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
"Reliquary UI-Bedienelemente — Checkbox, Schalter und Slider" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/reliquary-ui-controls