Support de TD HTML5
MASTER MAPI, parcours Jeu vidéo MAJE1
Version 11/01/15
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 2/33
Contents
1. Créer un déplacement ..................................................................................................................... 3
2. Pour changer la couleur d’un élément (à finir) ............................................................................. 11
3. Faire une action sur un clic (changer la taille d’un objet) ............................................................. 13
4. Afficher une boite de dialogue ...................................................................................................... 18
5. Pour créer un bouton interagissant avec une animation .............................................................. 20
6. Comment animer un personnage ................................................................................................. 23
7. Télécommande du Bonhomme animé .......................................................................................... 29
L’installation de Google Web Designer (GWD) est ici : http://www.google.fr/webdesigner/
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 3/33
1. Créer un déplacement
Créer un nouveau projet
Pour faire un cercle
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 4/33
Pour information, l’outil de sélection est ici :
Pour changer de couleur il suffit de sélectionner la forme et à droite dans propriété de cliquer sur la
couleur choisie (ou de directement cliquer sur une couleur une fois la forme créée)
Donner un nom à l’objet que l’on va manipuler
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 5/33
Bouton droit et créer un groupe
Ceci fait apparaître le groupe du cercle dans l’échelle de temps
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 6/33
Possibilité de nommer le groupe en double cliquant (attention il doit avoir un nom/ID différent des
autres éléments
Dans l’échelle de temps du groupe fraichement créé (quelques secondes plus loin) on fait bouton
droit « Insérer une image clé »
Le résultat
Maintenant pour créer une animation de déplacement, il faut préciser où est l’image au début (à
00 :00 :00) et où elle est à la fin (à la nouvelle image clé).
En gros au triangle de gauche le cercle est à une position.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 7/33
Cercle au début
Ensuite sélectionner le triangle de droite, puis déplacer le cercle ailleurs sur la feuille
Cercle à présent déplacé
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 8/33
Pour jouer l’animation, cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône
circulaire à côté
Il est possible de faire boucler l’animation en cliquant sur la flèche courbée (boucle : aucune, X fois,
ou à l’infini)
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 9/33
En sélectionnant 2 fois (choix de 2 répétitions ci-dessus), l’échelle de temps est dupliquée.
Il est aussi possible d’avoir l’aperçu dans le navigateur web, ceci permet en cliquant sur le bouton ci-
dessous, ceci à l’avantage de lancer tout ce qui est à exécuter, car le bouton lecture ne lance pas tout
ce qui est script. Donc si le bouton lecture ne fait pas marcher votre essai, essayez avant de lancer
avec le bouton « Aperçu ».
Le bouton publier permet de créer un HTML utilisable seul, possibilité de créer un zip aussi :
Fenêtre de génération du fichier (les puristes diraient exportation)
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 10/33
Message surtout à ceux qui sont allergiques au code : Saviez-vous que toutes les actions que vous
avez faites ont généré du code HTML5 ? Et oui, vous avez codé en HTML
La preuve en image :
Voilà votre œuvre. Simple et rapide de coder, non ?
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 11/33
2. Pour changer la couleur d’un élément (à finir)
Idem que pour déplacer un élément lors d’une ani
mation, mais ici il suffit de changer la couleur
Attention il faut faire cela avec un objet de type « div ».
On lui donne une couleur au début
Ensuite insérer une image clé
Ici c’est le pays du bleu
Ensuite sélectionner le triangle de droite, puis placer le cercle où l’on veut sur la feuille
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 12/33
Et nous mettons le pays du corail
Pour jouer l’animation, cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône à côté
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 13/33
3. Faire une action sur un clic (changer la taille d’un objet)
Créer un élément Div (et lui donner une couleur car il sera plus lisible)
Lui donner un nom
Clic droit sur le div pour créer un évènement
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 14/33
Puis paramétrer l’évènement
D’où part l’action
Sur quel évènement on régit
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 15/33
Sur quoi est ce que l’on agit (des propriétés CSS d’éléments existants, c’est une figure de style)
Sur quel élément on agit (lui-même)
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 16/33
On change ses propriétés
Ici la largeur, taille et on donne un temps d’exécution pour faire une transition en douceur
Attention : marquer le nom des propriétés en anglais, marquer les unités (quand il y en a) et les
majuscules et minuscules n’ont pas l’air d’avoir d’importance
Les évènements se retrouvent à droite
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 17/33
Pour tester faire l’aperçu qui va exécuter dans un navigateur web :
Avant clic
Après clic
Well done.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 18/33
4. Afficher une boite de dialogue
Et maintenant on va modifier le fichier précédent (faire une sauvegarde intermédiaire si vous voulez
conserver le travail précédent et enregistrer sous un autre nom) pour mettre une boite de dialogue à
la place.
On retourne dans les évènements pour modifier
Et on change le type d’action
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 19/33
Pour afficher une boite de dialogue
Bravo, vous avez fait du code HTML5.
Vous avez noté comment despécifier les caractères spéciaux ?
Traduction : rendre utilisable les caractères (dans une chaîne de caractère pour afficher un message à
l’utilisateur par exemple) qui sont normalement dans la syntaxe du code. Sans cela vous auriez eu
une erreur car le ‘ marque le début et la fin de la chaîne de caractère.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 20/33
5. Pour créer un bouton interagissant avec une animation
Créer un bouton comme dans la partie « Faire une action sur un clic (changer la taille d’un objet) »
Faire un élément qui bouge dans l’espace de travail.
Dans l’échelle de temps, créer un « évènement » et un « libellé » au tout début de l’échelle de temps
en (avant de demander quoi est où, la capture d’écran est là pour aider ) :
Mettre l’échelle de temps au début (vous obtenez un trait bleu vertical sur toute la hauteur)
En cliquant sur le losange (pour l’évènement) et sur le triangle orienté en bas (pour le libellé)
Possibilité de renommer le libellé en faisant bouton droit sur le libellé (ici nommé « Debut »)
La mission est accomplie quand un losange apparait dans la zone chronométrée de l’échelle
de temps (ou demi losange si en tout début) et que le libellé correspondant à l’évènement
apparait sur la même zone
Il ne reste plus qu’à mettre le code relatif à l’action :
On ajoute un évènement au bouton (dont l’id est déjà définit, n’est-ce pas ?) :
Qui va déclencher un évènement ? Le bouton.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 21/33
De quelle manière on va se dire, « On me demande quelque chose » ? En cliquant.
Sur quoi je vais agir ? L’échelle de temps, où l’on repositionne à une zone donnée et on lance
l’animation.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 22/33
Qu’est-ce que j’anime ? Ici la page entière.
A quel repère temporel vais-je ? Celui que j’ai créé, en gros ce bouton va à chaque fois relancer
l’animation à partir du début. Car nous avons mis le losange « Début » au début. Si vous me suivez.
Et maintenant action ! On teste dans le navigateur.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 23/33
6. Comment animer un personnage
L’idée est de dessiner un personnage et de lui ajouter deux animations en même temps, la
première une translation de gauche à droite, qui va simuler un déplacement de la gauche vers la
droite. En plus nous allons ajouter en simultané une oscillation qui va simuler un pas, c’est-à-dire un
mouvement allant de l’état à l’état en boucle : .. .. .. .. ..
. Les deux mouvements cumulés donnent l’impression d’avoir un mouvement de marche de
gauche à droite. Il faut juste bien gérer la durée d’une animation par rapport à l’autre pour que le
rendu soit réaliste et que le bonhomme ne traîne pas trop la jambe. Sinon dessinez aussi une canne
ou l’appeler House.
Créer sur le calque courant, un bonhomme à gauche en position verticale , on groupera tous ses éléments (ronds, traits de jambe, de bras, etc. car il est livré en kit) et que l’on appellera « Bonhomme » (aïe, aïe, attention aux majuscules).
Faire comme précédemment et créer le déplacement de gauche à droite.
Dans l’échelle de temps (quelques secondes plus loin) on fait bouton droit « Insérer une image clé »
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 24/33
On se positionne sur la dernière image et on déplace le bonhomme à droite de l’image.
Et on déplace le personnage sur la droite de la feuille.
Testez l’animation du personnage qui se déplace (ça tient plus de la télékinésie pour l’instant),
cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône à côté.
A présent on va simuler la marche.
Avec l’outil de sélection on double clic sur le bonhomme.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 25/33
Ceci a changé dans la fenêtre de travail (car le Bonhomme est un groupe d’éléments), nous sommes
rentré à un niveau de profondeur supplémentaire (dans le groupe), pour ressortir il suffira de cliquer
sur le « DIV » (toujours ci-dessous). Avez-vous remarqué un changement dans l’échelle de temps ?
Il n’y a plus aucune animation. Et oui nous sommes allés plus en profondeur, au niveau supérieur (le
précèdent hors groupe) nous déplacions le personnage de gauche à droite. A présent nous sommes
rentrés dans le groupe, nous pouvons ajouter une nouvelle animation, qui va être l’oscillation (ou
inclinaison si vous préférez).
Avant cela sélectionné les éléments et fait un nouveau groupe que l’on appellera « Bonhomme2 »
(aïe, aïe, toujours attention aux majuscules). Le fait d’avoir un groupe permet à GWD de considérer
l’ensemble comme un seul élément, et non un ensemble de pièces détacher. Donc plus simple à
animer.
Faisons l’animation en mode simplifié pour commencer (ceci va changer et va vous plaire).
Cliquez sur
La première case est l’écran actuel. Il suffit de cliquer sur le « + » et de faire pivoter le personnage
pour créer le deuxième écran de l’animation.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 26/33
Pour le faire pivoter, prendre le bon outil, l’outil de rotation
Cliquer sur le personnage et déplacer le centre de rotation du coin, vers le centre du personnage.
De l’angle
Au centre (aimanté sur le centre quand on passe à proximité)
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 27/33
Avec cet outil on peut faire pivoter suivant 3 axes, comme pour faire de la 3D. Ici nous allons utiliser
seulement la roue bleue pour incliner le personnage.
On reclique sur le « + » de l’échelle de temps et on redresse le personnage
Et voilà c’est fait. Appuyez sur lecture.
Il est possible de changer la durée de chaque phase en retournant dans le mode avancé d’animation
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 28/33
Pour allonger la durée de l’animation, il suffit de déplacer vers la droite (pour allonger la durée) les
losanges et demis losanges de la ligne d’animation.
Autre détail qui a son importance, il vaut mieux mettre cette animation (l’inclinaison au sein du
groupe) en infini, sinon le personnage ne va s’incliner qu’une seule fois, ce qui est un peu léger.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 29/33
7. Télécommande du Bonhomme animé
Maintenant que ceci est fait, nous allons créer une télécommande
Comme vous l’avez déjà fait, nous allons ajouter des évènements et des libellés « Debut » et « Fin ».
Faire 4 boutons « Lecture », « Stop », « Arriere » et « Avant » :
Simples
Ou plus travaillés, aucune importance le tout est de s’y retrouver (pour info j’ai utilisé la plume)
Ajouter des évènements sur les boutons. Chaque évènement nous déplace la position de la timeline
(en gros les boutons permettent de voyager dans le temps) :
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 30/33
Vous êtes grands, vous devriez y arriver tout seul comme vous avez déjà fait un travail similaire
avant.
Pour Arriere et Avant, vous aurez une question, à laquelle vous saurez répondre seul en réfléchissant
5 secondes question incluse
Une fois ceci fait, vous remarquez que tout va bien, ou presque. La télécommande n’interagit que sur
le déplacement de gauche à droite, et pas sur l’oscillation. Quand vous arrêtez le bonhomme il est en
pleine crise de schizophrénie et se tape la tête contre le mur.
Dommage, nous y étions presque.
A présent pour aider le personnage il faut aller dans le code. Courage vous allez vous en remettre
Pour les actions à présent il faut aller pour chaque bouton ici :
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 31/33
Il suffit d’entrer les éléments suivants :
Pour le bouton lecture, la première ligne était celle générée automatiquement, la deuxième celle qui
manquait :
Pour pause :
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 32/33
Pour retour au début :
Pour aller à la fin (vous saurez deviner le début des lignes) :
Bon ok, il manque un ingrédient et ça ne marche pas. Je vous laisse réfléchir quelques instants
pourquoi.
Tic, tac, tic, tac, tic, tac.
Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015
MASTER MAPI, parcours Jeu vidéo MAJE1 33/33
Tic, tac, tic, tac, tic, tac.
Tic, tac, tic, tac, tic, tac.
Tic, tac, tic, tac, tic, tac.
Dans le code que vous venez de coller, vous faîtes référence au mot clé « Bonhomme », mais ceci
n’est pas le nom du groupe, mais le nom de l’ID associé au groupe (dans propriétés). Et comme je ne
vous ai pas dit de mettre une valeur dans l’ID, vous ne l’avez pas fait, j’en suis sûr
Si à présent ça ne marche pas, c’est qu’il faut faire « Aperçu » et pas juste le bouton lecture.
Bravo, ce devrait fonctionner.
Pour information, lorsque je faisais faire le TP en flash, les étudiants devaient vraiment aller bien plus
dans le code en flash pour faire fonctionner. Là je perdais les deux tiers de la classe, alors que là
j’espère n’en avoir perdu qu’un quart. On va compter combien de personnes ont fini le TD.