Créez un jeu de plateforme HTML5 / JavaScript avec des classes POO avec Phaser – Canvas WebGL

Dans cette suite du cours sur le développement d’un jeu de plateforme, vous allez aborder la programmation orienté objet.

Cela va vous permettre de mieux organiser votre travail et notamment de pouvoir travailler en équipe.

Tout est dans la vidéo ci-dessous.

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

Créez un jeu de plateforme HTML5 / JavaScript avec des classes POO avec Phaser – Canvas WebGL

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce cours vous allez continuer à apprendre les bases essentielles pour utiliser le Framework Phaser pour développer vos jeux pour les Smartphones, les tablettes et les ordinateurs de bureau grâce à HTML 5, JavaScript, notamment l’API canvas ou le Web GL ça dépend sous quel navigateur vous allez exécuter votre jeu tout simplement.

Dans le dernier cours si vous vous rappelez, vous avez appris à créer un petit jeu de plate-forme avec le Framework Phaser, c’était un développement relativement simple pour vous montrer comment utiliser les fonctionnalités de base du framework Phaser dans un jeu de plate-forme et là, vous allez découvrir un petit peu comment simuler la notion de programmation orientée objet avec le Framework Phaser et JavaScript, ce qui va vous permettre déjà de travailler en équipe, d’organiser votre code suivant les certains conseils de la méthode développement facile, par classe, de créer des classes, des fichiers avec le contenu de la classe et sur des jeux beaucoup plus complexes, beaucoup plus importants, ça vous permet de travailler en équipe car chacun travaille sur un ensemble de fichiers et uniquement sur cet ensemble de fichiers, et vous pouvez assembler le tout donc pour créer votre jeu, du coup vous développez beaucoup plus rapidement car vous êtes plusieurs développeurs, chacun sur sa partie qui est bien séparée des autres et vous avez un fichier qui relie le tout. Donc c’est exactement le même jeu, en fait, de plate-forme avec les étoiles tout ça, sauf que là il est organisé avec un développement programmation orientée objet et JavaScript. Donc qu’est-ce que vous faites ? Vous avez le fichier main qui gère toute la création du jeu « l’organisation des différentes classes », le moteur et vous avez une classe level, donc niveau, texte info pour le score, et Player pour le joueur, donc vu que je suis en phase de développement j’ai désactivé le cache, je force le navigateur à recharger le fichier JavaScript à chaque fois, sauf le framework Phaser vu qu’on y touche pas, vous allez pas y toucher, bien évidemment nom domaine, qu’est-ce qui se passe, une fois que le DOM est chargé comme d’habitude, vous avez des variables globales qui correspond à l’instance des classes, Player, level, texte info, et game, une fois que DOM est chargé vous appeler main et c’est de main que tout va démarrer donc si vous avez suivi la méthode ActionScript facile, je vous expliquais que toujours de la classe main, bien avec JavaScript, on met également en place la méthode développement facile et tout part de la classe main, du fichier main en JavaScript c’est une fonction main, ça va vous permettre de mieux organiser l’architecture de votre code JavaScript, de vos applications, de vos jeux JavaScript et de gagner énormément de temps pendant votre développement ça c’est une certitude. Vous avez votre instance game, vous créez votre jeu comme d’habitude, vous pouvez réaffecter les fonctions appelées directement par le Framework phaser, préload, création du niveau de jeu, et update qui est appelé régulièrement et en fait c’est très simple une organisation objet, si vous avez l’habitude de créer avec du C++, de coder en C++, PHP, ActionScript, vous savez de quoi je parle, ça simplifie énormément les choses, vous créez une nouvelle instance de level pour construire votre niveau de jeu, vous lui passez l’objet game, bien évidemment, et vous appelez la méthode preload pour lancer le pré chargement du jeu et ici on lance tous les pré chargements des éléments du jeu donc pour toutes les classes, pareil pour Player et pour texte info il n’y a pas de préload à faire c’est uniquement les fonctions JavaScript de bases qui sont utilisées pour créer du texte, pour créate c’est aussi simple que ça, on active les lois de la physique, la gestion des collisions la gravité sur l’élément du jeu, sur l’instance du jeu, level on créé le niveau de jeu, on créé le score et on créé le joueur et ensuite on met à jour le niveau de jeu, donc ça gère le niveau de jeu, les collisions entre la plate-forme et les étoiles, la gravité, les étoiles qui rebondissent, ici vous les voyez rebondir sur les plates-formes, je vais recharger le jeu, voilà comme ça vous verrez les étoiles rebondir sur les plates-formes et vous avez le joueur, évidemment, le déplacement de joueur quand il touche une étoile et la mise à jour du score, alors voilà votre jeu il est fini en fait, le preload pour chaque classe, la création de chaque classe, et l’update pour les classes concernées, fonction main, le fichier main contient uniquement ça, c’est ce qui permet de lancer votre jeu à tous les coups, vous voyez le gain de temps énorme et le fait de pouvoir travailler à plusieurs, donc chaque développeur va évidemment, là c’est un jeu de très simple pour que vous puissiez comprendre le principe, après lorsque vous allez créer des jeux beaucoup plus complexes, voyez la puissance de la mise en œuvre de cette méthode de développement, chacun travaillera sur une classe, donc là on récupère l’instance game, c’est là-dessus ou on va charger les éléments du jeu dans le préload, on a une variable pour la plate-forme, pour le groupe des étoiles, et après c’est exactement le même cours que précédemment, moi j’ai juste fait un copier coller en adaptant le nom des variables, c’est aussi simple que ça, donc je ne vais pas réexpliquer ce qu’il y avait, je vous renvoie au cours précédent, si vous voulez savoir comment ça fonctionne.

