Aller au contenu

Concevez votre jeu de Noël en Programmation Orientée Objet avec le Framework JavaScript Phaser

On continue ensemble avec les cours sur le framework Phaser.

Aujourd’hui vous allez apprendre à mettre en place la programmation orienté objet dans le développement de jeux vidéo avec le framework Phaser.  Cela vous permettra de’avoir un code mieux organiser et donc plus évolutif et beaucoup plus maintenable.

Tout est dans la vidéo ci-dessous.

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

Concevez votre jeu de Noël en Programmation Orientee Objet avec le Framework JavaScript Phaser

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau tutoriel sur le framework phaser, c’est un Framework rapide, gratuit, open source qui vous permet de créer des jeux pour les mobiles donc pour les tablettes, les Smartphones et les ordinateurs de bureau, des jeux en HTML 5 JavaScript très facilement, parce que ce Framework contient tout un tas de fonctionnalités qui vous simplifient la vie.

Dans ce nouveau cours vous allez continuer à découvrir les fonctionnalités du framework phaser, la série phaser, et là vous allez apprendre, à un travers un exemple, comment mettre en place la programmation orientée objet, c’est-à-dire aussi vous avez des jeux qui contiennent une multitude interfaces, de code JavaScript à créer, il faut que vous appreniez à séparer votre code dans plusieurs fichiers JavaScript.

Là, pour faire un truc aussi simple que ça, le préloader que vous voyez au début, je vais vider le cache, vous avez un petit préloader, barre de chargement au début, la neige qui tombe, une arrivée d’une tween, une deuxième tween qui arrive et après il y aura un bouton pour lancer le jeu donc là c’est très simple, comment vous faites ?

Comme d’habitude vous votre index.html pour Smartphone, tablette, ordinateur de bureau, vous incluez le fichier JavaScript phaser puis vous incluez main, ça va lancer le jeu directement, le boot ça prépare le démarrage avec la barre de progression, preload ça lance le chargement des différents éléments et ça c’est l’interface d’accueil du jeu, et suivant les interfaces, les niveaux de votre jeu vous rajouterez d’autres fichiers JavaScript, vous avez un fichier JavaScript, c’est un petit peu comme la programmation orientée objet, un fichier JavaScript contient une classe, une gestion d’un objet qui gère une ou plusieurs fonctionnalités à lui tout seul. Vous remarquez que je désactive le cache du navigateur parce que là on travaille en mode développement, donc on ne veut pas que le navigateur mette dans son cache le fichier JavaScript, alors votre classe main, c’est comme d’habitude, ça change pas, dès que le DOM est chargé, on lance la fonction main, on créé une nouvelle instance phaser.game avec hauteur, largeur du jeu sur l’id de la div qui comporte l’identifiant game div, donc sur cette div là on va intégrer le jeu au format avec l’API canvas ou le WebGL, on renomme les méthodes qui sont appelées automatiquement par le Framework phaser, on rajoute une petite fonction de load qui est très pratique pour savoir quelles classes sont chargées, quelles classes sont instanciées etc. pendant le déroulement du jeu, et là on prépare les différentes interfaces du jeu, le boot, le chargement et l’écran d’accueil. Donc add, add, add, on ajoute les classes les unes après les autres qui vont gérer leurs propres fonctionnalités de manière autonome et là on va lancer la classe boot démarrage du jeu, là il n’y a rien, on pour ajouter d’autres éléments que vous connaissez grâce aux nombreux tutoriel sur phaser, je vous ai expliqué le fonctionnement de ces différentes fonctions, donc là on start boot, boot qu’est-ce qui fait ? Init c’est appelé dès le départ, dès le lancement de l’objet boot, donc game.load, on fait un appel aux debug, game.load et ça affiche un élément debug, je vous affiche le debug, je relance le jeu, on lance l’interface boot, la classe loading, et le game title, voilà, dans l’ordre ou ça se passe, donc ça vous permet de vous repérer, quand vous aurez un jeu JavaScript fait avec phather vous aurez, je ne sais pas, peut être une vingtaine, voir une trentaine de fichiers JavaScript différents au moins vous saurez ou vous êtes et ce sera beaucoup plus simple pour vous de détecter les bugs, je vous assure ça fais partie de la méthode développement facile.

