jeu video html5 : coder un scrolling parallax




 

Voici l’épilogue des articles sur le scrolling parallax, je vous montre comment on réalise un scrolling parallax en html5 et javascript. Je vous montre comment il est simple de faire un scrolling parallax en html5 et javascript.

 

Prérequis

Avoir lu les articles suivants :
Scrolling horizontal en html5 et javascript;
Démo d’un scrolling parallax en html5 et javascript;
Le principe du scrolling parallax html5 et javascript.

 

Le canvas html5 nécessaire au scrolling parallax

En html5, on commence par créer un canvas html5 auquel une donne une taille équivalente à celle de nos 4 plans :

<canvas id="theCanvas" width="320" height="240"  style="border: 1px solid #000000;"/>

Jusque là, rien de très compliqué. Mais rassurez vous la suite ne l’est pas non plus.

 

Initialisation

On isole toujours notre code javascript de tout autre code de page par le biais d’une fonction anonyme auto exécutée comme suit :

( function() {
 // zone de code protégé
}());

Le code source de notre page html prend donc la forme suivante :

<html>
 <script>
( function() {
 // zone de code protégé
}());
 </script>
 <body>
	<canvas id="theCanvas" width="320" height="240"  style="border: 1px solid #000000;"/>
 </body>
</html>

 

Le canvas context

A l’initialisation, il nous faut récupérer notre canvas ainsi que son contexte. Bien entendu, nous aurions pu créer le canvas directement en javascript.

Nous créons une fonction d’initialisation appelée au chargement de la page, sur l’évènement javascript load, qui initialise une variable canvas2DContext comme suit :

var canvas;
var canvas2DContext;
var initialisation = function() {
 canvas = document.getElementById("theCanvas");
 canvas2DContext = canvas.getContext('2d');
}

Appel de la fonction au chargement de la page :

window.addEventListener('load', function() {
 initialisation();
});

Pour plus de détails à ce propos, référez vous à l’article Le canvas html5.

Au final, le code javascript devient :

( function() {

var canvas;
var canvas2DContext;
var initialisation = function() {
 canvas = document.getElementById("theCanvas");
 canvas2DContext = canvas.getContext('2d');
}

window.addEventListener('load', function() {
 initialisation();
});

}());

 

Déplacement du premier plan du scrolling

Nous enrichissons la fonction d’initialisation par la déclaration de l’image de notre premier plan :

var canvas;
var canvas2DContext;
var imagePlan1 = new Image();
var initialisation = function() {
 canvas = document.getElementById("theCanvas");
 canvas2DContext = canvas.getContext('2d');
 imagePlan1.src = "plan1.png";
}

Nous allons faire scroller la même image 2 fois l’une derrière l’autre de la gauche vers la droite pour simuler la continuité du scrolling : le scrolling tourne en boucle.

A l’initialisation, nous affichons cette image 2 fois : la première recouvre complètement le canvas html5 et la deuxième est affichée en dehors du canvas html5 à la gauche de la première.

La deuxième image a donc une abscisse négative correspondant à sa longueur.

On crée donc deux variables :
– la variable plan1X1 stockant l’abscisse de la première image;
– la variable plan1X2 stockant l’abscisse de la deuxième image.

Elles sont initialisées comme suit :

var plan1X1 = 0;
var plan1X2 = -imagePlan1.width;

On l’intègre à notre code existant :

var canvas;
var canvas2DContext;
var imagePlan1 = new Image();
var plan1X1 = 0;
var plan1X2 = 0;
var initialisation = function() {
 canvas = document.getElementById("theCanvas");
 canvas2DContext = canvas.getContext('2d');
 imagePlan1.src = "plan1.png";
 plan1X2 = -imagePlan1.width;
 canvas2DContext.drawImage(imagePlan1,plan1X1,0);
 canvas2DContext.drawImage(imagePlan1,plan1X2,0);
}

Pour donner l’illusion du déplacement des images, il ne reste plus qu’à :
– les déplacer simultanément de la gauche vers la droite de 5 pixels à la fois;
– et les réafficher chaque fois que les abscisses sont incrémentées.

On crée alors une nouvelle fonction scroll chargée de réaliser ces 2 opérations :

function scroll() {
 plan1X1++;
 plan1X2++;
 canvas2DContext.drawImage(imagePlan1,plan1X1,0);
 canvas2DContext.drawImage(imagePlan1,plan1X2,0);
}

Et appeler cette fonction à intervalles réguliers via l’instruction setinterval qui prend en paramètres le nom d’une fonction à appeler et l’intervalle d’appel exprimé en millisecondes.

Le code javascript :

