Découvrez comment intégrer des animations sur les transitions entre les différents éléments qui constituent votre jeu.
Avec l’API JavaScript Canvas et plus particulièrement les tweens c’est vraiment très simple à réaliser.
Tout est expliqué dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter des animations JavaScript avec les tweens dans l’API Canvas
Bonjour et bienvenu sur développement facile.
Donc on continue ensemble les cours dédiés à la création de jeux JavaScript grâce à l’API Canvas et dans ce cours vous allez découvrir l’utilisation des tweens. Un tween permet de faire des effets sur les interfaces par exemple des effets élastiques des effets de rebondissements. Vous pouvez intégrer des tweens dans un jeu par exemple les effets de collision en faisant des effets de rebondissements et tout ça c’est possible grâce à un Framework donc toujours vous avez createjs.com alors je vais vous redonner l’adresse comme ça va vous pourrez l’utiliser donc vous aller sur http://createjs.com et vous pourrez télécharger l’ensemble du Framework pour commencer votre développement surtout à simplifier votre développement. Donc bien évidemment le but ce n’est pas comprendre ce code source, il est minimisé et optimisé pour prendre le moins de place possible et vous avez la possibilité de le télécharger et après je vais vous expliquer comment créer vos tweens.
Donc comme d’habitude vous intégrer fichier main.js en en désactivant le cache de votre navigateur et ensuite pour intégrer une tween c’est toujours le même principe de fonctionnement et c’est très simple une fois pour que l’on a compris le truc. Alors, par exemple vous avez une tween ici, donc vous faites Tween.get la vue donc ces crédits c’est la vue crédits, crédits ça correspond ici à l’image PNG crédits et donc qu’est-ce que vous faites sur cette vue crédit : donc vous avez votre tween ici donc tween.get sur l’interface crédits tout pour aller à la position X 0 en 300 ms. Donc amène l’interface à la position x égal zéro pixel avec une vitesse de 300 ms tout simplement. Je peux mettre trois secondes donc que si je mets trois secondes je remets à jour le fichier ftp vous allez voir c’est très, très, lents donc je clique il mais bien trois secondes à arriver. Je vais remettre 300 millisecondes et vous avez la tween pour masquer les crédits donc pareils ça va déplacer donc ça va amener tout en X à 480 pixels en 300 ms et ça va appeler à la fin ça exécute cette fonction. Donc je vais le rajouter en commentaire ici donc cela cela déplace l’interface à X égal 480 pixels à une vitesse de 300 ms et à la fin de la tween la fonction removeCredit est appelée. Donc c’est très pratique … automatiquement est appelé … c’est très pratique vous avez plusieurs types de tween soit une tween simple soit une tween … et bien à la fin de la tween vous appelez une fonction donc qu’est-ce que ça donne je remets à jour avec une chargement de tween beaucoup plus rapide. Donc ici on affiche la vue crédits en fait rien la voilà la vue crédit a disparu en fait ce que ça donne si je la laisse un peu visible, elle va disparaître d’un seul coup la vue crédits, parce qu’avec le removeChild ça l’enlève de la scène tout simplement donc je la fais apparaître et la elle a disparu d’un seul coup peut-être que ce sera plus visible ou vous la verrez va disparaître d’un seul coup la tween voilà je recharge la page elle apparaît voilà elle a disparu d’un seul coup. Donc ça vous ouvre tout un champ de possibilités pour créer vos animations pour automatiser votre code je vais vous montrez … il doit y avoir d’autres tween dans ce code. La tween d’apparition du jeu donc là , on joue sur les Y donc ça c’est pour apparaître faire apparaître lancer le jeu ici start par le haut, donc qu’est-ce qui se passe Y … on déplace l’interface Y en -320 toujours en 300 ms et à la fin on appelle addGameView. Qu’est-ce que ça donne, je vous montre ce que ça donne, l’apparition de la tween, vous appuyez sur le bouton start et bien ça fait partir TitleView en Y également -320 et à la fin on ajoute, donc si vous avez vu la vue ici précédente à remonter et elle a disparu avec le call addView donc on a fait un removeChild Titleview, donc ça a supprimé tout simplement cette interface et après on s’est mis à lancer le jeu. Est-ce qu’il y d’autre tween … là, pour le gagnant donc on fait apparaître la vue tween par le haut donc elle va descendre tout simplement. Donc là, vous avez vu comment utiliser les tween, c’est très pratique pour faire des animations en fait les tween vraiment très pratique vous avez vu que c’est très simple à utiliser donc avec la tween vous indiquer à l’interface que vous spécifiez dans get(credits) l’endroit où elle doit se rendre en X et en Y et vous pouvez interagir sur d’autres paramètres, vous donner un délai pour atteindre cette position et à la fin de la tween si vous le souhaitez, vous pouvez appeler une autre fonction c’est optionnel et donc je qu’est-ce que ça donne comme résultat, crédits une tween, une autre tween, start une tween et après pour quand la partie est terminée je faire expert de perdre très rapidement vous allez voir la tween Game over qui va arriver par une tween tout simplement voilà par le haut avec une tween. Si on regarde dans le code Game over est ici on descend 115 avec une tween tout simplement.
Donc comme d’habitude vous trouverez le code source en téléchargement complet sous ce cours vidéo si vous avez des questions posez-les directement à l’équipe développement facile qui se fera un plaisir de vous répondre de vous aider à utiliser les tween dans vos applications et maintenant je vous invite à regarder la deuxième vidéo c’est-à-dire au-dessus de ce cours vidéo, il y a une image, cliquez ici pour lancer la deuxième vidéo il y a un lien cliquable et dans la deuxième vidéo vous allez apprendre à créer des jeux des applications avec JavaScript et l’API Canvas beaucoup plus rapidement deux à trois fois plus rapidement vous allez améliorer, optimiser votre processus de développement avec la méthode développement facile vous aurez une architecture de code dans vos applications pour vous permettre d’éliminer la grande majorité 80 % des bugs même 90 % des bugs à la source dès la conception de votre application vous allez découvrir des stratégies de la méthode développement facile pour travailler en équipe bien évidemment vous aurez des un exemples de code source détaillé que ce soit pour des applications ou des jeux donc je vous explique tout ça dans la deuxième vidéo l’équipe, l’équipe développement facile répondra en priorité à vos questions techniques que les bugs que vous pouvez rencontrer donc tout ça c’est dans la deuxième vidéo. Cliquez simplement sur l’image au-dessus de ce cours vidéo cliquez sur le lien et je vous retrouve tout de suite dans la deuxième vidéo, à tout de suite.
