Coder un sprite javascript html5

 

Le sprite javascript est l’une de pierres angulaires pour coder des jeux vidéo html5. Dans cet article, je vous propose donc d’afficher cet objet graphique à l’écran facilement.

Avant de le lire, je vous invite à jeter un œil à l’article Les namespaces et les objets javascript. Inspiré des articles sur le développement du jeu video Pong.

 

Préalablement

Un petit rappel sur l’affichage d’un canvas html5 avec l’article afficher des images dans un canvas html5.

Avant de débuter l’exercice et pour que vos images s’affichent correctement (et surtout s’affichent), jetez un œil à l’article loader d’images javascript. Il est préférable de charger vos images en mémoire avant de les utiliser sans quoi elles pourraient s’afficher ou pas de manière aléatoire, voire pas du tout.

 

Que peut on faire avec un sprite html5 ?

L’exercice consiste à énumérer pour un sprite html5 :
– ses caractéristiques qui deviendront ses propriétés;
– les actions que l’ont peut lui appliquer qui deviendront ses méthodes.

Les caractéristiques d’un sprite html5

Un sprite html5 étant un objet graphique que l’on peut mouvoir à l’écran, sa caractéristique la plus évidente semble être l’image qui lui est associée.

Des sprites html5 peuvent aussi avoir des dimensions différentes : deux autres caractéristiques pourraient être sa largeur et sa hauteur.

Un sprite html5 a vocation à bouger à l’écran, il a donc des coordonnées variables matérialisées par sa position dans le référentiel de l’écran : position sur l’axe des X (abscisses) et position sur l’axe des Y (ordonnées).

Les actions d’un sprite html5

Les actions qui dérivent des caractéristiques précédentes et qui permettent de spécifier :
– l’image qui lui est associée;
– ses dimensions;
– sa position sur l’écran.

On peut ajouter la détection d’une collision avec un autre sprite html5.

Bien que non utile dans le cadre du jeu Pong html5, on pourrait ajouter :
– donner un mouvement horizontal;
– donner un mouvement vertical;
– les deux à la fois.

 

Le code javascript de l’objet sprite html5

Pourquoi je parle d’objet et non pas de classe ?

Cela résulte de la nature même de javascript qui est un langage objet par prototype et non par classe.

Javascript utilise des objets javascript prototype à partir desquels de objets identiques sont créés.

L’intérêt du prototypage en javascript est de pouvoir modifier un objet issu d’un prototype javascript (modifier ses propriétés et méthodes) sans que cela n’impacte le prototype ou encore les autres objets issus de ce prototype javascript.

La création du prototype

L’idée est de construire un objet prototype sprite utilisable dans tout jeu utilisant des objets graphiques animés.

L’idéal est de créer, en première approche, un namespace dédié à l’affichage game.display. Ce namespace intégrant l’objet javascript sprite et une factory permettant de créer un objet javascript à partir du prototype.

Dans le dossier jsdu projet, créez un nouveau fichier nommé game.display.js qui encapsulera tout le code relatif à la classe sprite :

Le namespace :

var game = {};
game.display = {
}

dans lequel vous intégrez l’objet prototype javascript sprite :

var game = {};
game.display = {
 sprite : {
 },
}

auquel vous ajoutez la factory createSprite :

var game = {};
game.display = {
 sprite : {
 },

 createSprite : function() {
  var sprite = Object.create(this.sprite);
  return sprite;
 }
}

Dans le prototype javascript, vous allez créer et initialiser les propriétés énumérées dans le paragraphe précédent : l’image, la taille et la position.

var game = {};
game.display = {
 sprite : {
  image : null,
  width : null,
  height : null,
  posX : null,
  posY : null
 },

 createSprite : function() {
  var sprite = Object.create(this.sprite);
  return sprite;
 }
}

Il ne reste plus qu’à implémenter les méthodes énumérées aussi dans le paragraphe précédent : spécifier l’image, la taille, afficher le sprite html5, tester les collisions et mouvoir horizontalement et verticalement.

Il suffit d’intégrer ces méthodes dans l’objet sprite du namespace.

Par exemple, ajoutez au constructeur d’objets un paramètre chemin path et instancier l’objet Image à partir de ce chemin :

var game = {};
game.display = {
....

 createSprite : function(imagePath) {
  var sprite = Object.create(this.sprite);
  sprite.image = new Image();
  sprite.image.src = imagePath;
  return sprite;
 }
}

Pour spécifier la taille, rien de complexe :