( function() {

 var canvas;
 var canvas2DContext;
 var imagePlan1 = new Image();
 var plan1X1 = 0;
 var plan1X2 = 0;
 var initialisation = function() {
  canvas = document.getElementById("theCanvas");
  canvas2DContext = canvas.getContext('2d');
  imagePlan1.src = "plan1.png";
  plan1X2 = -imagePlan1.width;
  canvas2DContext.drawImage(imagePlan1,plan1X1,0);
  canvas2DContext.drawImage(imagePlan1,plan1X2,0);
 }

 function scroll() {
  plan1X1++;
  plan1X2++;
  canvas2DContext.drawImage(imagePlan1,plan1X1,0);
  canvas2DContext.drawImage(imagePlan1,plan1X2,0);
 }

 window.addEventListener('load', function() {
  initialisation();
  setInterval(scroll, 100);
 });

}());

Et voici le rendu :

Le rendu n’est pas satisfaisant puisque nos palmiers laissent des traces en se déplaçant.

Pour pallier à cela, il suffit simplement d’effacer le canvas html5 par le biais de l’instruction clearRect, entre deux affichages. On modifie la fonction scroll en ce sens :

 function scroll() {
  plan1X1++;
  plan1X2++;
  canvas2DContext.clearRect(0, 0, canvas.width, canvas.height);
  canvas2DContext.drawImage(imagePlan1,plan1X1,0);
  canvas2DContext.drawImage(imagePlan1,plan1X2,0);
 }

Et là, le rendu est nickel. Mais le travail n’est pas terminé car dès que les 2 images auront scrollé, le canvas html5 deviendra blanc : plus de scrolling.

En réalité, les images continuent d’avancer mais en dehors du canvas html5. Nous devons donc réinitialiser l’abscisse de chacune d’elles dès qu’elle sort du canvas html5 : une image sort de la droite du canvas html5 dès que son abscisse atteint la limite du canvas html5 représentée par sa taille (canvas.width).

Nous ajoutons donc un test qui vérifie que l’abscisse dépasse la limite du canvas et qui dans ce cas la réinitialise.

La réinitialisation consiste à replacer l’image à la gauche de celle affichée à l’écran : une image atteint la limite du canvas html5 lorsque l’image qui la suit y est pleinement affichée.

Pour plus détails, référez vous à l’article scrolling html5 en javascript

Nous ajoutons les 2 tests suivants :

if ( plan1X1 > canvas.width ) {
 plan1X1 = -canvas.width;
}
if ( plan1X2 > canvas.width ) {
 plan1X2 = -canvas.width;
}

Remarquez que le fait d’incrémenter la position des images puis de tester si elle dépasse la limite du canvas html5 revient en fait à boucler sur une série de valeurs allant de -320 à 320.

Nous pouvons donc simplifier l’incrément et le test en utilisant la fonction modulo (le reste de la division) sur 640, valeur qui correspond au nombre de points qui séparent -320 et 320 :

plan1X1 = (plan1X1 + 1) % 640;
plan1X2 = (plan1X2 + 1) % 640;

Avec cette formule, nos valeurs vont boucler de 0 à 640, or nos valeurs d’affichage vont de -320 à 320. Il nous faut donc modifier l’appel de la fonction drawImage pour que l’affichage se fasse correctement :

canvas2DContext.drawImage(imagePlan1,plan1X1-320,0);
canvas2DContext.drawImage(imagePlan1,plan1X2-320,0);

Enfin il faut aussi modifier les valeurs d’affichage de départ de nos 2 images :

plan1X1 = 0;
plan1X2 = canvas.width;

Le code complet :

( function() {
 var canvas;
 var canvas2DContext;
 var imagePlan1 = new Image();
 var plan1X1 = 0;
 var plan1X2 = 0;
 var initialisation = function() {
  canvas = document.getElementById("theCanvas");
  canvas2DContext = canvas.getContext('2d');
  imagePlan1.src = "plan1.png";
  plan1X2 = canvas.width;
 }

 function scroll() {
  plan1X1 = (plan1X1 + 1) % 640;
  plan1X2 = (plan1X2 + 1) % 640;
  canvas2DContext.clearRect(0, 0, canvas.width, canvas.height);
  canvas2DContext.drawImage(imagePlan1,plan1X1-320,0);
  canvas2DContext.drawImage(imagePlan1,plan1X2-320,0);
 }

 window.addEventListener('load', function() {
  initialisation();
  setInterval(scroll, 100);
 });

}());

 

Ajout des 3 autres plans pour l’effet parallax

Il ne reste plus qu’à ajouter nos 3 autres plans, et de faire scroller les 4 plans à des vitesses différentes. La vitesse la plus élévée pour le premier plan et la vitesse la moins élevée pour le quatrième.

3 autres plans donc 3 nouvelles images donc 3 nouvelles instances :

var imagePlan1 = new Image();
var imagePlan2 = new Image();
var imagePlan3 = new Image();
var imagePlan4 = new Image();

associées à 3 fichiers images distincts :

imagePlan1.src = "plan1.png";
imagePlan2.src = "plan2.png";
imagePlan3.src = "plan3.png";
imagePlan4.src = "plan4.jpg";

