Packs d'interface

Carbon Contrôles — case, interrupteur et curseur

Huit contrôles d'interface en fibre de carbone : case, radio, interrupteur et curseur, chaque état activé/désactivé dessiné comme une forme distincte. SVG et PNG.

  • ui
  • svg
  • png transparent
  • case à cocher
  • interrupteur
  • curseur
  • paramètres
  • contrôles
  • réaliste
  • cockpit
  • simulation
  • course
Contrôles de paramètres sur fond en damier — une case vide et une case cochée, un bouton radio non sélectionné et un sélectionné, un interrupteur désactivé puis activé, et un rail de curseur avec sa poignée
aperçu 1600×752la transparence est montrée en damier

À propos de ce pack

Contrôles à 24px à géométrie chanfreinée assortie aux boutons. L'état activé est un chanfrein plein et non un changement de couleur, parce que la moitié de l'intérêt d'un panneau d'instruments est qu'il reste lisible sur une photo, en niveaux de gris et d'un coup d'œil.

Le set couvre les quatre contrôles dont un écran de paramètres a réellement besoin : une case à cocher, un bouton radio, un interrupteur et un curseur avec sa poignée séparée. Chaque contrôle à états livre ses deux états dans son propre fichier, sur une base de 24×24 — l'interrupteur fait 48×24 et le rail du curseur 192 px de large pour pouvoir être nine-slicé à n'importe quelle longueur.

Activé et désactivé sont dessinés comme des formes différentes, pas comme des couleurs différentes. Une case décochée est un creux vide ; une case cochée est une surface pleine avec une coche taillée dedans. C'est important parce que l'écran de paramètres est précisément là où un joueur a le plus de chances d'utiliser un mode daltonien, un shader en niveaux de gris ou un post-traitement fortement teinté — et un état qui ne se lit qu'à la teinte disparaît sous les trois.

Le curseur est livré en rail et poignée plutôt qu'en un seul sprite. Animer un curseur d'une pièce oblige à le redessiner pour chaque valeur ; avec deux pièces vous étirez le remplissage et déplacez la poignée, ce que tout toolkit d'interface attend déjà. La poignée porte une encoche centrale pour que sa rotation et sa position restent lisibles en petit.

Tout est fourni en SVG modifiable et en PNG plat transparent à 1x, 2x et 4x, dessiné à partir des mêmes six tons presque noir que le reste de la famille Carbon.

Téléchargement

Lien direct · sans inscription · sans page d'attente
Télécharger ZIP48 kB

Ensemble complet — 8 sources SVG, exports PNG en 1x/2x/4x, licence et readme

Fichiers inclus dans ce pack
FichierFormatPoidsTéléchargement
Ensemble complet — 8 sources SVG, exports PNG en 1x/2x/4x, licence et readmeZIP48 kB Obtenir →
Interrupteur (état activé), SVG modifiableSVG467 B Obtenir →
Rail du curseur, SVG modifiableSVG644 B Obtenir →

Comment l'utiliser

  1. Échangez la texture entière entre les fichiers activé et désactivé plutôt que de teinter un seul sprite ; les deux états diffèrent par la forme, une teinte seule ne les reproduira pas.
  2. Le rail du curseur accepte le nine-slice avec 8 px d'embout de chaque côté — étirez le milieu et les extrémités arrondies restent intactes à n'importe quelle largeur.
  3. Dans Unity, reliez les deux fichiers aux graphiques Background et Checkmark du composant Toggle, ou échangez le sprite dans un gestionnaire onValueChanged pour un montage à une seule image.
  4. Centrez la poignée sur le bord du remplissage : elle fait 20 px de large, décalez-la donc de la moitié depuis le bord droit du remplissage pour qu'elle se pose sur la valeur et non après.

Licence

Creative Commons Attribution 4.0 — Gratuit pour un usage commercial. Attribution obligatoire. Conditions complètes · Ce que cela veut dire en pratique

Ligne de crédit à copier
"Carbon Contrôles — case, interrupteur et curseur" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/carbon-ui-controls