Dans Tiny Garden Days, le jardin doit sembler vivant. Je voulais donc faire voler un papillon et un oiseau à travers l’écran. Pour cela, j’ai travaillé pour la première fois avec des sprites.
Qu’est-ce qu’un sprite ?
Un sprite, c’est en gros un folioscope sur une seule feuille. Plusieurs images sont placées côte à côte sur une même surface, et chacune montre le personnage dans une pose légèrement différente. Pour le papillon, les ailes sont tantôt grandes ouvertes, tantôt à moitié, tantôt presque fermées.
L’app fait ensuite défiler ces images rapidement. L’œil en fait un mouvement, et soudain le papillon bat des ailes. C’est simple, ça demande peu de mémoire et ça fonctionne ainsi depuis les premiers jeux vidéo.
Le papillon en marche arrière
L’animation a été vite intégrée. Les ailes battaient, tout était joli. Puis je l’ai fait voler à travers l’écran.
Il volait. Mais à reculons. Il regardait dans une direction et avançait dans l’autre. Battant sagement des ailes, il traversait l’écran l’arrière en premier. J’ai bien ri.
La raison est banale : je n’avais jamais indiqué à l’app dans quelle direction vole le papillon. L’animation savait seulement comment battent les ailes, pas où mène le voyage.
Ce que j’en retiens
- Les animations de sprites se font vite et apportent beaucoup de vie à une app.
- Le déplacement à l’écran est une chose à part. Je dois toujours indiquer à l’app dans quelle direction l’objet doit bouger.
- Pour la direction opposée, pas besoin de nouvelles images. Les mêmes images, simplement inversées, et il vole dans le bon sens.
Aujourd’hui, le papillon vole la tête la première. Regarde-le toi-même : Tiny Garden Days dans l’App Store. 🦋