Textures

Byte Textures sans raccord

20 textures de surface répétables (pixel art) pour interfaces en mode clair — os froid, accent sarcelle de signal. SVG et PNG transparent en 1x/2x/4x.

  • ui
  • svg
  • png transparent
  • texture
  • sans raccord
  • carrelage
  • matériau
  • pixel
  • pixel art
  • pixel art
  • interface claire
  • puzzle
  • gestion
Planche montrant 20 textures de surface répétables (pixel art) de la famille Byte, disposés sur un damier de transparence avec leurs tailles en pixels inscrites en dessous
aperçu 1600×3907la transparence est montrée en damier

À propos de ce pack

Byte Textures sans raccord est un ensemble de 20 textures de surface répétables dessinés dans le style pixel art, où chaque coin est un escalier de pixels entiers et rien n'est lissé. Il contient des surfaces de brique, de pierre et de carrelage, du bois, du tissu et du métal, de la terre, de l'herbe et du plâtre, et une carte de hauteur assortie pour chaque surface.

Ce sont des surfaces dessinées en vectoriel, pas des scans PBR photographiques, et autant le dire franchement : elles ne passeront pas pour un matériau photoréaliste sous une caméra physique. Ce à quoi elles servent, c'est au travail stylisé, aux fonds 2D, aux remplissages d'interface et à tout ce qui doit rester lisible une fois mis à l'échelle ou recoloré — des cas où un scan photo est de toute façon le mauvais outil.

Le contour progresse par unités de 4px et l'ombrage est un tramage de Bayer plutôt qu'un dégradé : le set survit donc à une mise à l'échelle par un facteur entier — la seule façon de mettre du pixel art à l'échelle sans le réduire en bouillie.

À l'intérieur de ce style, voici la lecture Byte : une interface en mode clair sur une palette os froid avec des accents sarcelle de signal, bâtie autour de un cadre à bordure unique, de boutons pilule entièrement arrondis en 112x36, de barres en bandes divisées en 10 segments et d'icônes au trait sur une grille de 24px. Ces mesures expliquent pourquoi deux familles peuvent partager un style artistique sans être interchangeables : le style décide comment un bord est tracé, les nombres décident à quoi sert l'interface.

Chaque motif qui traverse un bord est redessiné sur le bord opposé, ce qui constitue toute la difficulté d'une texture répétable et ce qu'il est facile de rater sans s'en apercevoir. Chaque surface est livrée avec une carte de hauteur en niveaux de gris pour qu'un shader puisse en dériver une carte de normales à l'intensité que la scène demande, plutôt que d'en cuire une à une intensité qui ne convient à rien.

Chaque sprite est livré en SVG modifiable et en PNG transparent à 1x, 2x et 4x : vous pouvez déposer les PNG directement dans un moteur ou ouvrir le vecteur et changer une couleur. Dessiné aux mêmes mesures que le reste de la famille Byte, ce qui veut dire que ce kit et le kit de panneaux Byte s'alignent sans qu'aucun des deux soit redimensionné. Convient bien aux jeux en pixel art.

Téléchargement

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

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

Fichiers inclus dans ce pack
FichierFormatPoidsTéléchargement
Ensemble complet — sources SVG, exports PNG en 1x/2x/4x, licence et readmeZIP308 kB Obtenir →
Mur de briques, dalle sans raccord, pixel art, SVG modifiableSVG56 kB Obtenir →

Comment l'utiliser

  1. Réglez le matériau pour se répéter sur les deux axes à la taille source ; la tuile est dessinée carrée, ce qui introduit un raccord est donc une échelle non uniforme, pas le dessin.
  2. Passez le fichier -height dans un nœud normal-from-height plutôt que de l'utiliser directement comme carte de normales — c'est une élévation en niveaux de gris, pas une normale RVB.
  3. Si vous avez besoin d'une variante, recolorez par teinte plutôt qu'en éditant le SVG ; les tons sont choisis pour survivre à un décalage de teinte sans que le joint ni le grain disparaissent.

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
"Byte Textures sans raccord" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/3d/textures/byte-textures