Pour résumer tout simplement là on crée tous les éléments du jeu que ce soit les plates-formes, le background avec le ciel, création des plates-formes et création des étoiles sur lequel le joueur va pouvoir interagir, il y a une gestion des collisions entre les étoiles et les plates-formes, que les étoiles rebondissent tout simplement sur les plates-formes, regardez ici, ça rebondie, ici pareil ça rebondit et ici pareil ça rebondit jusqu’au en haut ou ça va redescendre, voilà, tout simplement.

Ensuite vous avez votre joueur, même principe de fonctionnement vous conservez des propriétés locales pour vos éléments, game, l’objet game ou vous chargez les Sprite du héros, donc les animations du héros, vous créez votre héros, gestion de la gravité, du rebond, les animations gauche et droite, la gestion du clavier donc vous récupérez une référence vers la gestion du claviers, donc les touches directionnelles appuyées par le héros, collectStar c’est appelé grâce à update, ici qui est appelé régulièrement car il est appelé ici par le Framework Phaser par game toutes les X millisecondes et update appel haut Player.update, la méthode update sur le Player tout simplement, donc à chaque fois qu’il y a une collision entre la façade, à chaque fois que le joueur touche une étoile, pareil comme le cours de la dernière fois, on enlève l’étoile et on incrémente le score de 10, on va changer on va mettre de 13 pour changer ça peut être tout aussi sympa, voilà la gestion des collisions entre le joueur et les plates-formes, ça lui permet de pas passer à travers une plate-forme, c’est mieux, c’est-à-dire là il ne peut pas passer par-dessus, si il saute ici, il rebondi sur une plate-forme il ne tombe pas au sol, voilà tout simplement, et là en fonction de si le joueur appui sur la touche gauche on le déplaçait à gauche, si il appui sur la touche droite on le déplace à droite, si le joueur ne bouge pas, comme ici il est en position debout au milieu, on a également géré les profondeurs du jeu c’est-à-dire que le joueur passe par-dessus le score, les étoiles je crois qu’elle passe par-dessus, non en dessous du score et donc vers la méthode update du joueur on en était au joueur, on permet au joueur de sauter uniquement lorsqu’il touche le sol et texte info c’est le plus simple c’est le score qui est affiché ici, il n’y a pas de préload, pas d’éléments à pré chargés, pas d’éléments à mettre à jour en direct, pourquoi ? Regardez ici gestion des collisions, le joueur touche une étoile, on accède à haut texte info, là on a la référence variable globale à tous les éléments, toutes les classes JavaScript donc on récupère l’instance .score.scoretext, ici .Score scoretext que l’on met à jour à chaque fois que le joueur touche un élément donc c’est ici mis à jour par la classe Player.

