Aller au contenu

Comment gérer simplement les rotations et collisions avec le framework Phaser

Apprenez à réaliser un jeu très simple avec des calculs de rebondissement d’une balle ainsi que ses collisions.

Tout ça en JavaScript avec le framework Phaser.

Tout est expliqué dans la vidéo.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment gérer simplement les rotation et collisions avec le framework Phaser

Bonjour à tous et bienvenu sur Développement Facile.

Vous allez continuer à découvrir les fonctionnalités du Framework Phaser donc pour vous présenter rapidement, le framework Phaser permet de créer rapidement des jeux JavaScript avec HTML 5 donc des jeux pour les mobiles donc les Smartphones, les tablettes et les ordinateurs. C’est un Framework qui vous simplifie énormément la création de jeu vidéo car il contient tout un tas de fonctionnalités près intégrées.

Dans ce nouveau cours vous allez justement apprendre à faire un petit jeu très simple comme ceci qui consiste à faire des calculs de rebondissements de la balle, du héros donc sur les bords et des collisions avec un bonus ou un ennemi comme là c’est perdu voilà, donc ça reste un petit jeu tout simple sans prétention, mais ça va vous permettre de découvrir des nouvelles fonctionnalités du Framework phaser.

Alors comment ça se passe ? Voici le code source donc très grand fichier grâce à la méthode développement facile, vous apprendrez à créer des classes, donc diviser votre code JavaScript en plusieurs fichiers, je vous explique ça à la fin de la vidéo, comme d’habitude vous déclarez toutes les variables de votre jeu, c’est aussi simple que ça, j’ai tout commenté donc voilà, suffira de lire les commentaires, vous créez votre jeu, largeur, hauteur, canvas, WebGL, la div qui est concernée donc ici vous avez votre div qui va accueillir votre jeu, vous incluez le main, le fichier main qui contient tout le code source de votre jeu, et le Framework phaser, toujours on désactive le cache du navigateur grâce à ça, ensuite une fois que votre code est fini de développer donc vous mettez avec le cache du navigateur. Voilà, ensuite vous avez le chargement des éléments graphiques donc chargement là d’un bonus aléatoire tout simplement, et donc là c’est pour générer un nombre aléatoire, vous connaissez je vous l’ai déjà présenté dans les précédents cours, donc ça c’est le code si vous souhaitez passer le jeu en plein écran automatiquement, je le désactive pour vous dans les tutos c’est beaucoup plus facile d’avoir un jeu sur l’écran ici plutôt qu’en plein écran, voilà, vous ajoutez la balle, vous la placez, déterminez la vitesse de la balle, là vous la placée, vous ajoutez la rotation de la flèche, vous ajoutez un ennemi, ensuite vous ajoutez le bonus, le texte informatif qui est ici, là c’est la puissance, vous pouvez aller jusqu’à une puissance de 200 maximum, là j’ai perdu, vous perdez dès que vous touchez des ennemies, la courbe de puissance qui augmente, après bien évidemment, vous pouvez faire des effets graphiques pour augmenter avec une barre de puissance qui s’augmente au fur et à mesure, voilà, tout est possible si je puis dire, la mise à jour du texte informatif que vous avez créé ici, les écouteurs sur le clic de la souris donc dès que vous cliquez sur la souris ça charge ici, la puissance du jet, tout simplement et donc ça appelle la fonction charge qui est ici, ensuite on supprime l’écouteur sur le clic de la souris pour ajouter un écouteur sur le relâchement de la souris et là on remet à jour les écouteurs de la souris et donc le relâchement ça augmente la vitesse de la balle, elle va se déplacer, mise à jour du texte et rotation de la flèche, on inverse la rotation de la flèche, là elle tourne dans ce sens, je lance elle tourne dans l’autre sens, rotation inversée à chaque fois que vous lancez la flèche, ensuite comment ça se passe ? Bien vous avez on update, voilà c’est la fonction qui est appelée en continu par le framework phaser pendant le jeu, si on est pas game over, on effectue les mises à jour du jeu, si on est game over ça sert à rien d’appeler on update, s’il y a un chargement en cours, on augmente la puissance du lancé, tout simplement, sinon on continue de faire tourner la flèche donc chargement en cours, la flèche ne tourne plus, elle va se déplacer comme ceci, là elle tourne parce qu’il n’y a pas de chargement, chargement en cours, la flèche ne tourne, plus ensuite vous mettez à jour la position de la flèche qui va suivre la balle bien évidemment, si la balle se déplace, et là c’est des tests, on test la distance si vous touchez un bonus, alors mise à jour du texte informatif, mise à jour du texte ici, ajoutez un ennemi, ajoute un bonus donc voilà je vais renommer pour que ce soit beaucoup plus compréhensible, add bonus, ça replace le bonus à une nouvelle position, je vous montrerai après et voilà ensuite si le joueur touche un ennemi, game over, mise à jour du texte game over, donc là ça ajoute un ennemi sur la carte, donc on ajoute un Sprite, on le positionne aléatoirement sur le jeu, en checkant la position, il faut que l’ennemi ne soit pas trop près du héros, donc la distance entre les ennemis ne soit pas trop proche, donc ça permet de vérifier, tant que la position n’est pas bonne on fait un random jusqu’à tant que la position de l’ennemi soit correcte, pareil pour ajouter un bonus, on place le bonus à une position aléatoire, tant que la position n’est pas bonne, c’est-à-dire entre bonus et le héros, la distance doit être assez grande et entre le bonus et les ennemis la distance doit être assez grande, sinon on retourne true, c’est que la position n’est pas bonne et quand on retourne false, la position est correcte, donc sinon  on continu à déplacer les coordonnées du bonus.

