Le sprite est à la base de l'animation dans un jeu vidéo. Il s'agit d'une image contenant tous les mouvements d'un personnage que l'on affichera successivement pour produire une impression de mouvement. En HTML 5, les « canvas » permettent de réaliser cela simplement.
Le déplacement de personnages (joueurs ou ennemis) est bien souvent la base d'un jeu vidéo. Dans cet article, nous allons analyser la manière d'animer des sprites en HTML 5 grâce à la balise <canvas> étudiée dans un article précédent du présent hors-série. La création de sprites étant une tâche fastidieuse dévolue généralement aux graphistes, je n'ai réalisé aucun des sprites du présent article. J'ai simplement utilisé des sprites issus de la librairie SpritesLib distribuée sous licence CPL (Common Public Licence) : http://www.widgetworx.com/widgetworx/portfolio/spritelib.html. Ces sprites ont été légèrement retravaillés sous GIMP de manière à obtenir un fond transparent. Ceci permet de se concentrer sur le code et éventuellement de faire appel à un graphiste pour reprendre les graphismes une fois le développement fini.
Nous commencerons par définir ce qu'est l'animation d'un sprite avant de le déplacer réellement dans un canvas. Pour conclure,...
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première