By admin in animation — 28 avr. 2019

Animation en sub-pixel

Ce petit article est né d’une discussion à propos de nuages en arrière plan qui scrollaient à une vitesse plus lente que l’avant plan (donc avec un déplacement au pixel peu fluide car ralenti) mais on peut très bien imaginer cette technique pour l’arrière plan d’un jeu de voiture type Crazy Cars et améliorer grandement le confort visuel!

/!\ Je ne suis pas un graphiste, il est impératif de donner votre travail à un graphiste pour retouche une fois les demi-déplacements calculés, voir de laisser le graphiste réaliser cette étape pour vous!

Avec votre logiciel préféré, commencez par créer une image dont la résolution horizontale est 2 ou 4 fois supérieure. Il faut modifier le ratio des pixels pour conserver le même nombre de lignes en vertical sans modifier l’apparence de ce qu’on souhaite voir affiché

Dans mon exemple je choisi des pixels mode 2 soit deux fois moins large que haut

Il est possible (ici avec photoshop d’afficher une grille de repère bien pratique pour rester dans des blocs 😉

Je créé un cercle en mode 2 et je vais le dupliquer 3 fois avec à chaque copie un décalage d’un pixel mode 2

Ensuite comme je pars d’une résolution mode 2 et que je vise une résolution mode 0, je vais réduire mon image en largeur par 4 (de 640 à 160 pixels).

Je remets visuellement mon image comme il faut en expliquant à photoshop qu’on est en mode 0 (anamorphose 2:1 ou bien format personnalisé à 2)

Au final on voit sur l’affichage mode 0 mes 4 cercles qui sont légèrement différents. Quand on y regarde en gros plan avec une règle sur le côté, on voit que la sphère se décale légèrement grâce au jeu de couleurs

Ensuite, en ce qui concerne l’animation, je pense qu’un exemple pratique vaut mieux qu’un long discours, je vous invite à regarder la fin de cette vidéo après 1H43 pour une comparaison entre avec et sans en simultané.

Techniquement et pour résumer le stream, au lieu de déplacer mon sprite de 1 pixel en 1 pixel, j’utilise une position virtuelle, ou position fractionnée. Comme j’ai 4 images de sprite correspondant à 4 étapes intermédiaires dans le pixel, il suffit de prendre la coordonnée X et d’afficher le sprite correspondant au modulo 4 de la coordonnée.

Concernant la coordonnée réelle écran d’affichage, il faut alors diviser par 4 la coordonnée X

/!\ le résultat est à regarder de préférence sur un écran à 50Hz! Un vrai CPC ou à défaut, un émulateur branché sur une télévision ou dans le pire des cas, avec l’émulation RetroVirtualMachine qui propose une interpolation du 50Hz et offre des scrollings approchants, contrairement à Winape qui fait du caca.

Pour en discuter, rendez vous sur le forum!

Animation en sub-pixel

Routines de capture du clavier

Fractales en Deux Lignes de Basic