Pourquoi le Pixel Art semble flou et comment y remédier

Le pixel art devient généralement flou après sa création, et non pendant sa création. Le fichier peut être parfaitement net. Ensuite, un navigateur, une application de conception ou un moteur de jeu l’affiche à une taille fractionnaire et mélange les pixels voisins.

Le correctif consiste à trouver où l’interpolation est entrée dans le pipeline.

Vérifiez le fichier à 100%

Ouvrez le PNG exporté à ses dimensions natives. Si chaque bloc a un bord dur, l’exportation se déroule bien. S’il est déjà mou, revenez à la source et exportez sans rééchantillonnage.

Ne jugez pas une image 128 × 128 alors qu’une visionneuse d’images l’adapte automatiquement à une fenêtre de 700 pixels. Définissez la vue sur 100 %, 200 % ou un autre zoom sur un nombre entier.

Échelle par nombres entiers

Une image de 64 pixels s’échelonne proprement jusqu’à 128, 192 ou 256 pixels. A 150 pixels, chaque pixel source ne peut pas occuper un nombre égal de pixels d’affichage. Le moteur de rendu doit les mélanger ou les répartir de manière inégale.

Utilisez 2×, 3×, 4× et d’autres multiples entiers chaque fois que la disposition le permet.

Si la destination a une taille fixe peu pratique, envisagez de créer la grille de pixels pour cette destination au lieu d’y insérer un élément existant.

## Désactiver le lissage du navigateur

Pour le pixel art sur un site Web, CSS peut demander une mise à l’échelle stricte :

.pixel art {
  image-rendering: pixelated;
}

Donnez toujours à l’image des valeurs de largeur et de hauteur raisonnables. « rendu d’image » aide avec la méthode d’échantillonnage ; elle ne peut pas rendre la géométrie fractionnaire idéale.

Vérifiez également si un élément parent utilise une transformation CSS telle que scale(0.9). Les transformations peuvent déplacer l’image sur des sous-pixels même lorsque sa largeur déclarée semble correcte.

Vérifiez les outils de conception et les moteurs de jeu

De nombreux éditeurs utilisent par défaut le redimensionnement bilinéaire ou bicubique, car ces méthodes conviennent aux photographies. Choisissez le voisin le plus proche lors du redimensionnement du pixel art.

Dans les moteurs de jeu, désactivez le filtrage des textures et surveillez :

• zoom de caméra non entier ;
• des sprites placés entre les pixels de l’écran ;
• compression de textures ;
• des mipmaps automatiques ;
• un canevas d’interface utilisateur mis à l’échelle par un facteur fractionnaire.

Une source nette ne peut pas rester nette si la caméra l’échantillonne entre les pixels.

Évitez les workflows de capture d’écran

Ne créez pas de fichier pixel art en prenant une capture d’écran d’un aperçu. Le navigateur a peut-être déjà mis à l’échelle l’aperçu et le système d’exploitation peut ajouter une mise à l’échelle de l’affichage.

Exportez directement depuis PixelTool au format PNG ou SVG. Si vous avez besoin d’un fichier PNG plus grand, choisissez une taille de sortie appropriée plutôt que d’agrandir une capture d’écran.

Recherchez les halos, pas seulement le flou

Une frange pâle ou sombre autour d’une œuvre d’art transparente est un problème connexe. Il provient souvent de pixels de bord semi-transparents créés lors de la suppression ou du redimensionnement de l’arrière-plan.

Inspectez l’image sur les arrière-plans noir et blanc. Pour les sprites classiques à bords durs, les pixels de bord doivent généralement être entièrement opaques ou entièrement transparents.

Une courte commande de débogage

1. Inspectez le fichier exporté à 100 %.
2. Confirmez que les dimensions affichées sont un multiple entier.
3. Activez le rendu voisin le plus proche ou pixelisé.
4. Supprimez les transformations fractionnaires et les positions de la caméra.
5. Désactivez le filtrage, la compression ou les mipmaps, le cas échéant.
6. Réexportez au lieu de prendre une capture d’écran.

Changez une étape à la fois. Une fois la douceur disparue, vous avez trouvé la partie du pipeline qui a besoin d’un réglage permanent.