Comment créer un jeu de plateforme HTML5 / JavaScript avec le Framework Phaser – Canvas WebGL

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Apprenez à réaliser un jeu de plateforme en JavaScript, avec le framework Phaser et les API Canvas et WebGL

Tout est dans la vidéo ci-dessous.

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

Comment créer un jeu de plateforme HTML5 / JavaScript avec le Framework Phaser – Canvas WebGL

Bonjour et bienvenue sur développement facile donc vous allez continuer à découvrir le fabuleux framework Phaser qui permet de créer rapidement gratuitement des jeux pour les mobiles avec HTML 5 et JavaScript donc des jeux compatibles Smartphone, tablette et ordinateur de bureau alors on va reprendre cette fois un exemple plus simple que la dernière fois la dernière fois c’était avec Flappy Bird qui c’était déjà enfin ça rentrait vraiment dans le vif du sujet avec ce cours vous allez partir un petit peu des basiques de Phaser pour créer un petit jeu de plate-forme sans prétention qui ressemble à ça, vous m’excuserez pour les graphismes ce n’est pas mon métier je ne suis pas graphiste donc je sais que c’est moche par contre ce que vous allez regarder c’est le fonctionnement le moteur du jeu pour justement faire la même chose de votre côté grâce au framework Phaser donc voilà j’ai pris toutes les étoiles donc c’est ce petit jeu que vous allez développer en quelques lignes de code seulement

Alors comment ça se passe ? Eh bien le framework Phaser comme d’habitude la classe main enfin le fichier main qui va s’occuper de créer tous les éléments du jeu et vous avez une div avec un identifiant pour pouvoir la récupérer et utiliser l’API Canvas ou le WebGL suivant le navigateur sur lequel est exécutée votre application. Donc vous avez des variables du jeu donc des variables globales qui sont déclarées dès que le DOM est chargé, on lance la construction du jeu avec un Phaser.Game que l’on instancie en 800 par 600 ça va déterminer soit l’API Canvas soit WebGL d’utiliser sur l’id de cette div, que l’on récupère ici, et vous pouvez … donc par défaut ça appelle ces événements preload, create, update, etc. enfin ces fonctions plutôt, mais vous pouvez changer les noms tout simplement avec ce paramètre donc si vous voulez les personnaliser vu que vous développez en français, comme ça vous pouvez donner des noms beaucoup plus parlant pour vous et votre équipe de développements. Donc pour le preload comme d’habitude vous allez charger tous les éléments du jeu, vous définissez une couleur de fond, vous n’êtes pas obligés … les éléments du jeu donc les éléments graphiques le le ciel, les plates-formes, les étoiles et le héros. Et donc le héros c’est un sprite donc qu’est-ce que c’est un sprite ? Si vous ne savez en fait si c’est une animation tout simplement. Donc j’en ai déjà parlé plusieurs fois sur Développement Facile. Un Sprite, je vous montre ce que c’est … c’est une image, donc là c’est le héros avec plusieurs positions et donc le framework, on va lui donner la taille d’un élément, ça sera l’élément donc 1 2 3 4 5 6 7 8 9, il y a 9 positions donc on va lui dire sur quelle position se placer, donc position à droite pour aller à droite, c’est de un à quatre, à gauche de six à neuf tout simplement donc on a donné la taille d’un élément et après on va donner … ici c’est les positions 0, 3, ça part de zéro pardon à 0 1 2 3 c’est quand il se déplace à gauche le 4 c’est la position normale enfin la position quand il ne bouge pas ici il est en position quatre et le 5, 6, 7 et huit c’est la position droite donc une fois que vous avez chargé tous les éléments du jeu, vous allez créer la scène. Donc d’abord Phaser appelle cette fonction pour changer les éléments une fois tout est chargé, cette fonction va être appelé et après update sera appelé tout au long de l’exécution du jeu régulièrement. Donc là, vous ajoutez le ciel, vous activer les lois de la physique sur le jeu donc la gravité, la gestion des collisions, tout cela. Et vous créez des groupes, en fait ça fonctionne … si vous avez développé en ActionScript c’est exactement la même chose en fait en ActionScript c’est les display objet, vous crées des display objet, des groupes avec plusieurs, dans un display objets plusieurs sprite plusieurs movie clip et donc c’est des display objet que vous manipulez, là ce sera des groupes, donc un groupe qui va contenir la plate-forme, la création du sol donc en fait c’est ça … la plate-forme, la création du sol. Et donc vous créez ces éléments, vous dites que le héros ne peut pas passer à travers le sol donc c’est pour ça que lorsque vous sautez dessus il s’arrête et rebondit tout simplement, il ne passe à travers. Ensuite vous allez ajouter le texte. Donc si vous remarquez ça fonctionne exactement comme avec ActionScript le système de couche dont vous ajoutez le ciel par-dessus la plate-forme par-dessus le score ici et par-dessus le joueur par-dessus le score tout simplement. Add vous empilez sous forme de couche pour vous éléments donc le Player il est ajouté après donc il est par-dessus le score c’est pour ça que le Player ici passe tout simplement par-dessus le score. Donc c’est un empilement des couches ici le sprite le soleil, enfin le ciel pardon en bas, enfin le