Dans boot, le log, l’initialisation, au preload l’image de préchargement, on la voit très peu ici parce que je l’ai installée en local le jeu, je vais le mettre, ça va gêner pour le tutoriel de le mettre sur Internet mais il est en local, vous voyez très rapidement la bannière et la barre de progression du changement, donc la bannière le loading pour le jeu, on active la gestion des collisions et on lance l’écran suivant, le boot c’est juste le chargement, le loading donc c’est vraiment le strict minimum dans le boot, la barre de chargement et le logo, c’est tout, ensuite on active la gestion des collisions, on lance l’interface suivante, dans l’interface suivante pareil, appel du debug, on prépare une barre de chargement qui va faire apparaître le loading, l’image de loading, on va la faire apparaître au fur et à mesure, ça fait une progression comme vous voyez ici là, voilà très rapidement une progression, ensuite on la met à jour régulièrement en fonction du chargement de tous les éléments, on place le logo juste au-dessus de la barre de chargement, donc le logo qui est ici, ça marche par id, vous affectez un répertoire avec un fichier un id, donc là l’id loading, l’id logo et après vous lancez le chargement de toutes les images du jeu que vous avez l’habitude, les animations, les Sprite du jeu donc les flocons de neige, petits et grands, et la musique, et ensuite vous lancez l’écran suivant donc c’est aussi simple que ça en fait, vous ajoutez toutes vos interfaces du jeu et vous lancez la classe que vous souhaitez, ensuite la classe suivante créate, la classe suivante, et là vous avez vous arrivez dans votre accueil du jeu donc ici, vous allez voir arriver une tween pour joyeux Noël, une deuxième tween pour dev facile, comment vous construisez tout ça ?

L’image de fond du jeu, vous l’ajoutez, background, qui a été chargée, ici ensuite vous ajoutez la neige en arrière-plan donc vous faites descendre la neige en mettant la vitesse en X, en Y, la gravité, sur quelle largeur de l’image, vous voyez les flocons de neiges qui tombent, les petits sont en arrière-plan alors que les grands ils sont en avant plan, ils passent par dessus le texte donc en arrière-plan par-dessus la neige, on ajoute l’image du village sous la neige donc ça fait un petit effet 3D la neige passe derrière le village alors que les gros flocons par-dessus ensuite, vous ajoutez le titre du jeu par-dessus, le sous-titre, la musique que vous lancez en boucle, et vous ajoutez la neige au premier plan donc les gros flocons sont bien au premier plan devant le village devant le texte et c’est là ou vous faites l’apparition du village petit à petit derrière, ça fait un effet regardez le village il apparaît au fur et à mesure, voilà un petit effet d’apparition, c’est comme ça qu’il est fait avec le Black donc Black c’est juste un écran noir, tout simplement, vous créez une tween et la tween elle va en zéro alpha, elle était en cent, donc il était affiché, il va être masqué au fur et à mesure sur une durée de quatre secondes tout simplement. Ensuite vous avez show title, il est appelé ici show title, donc vous créez un événement donc là vous avez placé vos titres, placé le sous-titre, vous allez faire apparaître au bout de quatre secondes les titres, vous créez une tween, elle va se déplacer en X jusqu’à 320 en deux secondes et à la fin de la tween d’apparition du titre, donc le titre va faire ça, si on regarde ici le titre, il arrive, il passe ici, ensuite le deuxième, donc comment on fait ça ?

