Packs d'interface

Oak Kit de panneaux — panneaux à cadre double et boutons

Panneaux de fenêtre nine-slice à cadre double en chêne chaud, cadres de liste en creux et quatre états de bouton onglet, en SVG et PNG en 1x/2x/4x.

  • ui
  • svg
  • png transparent
  • nine-slice
  • panneau
  • bouton
  • menu
  • double
  • fantasy
  • rpg
  • bois
Panneau de menu chêne chaud avec une bande de titre en laiton poli et une zone de liste en creux, à côté d'une colonne montrant le même bouton onglet en état normal, survol au trait et enfoncé
aperçu 1600×800la transparence est montrée en damier

À propos de ce pack

Un cadre de bois chaud pour le genre de jeu qui a une grille d'inventaire et un journal de quêtes. Deux bordures concentriques séparées par un intervalle lui donnent un aspect sculpté au lieu d'un rectangle brun plat, et les boutons en forme d'onglet se posent sur une ligne de base en laiton pour qu'une rangée se lise comme un jeu de pages et non comme une rangée de contrôles séparés. Tout est ici d'une taille au-dessus d'un kit standard, parce qu'un menu de fantasy se regarde, il ne se survole pas.

Deux panneaux nine-slice — un cadre de fenêtre à cadre double avec des coins de 32 px et un cadre intérieur en creux avec des coins de 20 px — couvrent presque toutes les boîtes dont un menu a besoin : dialogues, grilles d'inventaire, fonds de liste, infobulles et panneaux de statistiques. Deux bordures concentriques séparées par un intervalle se lisent comme sculptées et non comme tracées, et c'est ce qui sépare une interface travaillée d'un rectangle avec un trait. 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 se posent quatre états de bouton onglet : normal, survol, enfoncé et désactivé. Ils sont dessinés sur la même base de 160×48 avec des coins de 16 px : vous échangez la texture sur un seul widget de bouton et vous obtenez toute la boucle d'interaction sans déplacer un rectangle. L'état enfoncé descend sa face de deux pixels et retire le reflet du haut au lieu de simplement s'assombrir, et c'est ce qui donne à un bouton la sensation d'être cliqué plutôt que simplement recoloré.

Tout est livré deux fois. Les sources SVG sont les fichiers dans lesquels le kit a été dessiné — ouvrez-les, changez les six tons brun bois ou l'unique accent laiton poli, 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 ZIP37 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 readmeZIP37 kB Obtenir →
Panneau de fenêtre, SVG modifiableSVG2.3 kB Obtenir →
Bouton (état normal), SVG modifiableSVG513 B Obtenir →

Comment l'utiliser

  1. Dans Unity, importez les PNG, réglez Texture Type sur Sprite (2D and UI) et la bordure sur 32, 32, 32, 32 pour le panneau de fenêtre et 16, 16, 16, 16 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 — 0.25 pour le panneau de 128 px et 0.1 pour le bouton de 160 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.
  5. L'accent laiton est une valeur unique dans le SVG — le remplacer par de l'argent ou du vert-de-gris rhabille tout le kit pour une autre faction sans toucher aux tons de bois.

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