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 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. 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. 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 : «à 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. 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(); 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(); }; 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. 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. Page 8 of 8