UI-Packs

Sandbox UI-Bedienelemente — Checkbox, Schalter und Slider

Acht Bedienelemente in warmer Sand: Checkbox, Radio, Schalter und Slider, jeweils mit An- und Aus-Zustand als unterschiedliche Formen. SVG und PNG.

  • ui
  • svg
  • transparentes png
  • Checkbox
  • Schalter
  • Slider
  • Einstellungen
  • Bedienelemente
  • Voxel
  • helle UI
  • Aufbau
  • Sandbox
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×747 VorschauTransparenz als Schachbrett dargestellt

Über dieses Pack

Elemente bei 20px, durchgehend quadratisch; der runde Helfer zeichnet in diesem Stil ein Quadrat, denn ein Voxel kennt keine Kurve und ein Kreis zwischen Würfeln ist sofort falsch.

Das Set deckt die vier Elemente ab, die ein Einstellungsbildschirm wirklich braucht: Checkbox, Radiobutton, Kippschalter und Slider mit separatem Griff. Jedes zustandsbehaftete Element liefert beide Zustände als eigene Datei, auf einer Basis von 20×20 — der Schalter misst 40×20 und die Slider-Schiene ist 160 px breit, damit sie sich auf jede Länge nine-slicen lässt.

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 Slider kommt als Schiene und Griff statt als einzelnes Sprite. Einen einteiligen Slider zu animieren heißt, ihn pro Wert neu zu zeichnen; mit zwei Teilen dehnst du die Füllung und bewegst den Griff, und genau das erwartet ohnehin jedes UI-Toolkit. Der Griff trägt eine Mittelkerbe, damit Drehung und Position auch klein lesbar bleiben.

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

Download

Direkter Link · keine Anmeldung · keine Warteseite
ZIP herunterladen13 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 ReadmeZIP13 kB Holen →
Kippschalter (An-Zustand), bearbeitbares SVGSVG506 B Holen →
Slider-Schiene, bearbeitbares SVGSVG455 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 17 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 Zero 1.0 — Gemeinfrei. Keine Namensnennung nötig. Vollständige Bedingungen · Was das in der Praxis heißt