Chaque image étant affichée 2 fois, il nous faut ajouter que 3 x 2 variables pour les abscisses :

var plan1X1 = 0;
var plan1X2 = 0;
var plan2X1 = 0;
var plan2X2 = 0;
var plan3X1 = 0;
var plan3X2 = 0;
var plan4X1 = 0;
var plan4X2 = 0;

Et initialisez la moitié d’entre elles à la valeur canvas.width.

plan1X2 = canvas.width;
plan2X2 = canvas.width;
plan3X2 = canvas.width;
plan4X2 = canvas.width;

Et que l’ont fait boucler de -320 à 320 à 4 vitesses différentes :

plan1X1 = (plan1X1 + 4) % 640;
plan1X2 = (plan1X2 + 4) % 640;
plan2X1 = (plan2X1 + 3) % 640;
plan2X2 = (plan2X2 + 3) % 640;
plan3X1 = (plan3X1 + 2) % 640;
plan3X2 = (plan3X2 + 2) % 640;
plan4X1 = (plan4X1 + 1) % 640;
plan4X2 = (plan4X2 + 1) % 640;

Puis afficher chacune des images en prenant soin d’afficher les plans du fond en premier, dans le cas inverse on ne verrait que le quatrième scrollé :

canvas2DContext.drawImage(imagePlan4,plan4X1 - 320,0);
canvas2DContext.drawImage(imagePlan4,plan4X2 - 320,0);
canvas2DContext.drawImage(imagePlan3,plan3X1 - 320,0);
canvas2DContext.drawImage(imagePlan3,plan3X2 - 320,0);
canvas2DContext.drawImage(imagePlan2,plan2X1 - 320,0);
canvas2DContext.drawImage(imagePlan2,plan2X2 - 320,0);
canvas2DContext.drawImage(imagePlan1,plan1X1 - 320,0);
canvas2DContext.drawImage(imagePlan1,plan1X2 - 320,0);

Vous remarquerez que pour chaque plan supplémentaire on ajoute :
– une image du plan à scroller;
– une variable pour l’image;
– deux variables pour les abscisses d’affichage des deux images l’une initialisée à zéro l’autre à la valeur de la taille du canvas html5;
– l’incrémentation des abscisses;
– l’affichage de chacune des images.

Le code javascript complet :

( function() {

 var canvas;
 var canvas2DContext;
 var imagePlan1 = new Image();
 var imagePlan2 = new Image();
 var imagePlan3 = new Image();
 var imagePlan4 = new Image();
 var plan1X1 = 0;
 var plan1X2 = 0;
 var plan2X1 = 0;
 var plan2X2 = 0;
 var plan3X1 = 0;
 var plan3X2 = 0;
 var plan4X1 = 0;
 var plan4X2 = 0;

 var initialisation = function() {
  canvas = document.getElementById("theCanvas");
  canvas2DContext = canvas.getContext('2d');
  imagePlan1.src = "plan1.png";
  imagePlan2.src = "plan2.png";
  imagePlan3.src = "plan3.png";
  imagePlan4.src = "plan4.jpg";
  plan1X2 = canvas.width;
  plan2X2 = canvas.width;
  plan3X2 = canvas.width;
  plan4X2 = canvas.width;
 }

 function scroll() {
  plan1X1 = (plan1X1 + 4) % 640;
  plan1X2 = (plan1X2 + 4) % 640;
  plan2X1 = (plan2X1 + 3) % 640;
  plan2X2 = (plan2X2 + 3) % 640;
  plan3X1 = (plan3X1 + 2) % 640;
  plan3X2 = (plan3X2 + 2) % 640;
  plan4X1 = (plan4X1 + 1) % 640;
  plan4X2 = (plan4X2 + 1) % 640;
  canvas2DContext.clearRect(0, 0, canvas.width, canvas.height);
  canvas2DContext.drawImage(imagePlan4,plan4X1 - 320,0);
  canvas2DContext.drawImage(imagePlan4,plan4X2 - 320,0);
  canvas2DContext.drawImage(imagePlan3,plan3X1 - 320,0);
  canvas2DContext.drawImage(imagePlan3,plan3X2 - 320,0);
  canvas2DContext.drawImage(imagePlan2,plan2X1 - 320,0);
  canvas2DContext.drawImage(imagePlan2,plan2X2 - 320,0);
  canvas2DContext.drawImage(imagePlan1,plan1X1 - 320,0);
  canvas2DContext.drawImage(imagePlan1,plan1X2 - 320,0);
 }

 window.addEventListener('load', function() {
  initialisation();
  setInterval(scroll, 100);
 });

}());

Pour la démo c’est ici.

[important]Dites nous ce que vous pensez de cette méthode pour faire du scrolling parallax html.[/important]

 

Posté dans html5Taggé canvas html5, jeu video html5, scrolling html5, scrolling parallax html5  |  1 commentaire

Une réponse à "jeu video html5 : coder un scrolling parallax"

Répondre

*