[Pixel Art] Scintillement de trames

J'ai récemment pu donner une conférence sur le développement de jeux sur la console Playdate aux TGDays grâce aux confrères de l'association Toulouse Game Dev qui m'ont généreusement offert l'opportunité. 🙏

Je ferai sans doute un petit REX prochainement mais d'abord je vais profiter de cet article pour apporter un complément à ma partie sur le flickering qui n'a pas fonctionné en live, soit à cause de la taille de l'écran, ou bien à cause d'un différentiel de framerate. 🤷‍♂️

Donc voici déjà à quoi ressemble le flickering, qui n'est rien d'autre qu'un effet de flash non voulu lorsqu'on déplace à l'écran des trames réalisées en pixel art. Ici, l'alternance entre les pixels noirs et blancs crée cet effet. C'est évidemment plus flagrant quand c'est du 1-bit mais aussi dans le cas présent quand on regarde les gifs suivants depuis son pc (sur mobile ça scintille moins).

Comment réduire ou faire disparaitre ce scintillement

Pour éviter cet effet de flash fort disgracieux, il existe plusieurs stratégies. Voici d'abord un petit aperçu de la même animation avec un scintillement bien réduit.

ne pas utiliser des trames / dithering

C'est en effet le plus simple, si on fait juste des aplats de couleurs sans tramage, on supprime totalement l'effet. Mais on perd l'illusion de couleurs intermédiaires (niveaux de gris) offertes par la technique du tramage / dithering.

quantifier la position des images tramées

C'est la technique utilisée dans l'image ci-dessus. Au lieu de déplacer la caméra pixel par pixel, on arrondi la position sur un multiple de la taille de la trame, on appelle ça la quantification. Pour savoir la taille de la trame, on regarde tout simplement combien il faut de pixels avant répétition de la trame.

ℹ️ _Pattern 2x2 répétés 9 fois_

ℹ️ _Pattern 3x3 répétés 4 fois_

Voici le type de code à utiliser pour quantifier la position de la caméra ou un sprite. Attention à ne pas modifier directement y, il faut bien séparer la variable interpollée (=animation) de votre rendu pour garder la maitrise du temps de votre animation.

--lua
local size = 2
local finalY = (y // size) * size

Ou ici en js :

//js
var size = 2
var finalY = Math.round(y / size) * size

ne pas mixer des tailles de trames différentes

Maintenant si vous avez bien regardé l'animation améliorée, vous avez constaté qu'il y avait toujours un peu de scintillement au niveau des montagnes et du ciel au fond, et que ça n'avait corrigé que le sol. C'est simplement dû au fait, que le sol et le fond n'utlisent pas la même taille de trame (2x2 vs 3x3). Donc là, soit c'est retour auprès de l'artiste pour trouver une trame compatible, soit je fais bouger les deux parties indépendamment. Perso, j'avais pas envie de m'embêter, je trouvais le fix suffisant. A voir maintenant, si j'améliore pour la version PC 🤔.

La vidéo complète aux TGDays

Retrouvez la vidéo complète ci-dessous ! Et restez dans les parages, j'ajouterai un peu de contenu autour de la Playdate prochainement.