niveau le plus bas par-dessus le ciel, les plates-formes donc ces éléments-là sinon on ne les verrait pas si je m’étais ciel par-dessus. Par-dessus la plate-forme, le score et par-dessus le score, le player tout simplement donc là c’est pour … vous gérer le score, vous le positionnez en 10,10 taille 33, la couleur vous pouvez mettre … définir Arial Verdana, ce que vous voulez avec les polices on verra dans un autre cours plus tard le chargement de police personnalisée, dynamique. Là, vous allez créer le héros donc ç’est un sprite, là, c’est un texte que vous ajoutez, là c’est un groupe, là vous allez créer des éléments dans la plate-forme, ensuite donc on revient au player que vous créez vous activer les lois de la physique sur le joueur les propriétés donc la gravité, le rebondissement, tout ça sur le joueur, la collision avec les bords, les animations, vous créez une animation à gauche et à droite vous écoutez les touches directionnels du clavier, parce que le héros est contrôlé avec les touches directionnels donc curseur ici qui est une variables globales et ensuite vous créer un nouveau groupe avec les étoiles, les étoiles qui sont par-dessus le score, par-dessus tout en fait et c’est terminé bien évidemment vous pouvez mettre plus d’étoiles si vous le souhaitez, ça c’est vous qui voyez. Après il y a la fonction update qui est appelé en continu pendant le jeu donc là, c’est pour les collisions entre le Player et la plate-forme. Dès que le joueur touche une plates-formes il ne peut pas passer à travers entre la plate-forme et les étoiles pareil, les étoiles vous les voyez rebondir sur les plates-formes et vous avez le déplacement du joueur si on appuie sur la touche gauche on va le déplacer à gauche si on appuie sur la touche droite on le déplace à droite et sinon le héros reste en position debout sans bouger sur la frame 4, rappelez-vous le sprite ou il y a les animations gauches droites du joueur et au milieu la position debout et où il ne bouge pas et là, ça permet aux joueurs de sauter up et le joueur touche le sol évidemment il peut sauter que si il touche le joueur pas en l’air, dans certains jeux on peut resauter lorsqu’on est en l’air, là c’est quand il est sur une étoiles qu’il peut resauter ou alors quand il touche le sol tout simplement. Donc et up appuyer et le joueur touche quelque chose on le fait rebondir tout simplement avec vélocité et collectStar c’est appelé quand ? et bien si je rattrape une étoile donc avec le groupe étoile ici à un groupe d’étoiles et le joueur si il y a une collision entre une étoile, le groupe des étoiles donc toutes les étoiles et le joueur. On appelle la fonction collecte star en transmettant les paramètres Player et star donc l’étoile qu’il a touché donc on supprimer l’étoile de l’écran du jeu et on met à jour le score du joueur tout simplement donc c’est un petit jeu de plateformes vraiment très très simple pour que vous puissiez commencer à mieux appréhender la facilité d’utilisation du Framework Phaser. Vous avez vu dans le document  HTML, il y a deux fichier à inclure. Une div à inclure et c’est tout. Là, toujours le même principe de création d’une nouvelle instance de phaser.Game et après chaque fonction est appelée d’abord le preload ensuite create pour le jeu et update qui est appelé régulièrement ce qui donne si je recharge le jeu voilà un exemple bien évidemment vous ne pouvez pas passer à travers la plate-forme ni sur le bord, voilà les étoiles rebondissent sur le sol vous pouvez rebondir sur une étoile et vous pouvez aller sur les plates-formes voilà vous passez par-dessus le score suivant aller les couches en fait, tout simplement. Voilà un petit jeu, par exemple comme exercice ce que je vous propose, vous pouvez rajouter du son dans ce jeu. Dans les éléments graphiques, il y a quelque chose, il y a un autre animation d’un joueur donc vous pouvez l’intégrer donc intégrer deux joueurs sur ce jeu, c’est votre exercice pour l’améliorer. Donc utilisé l’autre joueur en animation vous pouvez rajouter d’autres éléments avec les étoiles.

Donc comme d’habitude vous trouverez sous ce cours le code source de ce jeu complet en téléchargement. Si vous avez des questions posez les directement sous ce cours l’équipe Développement Facile vous répondra pour vous aider et maintenant je vous invite à regarder la deuxième vidéo, juste au-dessus de ce cours vidéo il y a une bannière : cliquez ici pour lancer la deuxième vidéo. Donc un lien vous cliquez dessus vous aller atterrir dans la deuxième vidéo, et dans la deuxième vidéo, vous allez apprendre à utiliser vraiment Phaser dans les moindres détails pour créer … le but de c’est que vous puissiez créer des jeux très facilement avec HTML 5 et JavaScript donc pour les Smartphones les tablettes et les ordinateurs, des jeux qui sont en même temps compatible avec la majorité, la très grande majorité des navigateurs. En plus vous aurez des stratégies utilisées par les professionnels, des développeurs professionnels en développement rapide d’applications performantes. Donc tout ça c’est expliquer dans la deuxième vidéo vous pouvez même profiter des experts de l’équipe Développement Facile pour vous aider dans votre développement, à mettre en place les stratégies de la méthode Développement Facile dans votre équipe dans votre développement. Cliquez simplement juste au-dessus de secours sur la bannière cliquez ici pour lancer la deuxième vidéo cliquez sur ce lien je vous retrouve tout de suite dans la deuxième vidéo, a tout de suite

[/ppmtoggle] [/ppmaccordion]

Télécharger le jeu de plateforme simple

Retrouvez le code source complet et commenté du jeu de plateforme simple implémenté avec le framework JavaScript Phaser

Downloads

  • 07 jeu plateforme simple
    07 jeu plateforme simple

    Code source commenté d'un jeu de plateforme simple réalisé en JavaScript avec le framework Phaser

Allez plus loin et montrez nous vos jeux de plateforme

Utilisez la zone commentaire pour venir présenter vos propres jeux de plateforme inspiré de celui qui vous a été présenté

 

 

Créez des Jeux JavaScript / HTML5 Performants avec la Formation Gratuite Jeux Faciles!

Apprenez Comment Développer des Jeux sur Mobiles iOS / Androïd, Tablettes et le Web avec les Frameworks Phaser, Threejs...