Dans ce nouveau cours sur le framework Phaser apprenez à gérer la sélection des différents niveaux de votre jeu.
Découvrez comment organiser votre code pour faire de la programmation orienté objet.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment gérer les niveaux d’un jeu HTML5 JavaScript en Programmation Orientée Objet avec Phaser
Bonjour à tous et bienvenu sur Développement Facile.
Dans cette nouvelle vidéo vous allez continuer à apprendre à utiliser le Framework Phaser ; au cours de ces dernières semaines, vous avez reçu plusieurs cours vidéo pour apprendre à découvrir les fonctionnalités du Framework Phaser, et croyez-moi elles sont nombreuses, donc vous avez vu quelques-unes de ses fonctionnalités, ainsi vous avez toutes les cartes en main pour créer vos premiers jeux JavaScript HTML 5, que ce soit sur les Smartphones, les tablettes ou les ordinateurs de bureau. Donc on va voir ensemble un dernier exemple, il y en aura d’autres mais pas dans l’immédiat, comme je vous l’ai dit, je vais concentrer les cours développement faciles sur d’autres frameworks JavaScript pour toujours pour créer des applications performantes, pour vous aider à vous améliorer dans votre développement et donc là, vous allez découvrir une nouvelle façon de créer un jeu donc un jeu très simple mais en utilisant un type de programmation orientée objet, c’est-à-dire vous avez le chargement des éléments et ensuite vous enchaînez avec l’affichage de plusieurs interfaces et tout ça en appelant des objets à chaque fois qui vont créer cette interface, donc là c’est la même interface, les niveaux sont bloqués, vous avez un effet de clignotement sur le niveau et là quand vous cliquez, vous choisissez le niveau que vous souhaitez donc soit échouer, résolu, donc passez au niveau suivant, niveau suivant, les niveaux se débloques au fur et à mesure comme ça. Alors c’est un jeu très simple, j’en conviens parce qu’après ça vous d’intégrer l’intelligence, les ennemis, tous ce qu’il y a derrière, l’importance c’est de comprendre comment il fonctionne donc vous avez le Framework phaser, main c’est le démarrage de l’application, le chargement, la sélection d’un level et le lancement d’un level avec le jeu tout simplement.
Dans main, je vais les mettre dans l’ordre, qu’est-ce qui se passe ?
Comme d’habitude, vous avez l’habitude phaser.game sur id, la div qui a comme id game div, vous créez votre objet phaser, largeur, hauteur définies, ensuite vous définissez des variables globales sur votre jeu donc le nombre d’icônes par ligne, voyez ici nombre d’icone par ligne, par colonne, vous avez la largeur d’une miniature, la hauteur d’une miniature, l’espace entre les miniatures que vous pouvez configurer tout simplement, le contenu du tableau donc c’est l’ensemble des niveaux, donc voilà, qu’est-ce que vous avez d’autres comme variables globales, le niveau de jeu en cours, donc il y a un code, niveau non terminé, jouable, niveau terminé avec une deux ou trois étoiles, niveau bloqué, donc ça affichera, voilà avec une étoile, avec deux étoiles, des Sprites différents, des animations différentes, niveau bloqué, vous cliquez ça ne l’affichera pas, bien évidemment, les flèches se désactivent lorsqu’il n’y a plus de niveau, voilà et donc vous ajoutez tous les écrans de jeu, le chargement, sélection du niveau, jouer sur un niveau et vous lancez le premier chargement du jeu en cours dont vous connaissez vous avez déjà eu plusieurs cours sur cette technique de développement grâce à plusieurs fichiers JavaScript c’est très intéressant quand votre application, votre jeu devient de plus en plus complexe, pensez à bien séparer le code, à créer des classes JavaScript dans plusieurs fichiers JavaScript, pour pouvoir vous y retrouver, pour pouvoir travailler en équipe, debuguer facilement, rendre votre application plus performante, plus évolutive. Alors dans le chargement, déjà ça, appel automatique lorsque l’instanciation de l’objet, donc la fonction init est appelée automatiquement donc soit c’est un affichage en plein écran, ou vous modifiez la couleur de fond, moi j’ai juste modifié la couleur de fond, ensuite preload, c’est pré chargement des éléments du jeu, les Sprite, c’est des Sprite, un sprite ça regroupe, c’est une image qui contient plusieurs icônes, plusieurs images en une, et on la sélectionne après, donc les niveaux, les flèches suivant précédent, et le jeu lui-même et ensuite add create c’est la création de la scène, mise en place des graphismes donc vous appelez l’interface sélection de niveau et dans sélection de niveau, en fait c’est tout simplement la construction de cette interface avec les flèches suivant précédent, et le déplacement qui est effectué, vous avez des variables globales tout simplement ici, flèche gauche, flèche droite, vous définissez le nombre de pages nécessaires et ensuite vous définissez la page courante en fonction du niveau du joueur actuel, du niveau qui vient de terminer, la flèche gauche c’est un bouton qui permet d’afficher la page précédente, est ce que la page précédente est possible, s’il y a une page précédente, là il n’y a pas page précédente, on désactive le bouton et on le passe en alpha 03, pareil pour le bouton droit est ce qu’il y a un bouton suivant, possible, là non donc il est désactivé, ce qui est fait ici, on désactive le bouton suivant, ensuite vous créez un groupe de miniatures qui va contenir tous les niveaux et donc sur chaque page, donc là il y a une, deux, trois pages, on va boucler sur les trois pages pour mettre en place toutes les icônes des niveaux. Donc avec un ajustement horizontal pour centrer les miniatures, avec 20 pixels en hauteur, si vous souhaitez le centrer, je vous ai mis en commentaire suffis de remplacer ici et là vous bouclez sur chaque boutons choix du niveau et vous les positionnés, level c’est pour afficher la Frame donc l’image correcte, donc level bloqué, une étoile de gagné, deux étoiles de gagner trois étoiles de gagner, zéro étoile de gagner, et la trois étoiles et là level bloqué, en fonction du level number, terminé en cours ou bloqué, la Frame affichée sera bien évidemment différente, donc level number c’est ce qui correspond à ça, 404, pour l’instant, voilà. Ensuite si le niveau est jouable vous ajoutez le numéro du niveau, si il n’est pas jouable, pas besoin d’ajouter le numéro du niveau, il y a un cadenas, si il est jouable, voyez, numéro six, numéro sept, numéro huit, numéro neuf, et numéro 10, après 11 etc.
Donc bien évidemment vous ajoutez le numéro du niveau avec la couleur, la taille de la police, le texte à afficher tout, un effet de Shadow donc vous ajoutiez un effet d’ombre, c’est donc ça dire vous avez un niveau avec un effet d’ombre derrière donc ça permet de mettre le texte en relief très important, vous apprenez toujours un truc avec phaser, un truc très pratique.
Ensuite, si l’utilisateur a cliqué sur le bouton, soit suivant, soit précédent, bien évidemment on met à jour les différents éléments en effectuant une tween pour déplacer, déplacer soit sur la page suivante, soit sur la page précédente, tout simplement, donc en fonction on clique sur le bouton précédent possible, ou clique sur le bouton possible suivant, possible, donc si c’est la dernière page il n’y a pas de bouton suivant donc on ne rentre pas là-dedans, si c’est la première page il n’y a pas de bouton précédent donc on ne rentre pas là-dedans, ensuite dès que le joueur clic sur un bouton de level, si la Frame du bouton est inférieure à quatre, level 4 ils sont bloqués donc ça fait un clignotement, comment on fait le clignotement ?
Avec une simple tween, en jouant sur la variable variable alpha et pendant un certain temps tout simplement, c’est ce qui permet de faire clignoter le niveau, par contre si il est inférieur à 4, le niveau est jouable donc on lance Play level, ça va afficher l’interface Play level, on créé l’interface tout simplement ici, avec le titre et l’image juste derrière donc ce qui donne le titre, niveau numéro, on le centre, donc il est bien centré, ensuite on affiche les boutons en les espaçant, les différents boutons Frame un, en boucle de zéro à trois, il y a 4 boutons donc de zéro à 3 on boucle, donc c’est un Sprite donc position zéro, Frame zéro, c’est le premier bouton, celui-là, frame zéro position zéro du Sprite, frame un position du sprite du deuxième bouton, troisième bouton, quatrième bouton etc. alors que ça c’est dans une même image, je vais vous la montrer à quoi elle ressemble l’image, donc ça c’est l’image, c’est le Sprite et donc là vous l’affichez comme des boutons indépendants les uns des autres comme des images indépendantes les unes des autres ici et donc si l’utilisateur clique sur un des boutons, ça appelle la fonction level finished et là ça met à jour le nombre d’étoiles en fonction du résultat du joueur. Vous aurez votre niveau qui se charge, qui permet de jouer, et au lieu qu’il y ai un bouton en fonction de vos algorithmes de calcul ; ça attribuera une étoile ; zéro étoile il a perdu le joueur, une étoile deux ou trois étoiles, un peu comme le jeu angry bird vous avez des points, des étoiles à chaque fois que vous terminez un niveau, donc voilà là gagné trois étoiles pour le niveau douze qui est terminé donc comment vous faites pour retourner à la sélection du niveau, bien évidemment, après avoir mis à jour la Frame du bouton ici, tout simplement et on pense à débloquer le niveau suivant en bas, si le joueur à gagner terminé le niveau bien évidemment. Regardez on appelle main, main construit le jeu donc l’instance phaser.game, les variables globales, on ajoute tous les écrans de jeux, donc toutes les classes avec un identifiant bien évidemment et on charge la première classe, on charge tous les éléments, une fois que tous les éléments sont chargés, level select, ou on créé justement cette interface en fonction des résultats du joueur, créer cette interface, dès qu’il clique sur un bouton c’est ici, on affiche l’interface de Play Level ou alors un clignotement parce que le Level est bloqué ensuite l’interface de Play Level voilà, on lance la construction du niveau le joueur joue, niveau treize en cours c’est ici, création de l’interface avec le titre les différents boutons qui sont ajoutés et dès que l’utilisateur à terminé on clique sur un des boutons, on revient à la sélection du Level on fonction de ce qu’il a gagné tout simplement.
Maintenant c’est à vous de jouer, sous cette vidéo vous retrouverez le code source de ce cours en téléchargement, si vous avez des questions posez-les également sous ce cours vidéo l’équipe développement facile vous répondra avec grand plaisir.
Et maintenant je vous invite à cliquer sur le lien juste au-dessus de ce cours vidéo, il y a un lien cliquable, une image, ça va vous renvoyer vers la deuxième vidéo, dans la deuxième vidéo vous allez découvrir la méthode développement facile pour créer en équipe très rapidement des applications JavaScript HTML 5 performantes, évolutives, et très stables avec un minimum de bugs, voir zéro avec c’est possible toujours sur une architecture qui vous permet de rajouter des fonctionnalités de faire évoluer votre jeu, votre application au fur et à mesure du temps qui passe, des demandes de vos clients, donc par exemple vous savez comme moi si vous créez un jeu JavaScript ou une application JavaScript le code généralement, vous le mettez, moi je faisais cette erreur au début seulement dans deux ou trois fichiers, ça vous faisait des fichiers de 3000 lignes donc incompréhensibles au bout de quelque temps, quand il y a un bug c’est difficile à trouver, difficilement évolutif et difficile de travailler en équipe, avec la méthode développement facile vous allez apprendre à séparer votre code en plusieurs fichiers JavaScript, à créer des classes, à implémenter la notion de programmation événementielle, la programmation orientée objet, à utiliser des modèles de conceptions qui vont littéralement simplifier et accélérer votre développement, vous pourrez travailler en équipe, faire évoluer très facilement les fonctionnalités de votre jeu ou de votre application donc cliquez simplement juste au-dessus de ce cours vidéo sur le lien, sur l’image cliquable, je vous retrouve tout de suite dans la deuxième vidéo pour vous expliquer à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger l’exemple de gestion des niveaux d’un jeu avec Phaser
Retrouver le code source commenté de l’exemple vu dans la vidéo
