Découvrez une nouvelle facette de la gestion des collisions, des effets de gravité et de l’utilisation des tweens.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Gérer la gravité, les effets de rebondissement, les collisions d’1 jeu HTML5 avec Phaser
Bonjour à tous et bienvenu sur Développement Facile.
Ensemble on continue à découvrir la création de jeux HTML 5 JavaScript grâce au Framework phaser. Vous avez déjà eu plusieurs cours sur ce Framework qui simplifie énormément votre développement de jeux HTML 5 JavaScript pour les mobiles et les ordinateurs de bureau, dans ce nouveau cours vous allez découvrir une nouvelle facette de la gestion des collisions, de l’utilisation des tweens et d’un effet de gravité.
Alors je m’explique je vous montre le principe, c’est une balance donc il y a deux balances, gauche et droite, et vous faites tomber des balles dessus qui rebondissent et qui ont un effet sur le poids donc vous pouvez mettre plusieurs balles autant que vous voulez, plus ou moins grosses, et la balance, les deux balances bougent justement en fonction du poids quelles supportent donc en fait ça peut vous ouvrir aux effets de rebondissements comme vous pouvez le voir ici, la balle rondie tout simplement et l’effet de gravité avec le poids qu’il y a sur un objet, donc comment ça se passe.
Comme d’habitude ça, ça change pas, vous incluez le framewok phaser, ça non plus ça change pas, c’est dans la méthode développement facile, d’autres développeurs font d’une autre façon. Je vous conseille cette façon ça permet de centraliser le point de départ du code donc la fonction main, on désactive le cache uniquement pendant le développement, une fois que votre développement est terminé vous réactivez le cache du navigateur. Vos variables globales comme d’habitude, il y a des commentaires je vous inviteraient à les regarder, donc là vous instanciez votre jeu dans la fonction main qui est appelée dès que le DOM est chargé et ensuite automatiquement, preload est appelé avec le chargement des éléments graphiques donc de la balance et de la balle de tennis, ensuite on create est appelé automatiquement grâce au framework phaser ici, pour créer la balance de gauche dans un groupe, la balance de droite avec le poids quelle supporte, donc actuellement à zéro vu qu’il n’y a aucune balle, vous rajoutez les graphismes sous forme de Sprite, tout simplement, vous les ajoutez dans votre objet balance donc le tableau, c’est un tableau en fait qui contient à la position zéro la balance gauche, à la position un, la balance droite, voilà c’est expliqué ici et dès que l’utilisateur appui sur le clic gauche de sa souris, vous ajoutez une nouvelle balle ici, j’appuie sur le clic gauche, je relâche, j’ajoute une nouvelle balle donc le clic add new balle ici, et on up relachement, donc on relache le clic de la souris drop balle pour effectuer l’animation de la chute de la balle, et à la fin de la chute de la balle, qu’une fois que la tween est complète, que la balle a finie de rebondir, vous avez les balances qui s’ajustent avec la différence de poids, tout simplement.
Ca, ça ne sert à rien, j’enlève ce qui est inutile, ce qui fait que, je relâche, elle rebondi, fin de l’animation, les balances s’ajustent, je la recharge pour qu’il y ai un peu moins de balles, alors comment on gère tout ça ?
Vous avez lu, un tableau qui contient les deux balances, une propriété poids, les graphismes, on les positionne à l’endroit où on le souhaite tout simplement, sachant qu’on a une taille d’un jeu de 320 par 480 on positionne correctement pour qu’elles soient alignées, les deux images et ensuite c’est ici donc on update, on fait grossir la balle en continu avec un diamètre maximum de 53 c’est uniquement ce qu’on fait, si c’est possible, bien évidemment, on test un booléen si c’est possible et si la balle n’est pas trop grosse donc elle est toujours inférieure au diamètre qu’on a défini, là j’ai laissé appuyer, elle ne va pas plus grossir parce que le diamètre est trop gros, tout simplement ensuite, lors de l’ajout de la balle, on ajoute la balle c’est un Sprite tout simplement on définit la largeur et la hauteur de la balle, voilà, aussi simple que ça, j’ai mis une balle trop grosse, bien évidemment, il y a quelques bugs dans le jeu c’est juste pour vous montrer le principe de fonctionnement, là on ajoute la balle sur la bonne balance tout simplement, en fonction de sa position, la position ou la balle a été créée, et voilà, donc c’est la position de la balle et ensuite au relâchement de la souris on fait un drop balle bien évidemment, on autorise le grossissement de la balle lorsqu’on ajoute une balle, et là quand on relâche le clic de la souris, on empêche le grossissement de la balle, on supprime l’écouteur sur le relâchement du bouton de la souris parce qu’on va le rajouter lorsqu’on va créer une nouvelle balle, tout simplement, on calcule la destination de la nouvelle balle et on augmente le poids de la balance en fonction de la taille de la balle, tout simplement. C’est un petit algorithme, là c’est à vous de voir, vous faites comme vous voulez au niveau des algorithmes, du calcul du poids de la balle, là c’est en fonction de la valeur pie et de la largeur de la balle, voilà et on créé une nouvelle animation tween, vous avez déjà eu énormément d’exemples pour créer une tween, donc jusqu’à la destination de la balle on va jusqu’en Y en deux secondes avec un effet de rebondissement et à la fin de la tween une fois qu’elle sera complétée cette tween, on va ajuster les poids de la balance, on relâche, on relâche et à la fin du rebondissement, fin de la tween on ajuste les poids de la balance, pareil, on relâche elle rebondie, c’est terminé, même chose elle rebondie, la tween est terminée on ajuste les poids de la balance, comment on ajuste les poids de la balance ? On a ne propriété while tout simplement, une valeur de frottement ici, que vous définissez ici, avec le frottement tout simplement, et donc il y a une différence de taille et en fonction du poids de la différence de taille on ajuste la balance et on évite, on a mis un if de sécurité pour éviter que la balance sorte de l’écran tout simplement, si je mets une valeur, trop de balles normalement la balance devrait sortir de l’écran et bien là c’est bloqué grâce au if, je vais essayer de rééquilibrer la chose, la balance simplement, donc c’est une petite sécurité, bien évidemment la balance devient fausse à un moment donné, vu qu’on a rééquilibré le poids et on ajoute des effets de tween sur les deux balances tout simplement là les tweens, on a deux effets de tweens, alors les effets de tween, un ici pour le rebondissement à la fin on appellent add juste balance à la fin de cette tween, et deux autres effets de tween, on appelle pas de… on les laisse sur les balances toujours en deux secondes, voilà un code vraiment très simple encore, mais qui vous ouvre toute une possibilité pour gérer la gravité, les effets de de rebondissements, et surtout les tweens que vous voyez ici donc pensez à bien utiliser les tweens avec à la fin vous pouvez appeler on complet une nouvelle fonction, une propriété donc la propriété qui est directement mis sur un objet, en fait c’est un objet que l’on stock à la position zéro dans le tableau et on rajoute une propriété donc balance sprite est ajoutée dans notre objet, tout simplement, donc voilà un exemple très simple.
Comme d’habitude vous retrouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez les directement également sous cette vidéo l’équipe développement facile vous répondra, et maintenant je vous invite à regarder la deuxième vidéo c’est-à-dire dans la deuxième vidéo juste au-dessus de ce cours, il y a une bannière, un lien cliquable qui vous permet d’accéder une deuxième vidéo complète pour apprendre à créer des jeux des applications grâce à la méthode développement facile, c’est dire vous allez développer deux à trois fois plus rapidement avec énormément moins de bugs, parce que vous allez les éliminer 90 % de vos bugs, bien évidemment il en reste toujours des bugs, c’est normal quand on développe des applications complexes mais en tout cas vous allez éliminer le gros des bugs à 90 % grâce à la méthode développement facile, une architecture de code, créer des classes en JavaScript dans différents fichiers ça vous permet de travailler en équipe, lorsque vous devez rajouter des nouvelles fonctionnalités dans votre jeu ou dans votre application, un mois, 15 jours ou six mois après ça ce fait avec une facilité déconcertante parce que le morceau de code à modifier, à ajouter est localisé dans deux ou trois fichiers JavaScript et non plus dans un seul qui y a 2000 ou 3000 lignes, donc rien qu’avec cette stratégie de développement, vous allez gagner énormément de temps, et en plus l’expert, les experts de l’équipe développement facile vous accompagnent pendant votre développement lorsque vous appliquez les exemples de codes source, les cours pour répondre à toutes vos questions, vous aider à faire face aux difficultés que vous pourriez rencontrer dans votre développement, donc tout ça je vous l’explique en détail dans la deuxième vidéo, juste au-dessus de ce cours, cliquez simplement sur la bannière, sur le lien et la deuxième vidéo se lancera automatiquement, je vous retrouve dès maintenant dans la deuxième vidéo pour tous vous dire, à tout de suite.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple de jeu de balance
Retrouvez le code source commenté du jeu de balance qui vous a été présenté dans la vidéo