Ensuite qu’est-ce que vous avez ? Ca c’est pour gérer le rebond sur les murs donc on fait différents tests et on fait rebondir la balle tout simplement sur les murs, donc on met à jour sa position et sa vitesse ici, donc en X et en Y, on met à jour sa position en vérifiant toujours par rapport, est ce que la balle à toucher quel mur ici, soit sur les côtés, soit sur le haut ou le bas ensuite là vous récupérez la distance entre deux Sprites tout simplement, ça vous renvoi une distance d’écartement entre deux sprites donc si c’est > 0 il ne se le touche pas, si on regarde get distance ici, pour les collisions ça doit être inférieur bien évidemment, à la valeur du diamètre d’un ennemi vu que c’est un cercle, on teste les diamètres tout simplement, donc c’est des tests de collisions vraiment très simples, dans les précédents cours, vous avez découvert que le Framework phaser comprend des tests beaucoup plus poussés de collisions, qu’il a un système intégré en lui de gestion des collisions, donc ça permet d’être beaucoup plus précis que cela, là il faut avouer que ce n’est pas précis du tout, et vous avez le score qui se met à jour à chaque fois automatiquement lorsqu’un bonus est touché, ça le gère ici, touche un bonus, score, update le score, et update le texte. Qu’est-ce que vous avez comme autre fonction ?

Là on vérifie les positions, la distance, le chargement de la puissance du lancer, l’utilisateur, le joueur relâche la souris donc on déplace le héros, et là c’est la mise à jour du texte donc si le joueur est toujours en jeu, on met la puissance et le score à jour, sinon, si il est game over, on affiche game over, tout simplement.

C’est un jeu relativement simple à coder, il y a beaucoup de code dans le fichier, ça vous donne un résultat comme ceci voilà, donc vous allez voir le score va se mettre à jour, il s’est mis à jour tout simplement, donc les collisions ne sont pas parfaites, comme je vous l’ai dit, il vaux mieux utiliser ce qui est intégré à phaser et là j’ai perdu, collision entre un ennemi et le héros, score de sept on peut plus rien faire, il ne reste plus qu’à recharger le jeu pour recommencer à jouer.

Alors comme d’habitude sous ce cours vous trouverez le code source à télécharger donc le code source il est commenté, ça va vous permettre de votre côté, dans vos projets de récupérer des exemples de code, de fonctionnalités, si vous avez des questions posez les directement sous ce cours à l’équipe développement facile, et là vous avez remarqué que le fichier relativement grand et le jeu très simple et déjà le code source et dans un seul et même fichier, c’est-à-dire il est tout regroupé dans le main.JS et imaginez un jeu beaucoup plus complet, le fichier ferais 4000, 5000 lignes, là on est à 400 lignes, donc vous avez la méthode développement facile qui vous apprend à, dans des jeux complexes, dans des applications complexes, à créer des classes avec JavaScript et ça permet de séparer le code dans plusieurs fichiers JavaScript en fonction de la classe, donc c’est très pratique, l’avantage c’est que vous pouvez travailler en équipe sur plusieurs fonctionnalités du jeu vu que c’est des classes et des fichiers JavaScript différents à chaque fois qui sont traités, plusieurs développeurs peuvent travailler dessus, pour faire évoluer le code c’est vraiment très simple, pour faire évoluer les fonctionnalités car vous touchez à chaque fois qu’une seule partie du jeu, que quelques fichiers, deux, trois fichiers JavaScript différents deux, trois classes, vraiment très simple pour le faire évoluer dans le temps et l’avantage c’est pour repérer les bugs, c’est aussi également très simple, pour apprendre à faire cela, à mettre en place la méthode développement facile dans votre développement, je vous invite à regarder la deuxième vidéo, donc au dessus de ce cours il y a une image, un lien cliquable, qui vous amène vers la deuxième vidéo, dans la deuxième vidéo vous allez apprendre à créer des jeux JavaScript, des applications JavaScript performantes grâce aux Framework phaser, vous allez créer votre code en équipe, vos applications, vos projets en équipe, vous allez apprendre avec la méthode développement facile à créer vos applications, vos jeux deux à trois fois plus rapidement, en plus les experts de l’équipe développement facile vous accompagnent dans les exercices, des cours si vous avez des exercices que vous arrivez pas à faire, des fonctionnalités du cours que vous arrivez pas à reproduire, les experts de l’équipe développement facile sont à votre disposition pour vous donner des exemples supplémentaires, des codes sources supplémentaires, pour répondre à toutes vos questions, donc je vous explique tout ça dans le détail, la création de jeux et d’applications performantes en JavaScript HTML 5, il suffit de cliquer au-dessus de ce cours vidéo il y a une bannière, un lien cliquable, cliquez dessus et je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de mini jeu de la vidéo

Retrouver le code source commenté de l’exemple de mini jeu réalisé avec Phaser, vu dans la vidéo

Téléchargement du code source 19 mini game

Cliquez ici pour télécharger le code source 19 mini game

Posez vos questions sur le cours vidéo ici

Utilisez la zone commentaire pour poser vos questions à l’équipe Développement Facile

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>