docTutoriel pour l`introduction à l`animation en HTML5 et JavaScript
download 
Plainte Transcription
Tutoriel pour l`introduction à l`animation en HTML5 et JavaScript
Tutoriel pour
l’introduction à
l’animation en HTML5
et JavaScript
Frédéric Guégan – Olivier Fauvel-Jaeger – Giacomo Rombaut
Table des matières
1.
Introduction ............................................................................................................................... 2
2.
Création de l’environnement...................................................................................................... 2
3.
Création d’un fichier JavaScript .................................................................................................. 3
4.
Création d’un objet graphique.................................................................................................... 4
5.
Affichage du texte ...................................................................................................................... 7
6.
La gestion du son ........................................................................................................................ 8
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 1 of 8
1. Introduction
Ce tutoriel a pour but d’aider des étudiants ou des professeurs débutant en HTML5 (HyperText
Markup Langage) & JavaScript à réaliser une animation graphique avec ces deux outils.
Ce tutoriel va essentiellement aborder des notions en JavaScript afin de créer une animation.
Il n’a donc pas pour but de vous apprendre à coder en JavaScript mais uniquement de vous
apprendre à utiliser certaines fonctions. De plus la plupart des nouveautés d’HTML5 ne seront pas
abordé.
2. Création de l’environnement
Tout d’abord nous allons créer un environnement HTML5 afin que le navigateur internet puisse
interpréter votre code.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>VOTRE TITRE</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Lunar Lander</h1>
<div id=”conteneur”>
<canvas id="canvas" width="600" height="400">
<p>
This browser does not support the <code>canvas</code> element.
</p>
</canvas>
</div>
</body>
</html>
Ici, pas de réelles difficultés, il s’agit uniquement d’une page HTML basique sans aucunes
fioritures mais uniquement un cadre nommé « conteneur » contenant un « canvas ». Vous pouvez
donc rajouter une page de style de type CSS (Cascading Style Sheets) dans la balise <head> grâce à
l’inclusion suivante :
<link rel="stylesheet" href="url_page_css.css" />
On remarque que la structure d’une page HTML5 est légèrement simplifiée par rapport aux
anciennes versions.
La balise <canvas> est une spécificité du HTML5 et elle permet assez simplement de faire une
animation graphique. En attribut de cette balise on passe deux arguments, width et height qui
permettent de définir respectivement la largueur et la hauteur de notre animation.
Nous verrons plus tard dans le tutoriel l’ajout de la balise <audio> permettant de… jouer un
son.
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 2 of 8
A présent nous allons voir comment ajouter nos pages JavaScript.
L’ajout de ces pages ce fait juste avant la fin de la balise <body> grâce à l’instruction suivantes :
<script type="text/javascript" src="url_page_javascript.js"></script>
Toutes les pages JavaScript seront appelés les unes après les autres, par conséquent il faut
respecter un certain ordre c’est-à-dire que si une page JavaScript est incluse dans une autre il faut la
placer avant dans le code HTML.
Afin de faciliter l’appelle à la fonction principal de votre animation, il est préférable d’appeler
directement cette fonction au chargement du corps de la page. Pour ce fait on utilise la technique
suivante :
<body onload="initialisation_animation();">
Ainsi dès que la balise <body> est ouverte la fonction initialisation_animation() sera recherché
dans vos pages JavaScript est exécuté.
3. Création d’un fichier JavaScript
Une page de type JavaScript est relativement simple à écrire. Débutons avec notre fonction
d’initialisation.
function initialisation_animation() {
//Corps de la fonction
};
Dans le cadre de notre projet nous avons utilisé un certain de nombre de fonction
permettant de gérer une animation.
La fonction suivante est la principale fonction permettant d’afficher une animation. Elle se
compose de deux parties :
(function drawFrame () {
//1ère partie
window.requestAnimationFrame(drawFrame, canvas);
//2ème partie
context.clearRect(0, 0, canvas.width, canvas.height);
}());
_ La première partie sera suivie par le traitement des informations (interactions avec
l’utilisateur, calcul de position, changement des variables etc…
_ La seconde partie permet supprimer tout ce qui est affiché à l’écran et donc elle sera suivit
du nouvelle affichage de notre animations avec donc les nouvelles positions ou variables calculés juste
précédemment.
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 3 of 8
Deux objets sont indispensables pour notre animation. Ce sont les objets que l’on nommera
canvas et context. Ils sont propres à notre cadre canvas définit sur notre page HTML. On les récupère
de la façon suivante :
var canvas = document.getElementById(canvas),
context = canvas.getContext('2d') ;
Ces deux objets sont donc à définir avant la fonction drawFrame car elle utilise l’objet canvas.
L’objet context sera utilisé par la suite.
4. Création d’un objet graphique
Une fois notre page créer et notre affichage rafraîchit, il est quand même intéressant de savoir
y « dessiner » des éléments. Cette création n’est pas ce qu’il y a de plus évident, c’est pourquoi il existe
un certain nombre de librairies permettant de créer des objets prédéfinis. Nous avons donc d’écrit
l’utilisation d’une de ces librairies dans notre deuxième tutoriel :
« Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript à l’aide de la libraire JavaScript
Box2D »
Nous allons donc ici créer un élément de toutes pièces.
Commençons par la construction d’une ligne. Nous allons donc créer un fichier line.js qui
contiendra toutes les spécificités de notre objet ligne. Dans ce fichier nous allons faire une première
fonction qui servira à la création et l’initialisation d’une ligne.
function Line (length, color) {
if (length === undefined) { length = 60; }
if (color === undefined) { color = "red"; }
this.x = 0;
this.y = 0;
this.length = length;
this.color = color;
this.rotation = 0;
}
Les deux premières lignes du corps de la fonction permettent de définir une valeur par défaut
au deux variables length et color si elles ne le sont pas précis au moment de la création. Les deux
suivantes permettent de définir les coordonnées de base de la ligne à la position (0, 0). Attention cette
coordonnée sera par défaut en haut à gauche de l’écran. Enfin les trois dernières lignes permettent
d’initialiser les variables this.length, this.color et this.rotation par défaut. Il faut savoir que par défaut
la variable length ne sera pas accessible dans d’ autres fonction, d’où l’utilisation du this.length qui elle
le sera.
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 4 of 8
Entrons à présent dans le réel « dessin » de notre ligne. Pour ce fait nous allons créer une
deuxième fonction dans le ce même fichier line.js qui sera nommée « draw ».
Line.prototype.draw = function (context) {
};
Cette fonction est de type prototype c’est à dire qu’il s’agit d’une fonction propre à l’objet.
Cette méthode permet de rajouter des fonctions à un objet déjà existant ou de redéfinir une fonction
existante. Enfin elle prend en paramètre l’objet context car il sera nécessaire de le connaitre afin de
pouvoir lui afficher une ligne. Puis un certain nombre de fonctions sont appelés pour commencer le
dessin.
Permet de sauvegarder les context à son état d’origine.
context.save();
Permet d’appliquer un décalage si les coordonnées de base sont modifiées.
context.translate(this.x, this.y);
Permet d’appliquer une rotation à l’objet.
context.rotate(this.rotation);
Permet de définir l’épaisseur de la ligne.
context.lineWidth = 1;
Permet de définir la couleur de la ligne.
context.strokeStyle = this.color;
Permet d’initialiser le début du tracé.
context.beginPath();
Déplace le curseur à la position indiquée. Cette fonction est très utilisée pour des objets
comme des rectangles permettant de définir le centre du rectangle en son centre et donc de
commencer le tracé à un de ses coins.
context.moveTo(0, 0);
Permet de dessiner une ligne jusqu’à la position x et y. Ici on part donc du point (0, 0) et on
trace la ligne jusqu’à la coordonnées (this.length, 0). On obtiendra donc une ligne horizontale de taille
length.
context.lineTo(this.length, 0);
Affiche la ligne.
context.stroke();
Restaure le context dans son état d’origine plus la ligne tracé.
context.restore();
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 5 of 8
Voici le résumé de notre fichier line.js :
function Line (length, color) {
if (length === undefined) { length = 60; }
if (color === undefined) { color = "red"; }
this.x = 0;
this.y = 0;
this.length = length;
this.color = color;
this.rotation = 0;
}
Line.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = this.color;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(this.length, 0);
context.stroke();
context.restore();
};
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 6 of 8
5. Affichage du texte
Nous allons à présent voir comment on peut afficher du texte sur notre animation. L’affichage
du texte est très utile et peut avoir différente fonction comme l’affichage des variables du jeu, afficher
un message à l’utilisateur etc…
Tout d’abord, il faut définir la taille du texte ainsi que sa police grâce à l’instruction suivante :
context.font = "8pt Calibri";
Puis, il faut définir la couleur du texte :
context.fillStyle = "rgb(255, 255, 255)";
Cette couleur peut-être définit directement en indiquant le nom de la couleur en Anglais, en
héxadecimal ou en RGB (red, green, blue) comme dans l’exemple. Ici la couleur du texte sera donc
blanche.
Enfin il faut définir le contenu du texte ainsi que son emplacement :
context.fillText(“Votre texte”, 100, 100);
Pour résumé, dans cette exemple il y aura le texte « Votre texte » affiché à partir de la
coordonnées (100, 100) en blanc et écrit en taille 8 en calibri.
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 7 of 8
6. La gestion du son
Passons à présent à la gestion du son. En effet dans quasiment toutes les animations, un certain
nombre de bande-son sont présentes que ce soit en introduction, pour signaler un événement précis,
la fin d’une partie ou autre.
Commençons tout d’abord par rajouter l’élément nécessaire dans notre page HTML.
<audio id="player">
This browser does not support the <code>audio</code> element.
</audio>
La balise <audio> fait donc partie des nouveautés d’HTML5. Même si un affichage d’un lecteur
audio est visible après l’ajout de cette balise, on ne s’occupera pas de cet affichage.
Puis nous allons initialiser les paramètres du lecteur.
Dans un fichier JavaScript, par exemple sound.js nous allons faire une fonction qui sera appelé
lors d’un événement et qui aura pour but de jouer le son voulu.
Il faut tout d’abord initialiser le lecteur avec le son voulu :
document.getElementById("player").setAttribute('src', 'ressource/explosion.wav');
Ici on récupère l’élément « player » et on lui attribue notre son grâce à la fonction setAttribut.
Puis il suffit jouer le son avec la fonction play. Pour continuer notre exemple :
document.getElementById("player").play();
Il y a d’autres fonctions disponibles pour la balise <audio>. Comme par exemple la fonction
pause() ou encore la fonction loop.
La fonction loop s’utilise ainsi :
document.getElementById("player").loop = true;
Elle permet une boucle sur le son, et donc si le son arrive à la fin il est directement rechargé et
rejoué.
Nous arrivons à la fin de ce tutoriel. Il s’agit bien évidement que d’une ébauche de toutes les
possibilités offertes par ces deux langages couplés. En revanche, les outils présentés ici nous ont permis
de développer une animation assez simpliste sur le point de vue graphique mais contenant des
équations physique permettant de faire une représentation de la réalité. De plus nous avons réalisé
cette animation en peu de temps (environ deux semaines) en partant d’un niveau proche de zéro dans
ces langages.
Tutoriel pour l’introduction à l’animation en HTML5 et JavaScript
Page 8 of 8
