Afficher des sprites avec javascript html5
Un élément incontournable dans le développement de jeu vidéo 2D est l’affichage des sprites. En effet, la plupart des jeux vidéos utilisent des objets graphiques déplaçables à l’écran. Je vous montre comment le faire avec html5 et javascript.
Prérequis
– savoir ce qu’est javascript et l’avoir pratiqué un peu;
– avoir lu l’article sur le canvas html5 sinon savoir ce qu’est html5, un canvas html5, un contexte de canvas.
La balise html IMG
Pour ajouter une image à une page web (html5), vous utilisez la balise html5 image dont les principaux attributs sont :
– src : spécifie l’emplacement de l’image du fichier de l’image affichée;
– width : spécifie la largeur de l’image;
– height : spécifie la hauteur de l’image;
– alt : spécifie le texte qui sera affiché lorsque l’image spécifiée par src ne sera pas accessible;
– title : spécifie le contenu de l’info bulle lors du survol de l’image par la souris.
La syntaxe de la balise img.
<img src='' width='' height='' alt='' title=''>L’objet Javascript Image
L’objet javascript Image donne accès aux balises image d’une page html. Cet objet rend possible leur manipulation par le biais de leurs propriétés. Il est par exemple possible d’en modifier la forme en utilisant la propriété src.
Dans le contexte d’un jeu vidéo, vous n’utilisez pas directement la balise html img, mais seulement l’objet javascript Image qui permet de lui associer un fichier image et de l’afficher dans le canvas.
Pour créer l’image en javascript, il suffit de faire.
let imageShooter = new Image();Puis par exemple, pour lui associer le fichier image vaisseauSpatial.png.
imageShooter.src = "vaisseauSpatial.png";Affichage du sprite dans le canvas html5
L’affichage de l’image dans le canvas passe par l’objet context du canvas qui s’obtient par la méthode getContext(‘2d’) de la classe canvas.
let canvasGame2DContext = monCanvas.getContext('2d');Enfin, pour l’afficher dans le canvas utilisez la méthode drawImage de l’objet contexte du canvas.
Cette méthode prend :
– en premier paramètre un objet javascript Image;
– en deuxième et troisième paramètre, la position de l’image dans le canvas sous forme de coordonnées (positionXSprite pour l’abscisse, positionYSprite pour l’ordonnée).
Ce qui donne.
canvasGame2DContext.drawImage(imageVaisseau,positionXSprite,positionYSprite);Attention, le point d’ancrage dans le canvas de l’image est le point situé le plus en haut et le plus à gauche de l’image.
Remarquez qu’il n’y a rien de compliquer.
