jeu vidéo html5 : la technique du scrolling parallax html5

 

Dans un précédent article, je faisais une démonstration de scrolling parallax réalisé en html5 et javascript. Pour ceux qui n’aurait pas vu, rendez-vous ici. Je vais maintenant vous montrer comment faire vous-même ce scrolling parallax.

 

Prérequis

Avoir lu l’article consacré au scrolling Scrolling horizontal en html5 et javascript.

 

Scrolling parallax, c’est quoi ?

Le scrolling parallax est un effet qui a été beaucoup utilisé dans les jeux d’arcade des années 80/90. Il consiste à donner un effet de profondeur grâce à la superposition de plusieurs plans qui font partie de l’arrière plan et qui défilent (ou scrollent) à des vitesses différentes.

Cet effet consiste à simuler un mouvement identique à celui que vous pourriez constater à bord d’un véhicule en regardant par les fenêtres latérales : les éléments les plus près de vous défilent plus rapidement que ceux qui sont en arrière plan.

Pour mieux comprendre, voici une illustration du scrolling parallax en vidéo :



 

Format des images à scroller et le principe du scrolling

La superposition des images pose le problème de la transparence : si vous ne choisissez pas le format d’image approprié, une image affichée sur une autre risque de la recouvrir complètement. Du coup, impossible de voir le plan du dessous et donc pas d’effet parallax possible.

Il faut donc choisir un format d’image qui gère la transparence : le format png.

 

Les images et le scrolling parallax expliqué

Nous allons créer un scrolling parallax avec 4 plans superposés avec :

Au 1er plan Au 2eme plan Au 3eme plan Au 4eme plan

La partie blanche de chaque image est transparente : si on superpose le plan 1 sur le plan 4, le fond bleu avec la lune apparaît, comme ceci :

Si entre ces deux plans, on insère le plan 3, on obtient ceci :

Après avoir superposé nos 4 plans, il suffit de les faire défiler à 4 vitesses différentes : le premier plan défilant plus rapidement que le deuxième et ainsi de suite. Ce qui donne à l’affichage :




Scrolling horizontal avec déplacement de la gauche vers la droite

 
Maintenant que vous savez quelle est la technique du scrolling parallax html5, il faut passer à la mise en œuvre qui fait l’objet d’un autre article et c’est ici.

 

Montrez nous ce que vous savez faire en scrolling, il suffit de laisser un commentaire et un lien vers vos œuvres.

 

Posté dans html5Taggé game maker, html5 games, html5 support, html5 tutorial, jeu video html5  |  4 commentaires

4 réponses à "jeu vidéo html5 : la technique du scrolling parallax html5"

Répondre