Aller au contenu

Comment gérer les déplacements du joueur et la gravité dans un jeu de plateforme avec Phaser

Apprenez à gérer les déplacements d’un joueur dans un jeu de plateforme avec le framework Phaser.

Gérez les sauts et la gravité qui influence le personnage controlé par le joueur.

Tout est dans la vidéo ci-dessous.

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

Comment gérer les déplacements du joueur et la gravité dans un jeu de plateforme avec Phaser

Bonjour et bienvenu sur Développement Facile.

Voici un nouveau cours dédié au Framework phaser, donc le framework phaser qui vous permet de créer très rapidement, très facilement des jeux pour les mobiles et le Web.

Les Smartphones sous iPhone et Android, les tablettes iPad et sous Android donc phaser vous simplifie littéralement le développement de jeux sur ces périphériques mobiles et le Web.

Aujourd’hui, vous allez apprendre à créer le début d’un jeu pour gérer les sauts, les déplacements d’un joueur, par exemple vous imaginez que c’est un joueur, et lorsque vous cliquez, il change de direction et là il tombe avec une gestion des collisions tout simplement. Donc c’est ce que vous allez apprendre à créer, un jeux qui permet de gérer les déplacements du joueur, les rebondissements sur les côtés, la descente ici lorsqu’il descend, il tombe, la gravité, les murs, donc comment faire ça tout simplement avec le Framework phaser.

Comme d’habitude vous incluez le Framework phaser, le fichier main et pendant la phase de développement mais uniquement pendant la phase de développement vous désactivez le cache du navigateur après vous pouvez le réactiver, donc insérer votre fichier javascript de la même façon que phaser, je passe vite, vous avez les variables du jeu, donc largeur hauteur, la vitesse de déplacement du joueur, un objet joueur et les plates-formes, donc les plates-formes c’est le sol ici toutes les plates-formes sur lequel le joueur rebondi, atterri, tout simplement. Vous créez votre instance game avec phaser, vous pouvez mettre toutes les variables qui sont ici, toutes celles là, les deuxième variables du jeu en global game.global le nom de la variable, ça vous permet si vous développez des jeux très imposants, très complexes, d’affecter certaines variables et d’éviter de les déclarer en global javascript donc c’est très puissant, ensuite là, vous avez on preload, vous allez charger toutes les images, les plates-formes, le joueur, le sol, la couleur de fond du jeu donc les plates-formes, le sol, la couleur de fond du jeu, et le joueur, vous chargez toutes ces images et là vous allez créer votre jeu, votre interface, vous ajoutez la gestion des collisions, vous créez un groupe qui va contenir toutes les plates-formes, tout simplement, vous ajoutez sur le joueur la gestion, la gravité des collisions, vous définissez la vitesse de déplacement du joueur, vous créez le niveau en positionnant les plates-formes et le type de plate-forme avec la taille de la plate-forme grande taille, petite taille tout simplement, ici le sol, vous positionnez le sol là ou vous le souhaitez, donc c’est par rapport à la taille du jeu tout simplement, que le sol se retrouve, justement au sol ensuite vous ajoutez des écouteurs de la souris, c’est-à-dire à chaque clic, vous changez la direction du joueur, la je clique la direction du joueur change, je clic elle change, je reclique elle rechange et je reclique, elle rechange, donc à chaque clic, et à chaque fois ça c’est appelé en continu par le framework phaser, on effectue le déplacement du joueur, la gestion des collisions entre le joueur et la plate-forme, on appelle la fonction move player qui va ajouter, modifier le déplacement du joueur lorsqu’il y a une collision entre le joueur et la plate-forme, c’est-à-dire lorsqu’il chute, regardez ici, la chute est gérée tout simplement, ensuite vous avez tout à une panoplie de test si le joueur tombe en bas du jeu, eh bien on le repositionne en haut tout simplement, ensuite si le joueur touche le bord gauche on inverse la direction du joueur et si le joueur touche le bord droit de l’écran on inverse la direction du joueur, là il touche le bord gauche on inverse sa direction tout simplement, je vais vous montrer lorsqu’il touche le bord droit, on va inverser sa direction, il touche le bord droit on inverse sa direction. Ça c’est pour l’ajout des plates-formes, vous mettez les positions et vous ajoutez un sprite avec le nom du sprite plate-forme 180 ici, les noms des sprites vous les avez là, tout simplement, vous ajoutez la gestion des collisions et de la gravité à la plate-forme, la gravité, pas de gravité, la plate forme est fixe, elle ne peut pas tomber, elle ne peut pas bouger non plus et vous ajoutez la plate-forme dans le groupe de plates-formes. Voilà là c’est le changement direction du joueur on inverse la vitesse de déplacement tout simplement, qui est à 150 elle passe à -150, donc vraiment très simple pour commencer à créer un jeu de plate-forme de type mario, vous pourrez même rajouter au clic de la souris ou les flèches directionnelles pour déplacer le joueur et effectuer des sauts, tout ça je vous invite à le rajouter, le saut, que le joueur puisse sauter, se déplacer à gauche, à droite avec les flèches directionnelles, tout ça c’est très simple à rajouter avec le code source, il suffit d’ajouter les clics, les écouteurs sur les touches, les flèches directionnelles du clavier, la barre espace pour le saut donc voilà.

C’est à vous de jouer, à vous d’améliorer ce jeu en ajoutant les flèches, la gestion des flèches directionnelles, la barre espace pour faire sauter le joueur, vous trouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez les directement sous ce cours vidéo et si vous voulez aller beaucoup mais vraiment beaucoup plus loin dans la création de jeux complexes et performants sur les mobiles donc les smartphones iphone et android, les tablettes ipad et android, le web, juste au-dessus ce cours il y a une image un lien cliquable, cliquez simplement dessus, vous allez être dirigés vers une deuxième vidéo qui vous explique dans le détail comment utiliser la programmation orientée objet, les événements, les modèles de conceptions, comment travailler en équipe, comment créer des architectures de jeux solides fiables évolutives, c’est-à-dire pour travailler en équipe faire évoluer le jeu plusieurs mois après avec une facilité déconcertante, comment profiter des experts de l’équipe développement facile pour vous aider dans votre développement c’est-à-dire à chaque fois que vous avez une question sur un cours, sur un code source bien précis, l’équipe développement facile vous répondra avec des exemples de code source supplémentaires pour vous aider à progresser dans votre expertise en développement de jeux sur mobile, tablette, smartphone et le web, donc cliquez simplement sur la bannière au dessus de cette vidéo pour nous retrouver dans la deuxième vidéo, je vous dis à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de code source

Retrouvez l’exemple des gestions des déplacements du joueur dans un jeu de plateforme réalisé avec le framework Phaser

Téléchargement du code source 27 jeu mouvement joueur

Cliquez ici pour télécharger le code source 27 jeu mouvement joueur

Montrez nous vos jeux de plateforme

Utilisez la zone commentaire pour poser vos questions et venez présenter vos réalisations avec le Framework Phaser.

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 >>