Bien évidemment dans les prochains cours vous allez voir des méthodes encore plus efficaces, là il faut connaître l’instance c’est-à-dire il faut savoir qu’elle s’appelle comme ça, y faire référence, dans les prochains cours vous allez carrément utiliser les événements c’est-à-dire ici dans collect star, vous enverrez un événement avec la valeur du score à mettre à jour, texte info va récupérer cet événement dans une fonction et il va mettre à jour tout seul le score du texte, texte info va écouter les éléments envoyés par la fonction collectStar, il va récupérer la valeur que collectStar va faire, event Broadcasteur, le nom d’événement update score la valeur 13, lui il aura une fonction écouteur, rappelez-vous les designs patterns, les modèles de conceptions, je vous en ai souvent parlé, il va récupérer la valeur et mettre à jour le score, ce qui permet un couplage très faible entre les classes parque le défaut, c’est normal, je commence par les éléments de base pour vous aider à progresser, je vous donne petit à petit le contenu de la méthode développement facile, le problème c’est qu’il faut connaître cette référence-là, texte info, il faut avoir une référence ici, la connaître donc les deux classes sont fortement liées, Player et texte info ce qui est dommage, avec les éléments il y a une juste à envoyer un événement il n’y a pas besoin de connaître texte info c’est pas grave et toutes les classes qui veulent connaître le score n’ont qu’à  s’abonner aux éléments diffusés par le Player, voilà donc ça ce sera la prochaine évolution dans les prochains cours vous allez apprendre à mettre en place des modèles de conceptions notamment singleton, commande, observer, modèle vu contrôleur, dans un jeu, dans une application JavaScript avec le framework Phaser, vous allez découvrir d’autres frameworks, donc voilà le jeu de plates-formes sans prétention, mais ça vous permet de comprendre les bases d’utilisation d’un Framework, comment ça peut se simplifier votre développement, en plus le code est compatible avec la majorité des navigateurs, vous pouvez exécuter le jeux sur les Smartphones, sur les tablettes, sur les ordinateurs de bureau sans aucun problème il fonctionnera tout le temps, et l’avantage c’est que tout est correctement organisé, vous voulez changer le niveau, vous travaillez sur ce fichier, vous voulez changer le score vous travaillez sur ce fichier, vous voulez changer le moteur du joueur, sont principe comment il bouge, la gravité, ses actions vous travaillez uniquement sur ce fichier, voulez rajouter une classe, vous travaillez uniquement sur ce fichier, toute est propre, tout est bien organisé c’est facile de s’y retrouver même si vous revenez 3, 4 mois après pour faire évoluer le jeu vous y retrouverez toujours.

Maintenant comme d’habitude, sous ce cours vidéo vous retrouverez le code source en téléchargement complet, le code source, vous pouvez vous en inspirer pour créer vos propres jeux pour mobile, ordinateur de bureau grâce à JavaScript et HTML 5, si vous avez des questions posez les directement sous ce cours l’équipe développement facile vous répondra et vous aidera à résoudre vos bugs et vos difficultés que vous pourriez rencontrer dans la mise en œuvre de ce code et maintenant juste au-dessus de ce cours vidéo, il y a une bannière, cliquez ici pour lancer la deuxième vidéo donc je vous invite dès maintenant à regarder la deuxième vidéo, vous allez apprendre énormément de choses, si vous voulez créer des jeux performants sur les Smartphones, les tablettes, les ordinateurs de bureau en utilisant HTML 5, JavaScript, l’API canvas ou le WebGL, à simplifier la vie grâce à l’utilisation de Framework qui vont énormément accélérer votre processus de développement, vous permettre de travailler en équipe, d’éliminer une grande très grande majorité des bugs dès la conception de vos applications, de vos jeux, cliquez dès maintenant sur cette bannière, sur le lien pour lancer la deuxième vidéo, en plus vous pourrez profiter des experts de l’équipe développement facile pour répondre à toutes vos questions pour vous aider à créer des applications et des jeux de plus en plus performants compatibles sur tous les navigateurs, donc moi je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source du jeu de plateforme organisé avec des objets

Retrouvez le code source commenté orienté objet de l’exemple de la vidéo

Posez vos questions sur la programmation orienté objet

Utilisez la zone commentaire pour poser vos questions sur le cours vidéo que vous venez de suivre.