En deux secondes le premier titre arrive comme ça, ensuite vous avez à la fin une fois que le premier titre est apparu le sous-titre est appelé, donc on va l’ajouter et il va apparaître dans l’autre sens tout en X 390 en deux secondes, donc ça fait, il y en a un qui apparaît comme ça, le titre la tween se lance ici, la tween est terminée, le sous-titre apparaît ici de ce côté, donc voilà ça vous permet, là c’est un jeu très simple mais quand vous aurez des jeux beaucoup plus compliqués, là vous pouvez rajouter un bouton et par exemple au clic sur le bouton, vous construisez un bouton, on clique sur le bouton, dès que la personne clic sur le bouton vous faites un game.star level, vous aurez rajouté ici game.state.add level, la classe level, vous aurez un fichier level, là vous faites un game, il appuie sur le bouton dans une autre fonction vous faites un game.start.level, et ça va lancer l’écran de jeu et vous allez construire votre niveau avec create pour positionner tous les éléments, le décor, les interactions, l’écoute du clavier, des touches du clavier, donc les flèches directionnelles, le déplacement des ennemis, vous allez construire tout ça, vous avez créate init et bien évidemment vous pouvze mettre update qui est ici, update dans ce fichier qui sera appelé régulièrement, là on en a pas besoin donc c’est pas mis, vous avez d’une façon très simple vous pouvez créer un jeu et surtout le plus important l’organiser, organiser votre code dans des fichiers JavaScript différents, donc ça permet, vous faites un boot avec une image, une barre de chargement, un preload de tous les éléments du jeu, les images, les animations, les musiques du jeu avec la progression de la barre de chargement ici, ensuite vous lancez le titre du jeu avec des petites animations de la neige des petits effets de 3D la neige qui passe en dessous, les gros flocons qui passent par-dessus le village, vous faites un effet d’apparition du village ici et une tween sur le titre et le sous-titre, tout simplement, il vous reste plus qu’à ajouter un bouton et lancer game.State.Star level.

Si vous voulez aller beaucoup plus loin, je vous invite, là juste au-dessus de cette vidéo il y a une bannière, un lien cliquable, cliquez dessus pour consulter la deuxième vidéo, dans la deuxième vidéo, vous allez aller beaucoup plus loin dans la création de jeux et d’applications en JavaScript HTML 5, vous allez mettre en œuvre la méthode développement facile que ce soit le Framework phaseur et d’autres Framework, ça va vous permettre de travailler en équipe, donc travailler en équipe à plusieurs sur le même projet sans vous gêner, d’une manière cohérente, et si vous avez énormément de code des applications très complexes, vous saurez quelle classe créer, quels fichiers JavaScript créer, où mettre le code JavaScript, comment organiser les interactions entre les différentes classes, les différents fichiers JavaScript, les différents éléments, ça va vous permettre de réduire, grâce à une architecture solide basée sur la méthode développement facile, vous allez réduire le nombre de bug de 90 %, il y a toujours des bugs quand on développe mais il y en aura beaucoup moins, vous saurez, vous aurez des méthodes précises pour trouver les bugs plus rapidement par exemple en mettant en place une console de debug comme celle-là, là vous avez par exemple l’affichage du debug de la classe directement grâce à cette méthode game.log sur l’initialisationgame.log, vous pourrez aller beaucoup plus loin de manière beaucoup plus poussée avec console.log pour détecter le fichier, d’où provient bug et même des fois la variable donc tout ça c’est dans la deuxième vidéo, donc cliquez simplement sur la bannière au-dessus de cette vidéo, il y a un lien cliquable, je vous explique tout dans le détail dans la deuxième vidéo les experts de l’équipe développement facile vous accompagnent personnellement, si vous rencontrez des difficultés à appliquer tel ou tel exemple dans la méthode développement facile, dans votre projet, tel ou tel bug, l’équipe développement facile est là pour vous aider donc je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger le code du jeu de noël

Retrouvez le code source commenté du jeu de noël développer avec le Framework JavaScript Phaser

Téléchargement du code source 20 christmas guest

Cliquez ici pour télécharger le code source 20 christmas guest

Voulez vous d’autre cours sur le Framework Phaser ?

Utilisez la zone commentaire pour nous dire si vous souhaitez que nous abordions ensemble d’autre aspect du 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 >>