Packs d'interface

Recon Kit de panneaux — panneaux à cadre simple et boutons

18 sprites d’interface optique nocturne : panneaux nine-slice à cadre simple, une infobulle, une barre de titre, un séparateur, une puce et douze états de bouton chanfreinés.

  • ui
  • svg
  • png transparent
  • nine-slice
  • panneau
  • bouton
  • menu
  • sobre
  • militaire
  • optique
  • reconnaissance
  • hud
Panneau de menu optique nocturne avec une bande de titre en orange fusée et une zone de liste en creux, à côté d'une colonne montrant le même bouton chanfreiné en état normal, survol au trait et enfoncé
aperçu 1600×1115la transparence est montrée en damier

À propos de ce pack

Optique nocturne plutôt que toile diurne : corps gris acier, tracé vert phosphore, un signal orange fusée. Dimensionné petit parce qu'une surcouche de reconnaissance vit au bord de l'écran.

Deux panneaux nine-slice — un cadre de fenêtre à cadre simple avec des coins de 0 px et un cadre intérieur en creux avec des coins de 0 px — couvrent presque toutes les boîtes dont un menu a besoin : dialogues, grilles d'inventaire, fonds de liste, infobulles et panneaux de statistiques. Une seule bordure continue garde le panneau assez discret pour se placer derrière du texte dense. Les deux s'étirent proprement à n'importe quelle taille parce que les coins ne changent jamais d'échelle et que le centre est un remplissage plat.

Sur les panneaux reposent douze sprites de bouton chanfreinés : normal, survol, enfoncé et grisé, chacun dessiné trois fois — une barre standard de 116×32, un bouton d’icône carrés carré et un bouton compact pour les barres d’outils et les actions en ligne. Les trois tailles sont des fichiers distincts et non un sprite mis à l’échelle, car le dessin dépend de la taille : le chanfrein calculé à 32 px est recalculé sur les plus petits, pas rétréci. L’état enfoncé abaisse sa face de deux pixels et retire le reflet supérieur au lieu de simplement s’assombrir — c’est ce qui fait qu’un bouton semble cliqué et non simplement recoloré.

Quatre pièces plus petites couvrent ce dont un menu a besoin entre les panneaux : une infobulle à pointe, une barre de titre qui se pose le long du haut d’un panneau, un séparateur de section avec une marque centrale, et une puce d’étiquette pour les compteurs et les statuts. Aucune n’est le panneau de fenêtre à une autre taille — un nine-slice s’étire déjà à toute dimension, donc un second fichier d’une autre largeur serait du remplissage et non un composant.

Tout est livré deux fois. Les sources SVG sont les fichiers dans lesquels le kit a été dessiné — ouvrez-les, changez les six tons gris acier ou l'unique accent orange fusée, et réexportez. Les exports PNG sont plats, transparents et pré-mis à l'échelle en 1x, 2x et 4x pour les moteurs qui veulent des bitmaps, sans alpha prémultiplié et sans ombre cuite hors des limites du sprite.

Téléchargement

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

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

Fichiers inclus dans ce pack
FichierFormatPoidsTéléchargement
Kit complet — sources SVG, exports PNG en 1x/2x/4x, licence et readmeZIP67 kB Obtenir →
Panneau de fenêtre, SVG modifiableSVG2.1 kB Obtenir →
Bouton (état normal), SVG modifiableSVG1.3 kB Obtenir →

Comment l'utiliser

  1. Dans Unity, importez les PNG, réglez Texture Type sur Sprite (2D and UI) et la bordure sur 0, 0, 0, 0 pour le panneau de fenêtre et 0, 0, 0, 0 pour les boutons ; puis réglez Image Type sur Sliced sur le composant d'interface.
  2. Dans Godot 4, utilisez un NinePatchRect et réglez les marges du patch sur les mêmes valeurs, ou déposez directement le SVG et laissez Godot le rastériser à l'échelle définie dans les options d'import.
  3. Dans Unreal, importez en Texture2D, créez un Slate Brush avec Draw As réglé sur Box et saisissez la marge en fraction de la taille de texture — pour le panneau de 96 px et pour le bouton de 116 px.
  4. Pour un rendu net aux échelles d'interface non entières, utilisez le PNG 2x ou 4x plutôt que d'agrandir celui en 1x, ou pointez votre moteur sur la source SVG et laissez-le rastériser à la taille finale.

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
"Recon Kit de panneaux — panneaux à cadre simple et boutons" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/recon-panel-ui-kit