var game.sprite = {
 sprite : {
  image : null,
  width : null,
  height : null,
  posX : null,
  posY : null,

  setSize : function(width, height) {
   this.width = width;
   this.height = height;
  }
 },

 createSprite : function(imagePath) {
  var sprite = Object.create(this.sprite);
  sprite.image = new Image();
  sprite.image.src = imagePath;
  return sprite;
 }
}

Pour l’affichage, n’oubliez pas que vous êtes dans un cadre html5 et donc que l’affichage d’un objet graphique se fait par le biais d’un canvas html5, notamment un html5 canvas context 2d.

C’est le html5 canvas context qui affiche le sprite html5 par le biais de sa méthode drawImage.

La méthode d’affichage (que vous appelerez drawImageOnCanvasContext) de la classe sprite doit donc utiliser un html5 canvas context pour afficher le sprite.

Donner en paramètre à la méthode displayOnCanvasContext un html5 canvas context parait donc indispensable.

Pourquoi ne pas intégrer le html5 canvas context en propriété de la classe et ainsi éviter ce paramètre dans la méthode render ?

Cela évite le couplage entre le sprite html5 et le canvas : passer le html5 canvas context permet d’afficher le sprite dans tout canvas html5.

Au sein d’un même jeu, si vous deviez afficher un même sprite html5 dans des canvas différents obligerait à recréer un sprite (une ligne de code supplémentaire) ou bien à ajouter une méthode dans la classe permettant de modifier le html5 canvas context rattaché au sprite html5 (aussi une ligne de code supplémentaire).

La manière de faire que je préconise me semble plus conforme à une bonne pratique et générera un code plus court.

Le code :

var game = {};
game.display = {
 sprite : {
  image : null,
  width : null,
  height : null,
  posX : null,
  posY : null,

  setSize : function(width, height) {
   this.width = width;
   this.height = height;
  },

  render : function (canvasContext, x, y) {
   this.posX = x;
   this.posY = y;
   canvasContext.drawImage(this.image, this.posX, this.posY);
  }
 },

 createSprite : function(imagePath) {
  var sprite = Object.create(this.sprite);
  sprite.image = new Image();
  sprite.image.src = imagePath;
  return sprite;
 }
}

En ce qui concerne les collisions, il suffit de reprendre le code existant dans le jeu jeu vidéo html5 javascript Pong et de l’encapsuler dans la méthode strike en adaptant les références.

Plutôt que de mettre tous les paramètres qui correspondent à des propriétés du sprite javascript html5, mettez en paramètre un objet sprite.
Ensuite faites un copier coller du corps de la fonction dans le corps de la méthode collide, puis remplacez les noms des variables utilisées par les propriétés de la classe :

var game = {};
game.display = {
 sprite : {
  ...

  render : function (canvasContext, x, y) {
   this.posX = x;
   this.posY = y;
   canvasContext.drawImage(this.image, this.posX, this.posY);
  },

  collide : function (sprite) {
    if (!(sprite.posX> this.posX + this.width
        || sprite.posX + sprite.width < this.posX
        || sprite.posY > this.posY + this.height
        || sprite.posY + sprite.height < this.posY )) {
        // Collision
        return true;
    }
    return false;
  }

 },

 ...
}

Pour les 2 dernières méthodes, vous n’en avez pas besoin pour le moment. Gardez les sous le coude en les créant sans les implémenter. Le développement itératif fera le reste : vous les implémenterez lorsque vous en aurez besoin :

var game = {};
game.display = {
 sprite : {
  ...

  collide : function (sprite) {
    if (!(sprite.posX> this.posX + this.width
        || sprite.posX + sprite.width < this.posX
        || sprite.posY > this.posY + this.height
        || sprite.posY + sprite.height < this.posY )) {
        // Collision
        return true;
    }
    return false;
  },

  horizontalMove : function () {
  },

  verticalMove : function () {
  }
 },

 ...
}

 

Comment utiliser la classe sprite html5 ?

Dans le contexte du jeu Pong, le sprite html5 de la balle s’initialiserait de la manière suivante en ayant préalablement initialiser un canvas html5 context :

// creation et initialisation
var ball = game.display.createSprite("./img/spriteBallSmall.png");
ball.setSize(10, 10);

// affichage
ball.render(canvasRaquettesContext, 300, 300);

Remarquez que l’usage devient plus simple, et plus lisible.

 

Si vous souhaitez obtenir le code source, faites un commentaire. Je me ferai une joie de vous l’envouer personnellement.
Faites vos remarques ou propositions d’améliorations. Si cet article vous a plu ou aidé, faites le savoir par un commentaire ou sur les réseaux sociaux.

 

Posté dans javascript / html5Tagged HTML5, html5 javascript, javascript, sprites, sprites html5 js  |  3 commentaires

3 réponses à "Coder un sprite javascript html5"

Répondre