Javascript html5 afficher des sprites

 

Un élément incontournable dans le développement de jeu vidéo 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, vous faites :

var imageVaisseau = new Image();

Puis par exemple, pour lui associer le fichier image vaisseauSpatial.png :

imageVaisseau.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 :

var 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 :

point d'ancrage d'un sprite

point d’ancrage d’un sprite

 
Remarquez qu’il n’y a rien de compliquer.

 
Pour aller un peu plus loin, l’article Coder une classe javascript de sprites html5 vous montre comment transformer ce code en une classe javascript et ainsi le rendre plus lisible.

 

Si vous avez aimé cet article, partagez le.

 

Si vous constatez des coquilles, ou avez des remarques, une autre solution ou encore souhaitez manifester votre satisfaction de ce tuto, commentez.

 

Posté dans html5Taggé HTML5, javascript, jeu vidéo, sprite, sprite jeu vidéo  |  4 commentaires

4 réponses à "Javascript html5 afficher des sprites"

Répondre