Découvrez comment développer rapidement et très simplement des jeux en JavaScript avec le framework Phaser.
Ce cours est illustré avec le jeu Flappy Bird lui même ici développé en JavaScript avec Phaser.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez rapidement et facilement des jeux JavaScript HTML5 avec le Framework Phaser
Bonjour à tous et bienvenu sur développement facile.
Donc rappelez-vous dans les cours précédents vous avez commencé à découvrir la création d’applications et de jeux avec JavaScript et l’API Canvas et en utilisant des Framework JavaScript pour simplifier et accélérer votre développement. Dans les dernières cours vous avez notamment appris à créer le jeu pong avec createjs donc le framework createjs.com et vous avez vu que l’utilisation d’un Framework ça simplifie énormément le développement par exemple pour ajouter des tween, pour ajouter un preload donc une barre de progression du chargement pour gérer les événements etc. etc. pour toute la gestion du jeu.
Dans cette nouvelle série de cours vous aller découvrir le Framework Phaser donc ç’est un framework JavaScript spécialisé dans la création d’applications HTML 5 pour les ordinateurs de bureau, pour les Smartphones et pour les tablettes. C’est un framework gratuit, rapide et opensource qui vous permet de développer avec JavaScript et TypeScrypt que ce soit des applications mais plus des jeux en fait des jeux JavaScript très performant. En fait y’a tout un tas de méthode, de classes, de fonctionnalités disponibles dans le Framework Phaser que ça vous simplifie énormément le code. Ensemble on va créer des jeux donc des jeux très simples et ça va vous permettre de découvrir le fonctionnement du Framework.
Il se présente comme ça, comme sur l’écran voici ce que ce que vous pouvez faire donc ça gère webGL Canvas, le preloader, la physique ç’est à dire les effets de collision, de rebondissements, de gravité, les sprite pour les graphismes, les groupes, les animations les particules, donc des petites explosions toutes ces animations là, la caméra, les inputs clavier souris, le son, tilemaps c’est des petites … en fait on divise une zone de jeux dans un tableau et à chaque fois on affiche une certaine partie du tableau et donc la zone de jeu change donc les tiles, ça s’adapte par rapport aux périphériques que ce soit sur tablettes, Smartphones ou ordinateurs le jeu la taille du jeu va s’adapter. Vous pouvez ajouter des plug-ins c’est compatibles avec la plupart des navigateurs etc. etc. Donc vous pouvez le télécharger via Github et après vous avez plusieurs tutoriels donc ç’est en anglais, c’est pour ça qu’à travers développement facile vous allez avoir toutes les explications en français pas à pas, à travers plusieurs cours vidéo. Il y a même des livres qui ont été créés, donc ne vous inquiétez pas, bien évidemment, derrière après, avec tous les cours que vous aurez eu, je vais écrire des livres qui seront en vente sur Amazon spécialement dédié aux Framework Phaser et surtout qui seront en français avec les codes source avec un accompagnement par l’équipe développement facile. Un petit peu si vous avez vu le livre JavaScript pour créer des applications performantes en cinq étapes, ce sera la même chose, ce sera un livre très accessible avec un tarif très accessible sur Amazon complété par des cours vidéo et un support par l’équipe Développement Facile et l’ensemble des codes source en téléchargement. Donc voilà ça c’est la page d’accueil de Phaser, ensuite vous avez plusieurs exemples donc il est vraiment très très bien fait ce site. Regardez vous avez énormément, énormément, d’exemple. Donc c’est vraiment génial. Voilà donc la vous pouvez gérer les collisions donc c’est vraiment … l’avantage c’est que vous avez le visuel ici et juste en dessous du visuel vous avez le code source et à chaque fois vous créez une scène de jeu donc c’est là où ça va faire appel à WebGL ou l’API Canvas de JavaScript en fonction, le préload, c’est là où vous chargez les éléments graphiques que ce soit les images, vous pouvez même charger des son aussi au format Web, MP3, tout ce que vous avez besoin et après vous créer la physique de votre jeu la méthode update qui est appelée en continue. Bien évidemment je vais vous ré-expliquer tout ça dans le détail à travers un exemple, un jeu, un exemple de code source voilà dans c’est vraiment très très pratique. Qu’est ce qu’on peut prendre comme exemple ? voilà donc la vous avez un autre type de jeu donc avec finalement un niveau de jeu que vous pouvez parcourir mais qui a des bords sur le coté on va arriver sur le bord droite, bord en bas et regarder le code source comme d’habitude vous créer votre zone de jeu, vous chargez les éléments vous mettez en place le décor la méthode update qui est appelé en continue donc là flèche gauche, flèche haute, flèche basse, loilà ça gère en continue le curseurs en continu et on regarde un dernier exemple que je prends au hasard par exemple les boutons, voilà, rapide les boutons, très, très rapide, over, voilà, cliquer, relâcher, aller un dernier exemple avec par exemple le serpent … donc ça permet de faire un serpent après c’est la où vous rajoutez la collision et vous pouvez développer très facilement le jeu snake parce que là il n’y a pas de collision gérer par le moteur mais regardez toujours votre zone de jeux, vous charger une seule image une balle qui a été répétée plusieurs fois vous créer votre jeu vous gérez les entrées du keyboard avec le curseur key donc c’est les touches directionnelles, gauche, droite, haut, bas, voilà, update qui est appelé en continue et le rendu graphique et tout ça c’est grâce au Framework Phaser et bien évidemment la vous avez toute la documentation qui est très bien faite, très complète, très, très, pratique à consulter.
Alors qu’est-ce que l’on va voir ensemble dans les prochains cours, donc dans les prochains cours on va voir ensemble la construction du jeu Flappy Bird. Donc moi je ne suis pas très fort du tout à ce jeu, comme vous pouvez le remarquer et donc vous allez apprendre comment en quelques lignes de de code vous pouvez créer très facilement ce jeu donc très simple, très rapide à charger y’a du son, là j’ai couper le son du jeu volontairement parce que sinon ça gêne pendant le cours vidéo.
Si vous regardez code source, qu’est-ce que vous avez à faire dans votre page HTML ? Donc le framework du jeu Phaser bien évidemment, le fichier main.js qui contient tout le le code source du jeu voilà donc qui est appelé en chargement. Bien évidemment, vous gérer le fait qu’il n’y ait pas de cache c’est-à-dire que vous désactivez le cache du navigateurs parce que vous êtes en phase de développement. Donc pendant le développement du jeu il n’y a pas besoin du cache du navigateur et c’est tout ce qu’il y a à faire, le reste ça sert à rien enfin si, vous avez une div pour le jeu, pour inclure le jeu donc pour acquérir une balise Canvas, l’API Canvas de JavaScript, le WebGL tout simplement. Donc ça, vous pouvez le supprimer. La page HTML très simple, deux include, les fichiers JavaScript, le source du jeu pour le lancer, l’exécuter, le Framework Phaser, une div que vous nommez ici et là vous avez tout votre jeu. Donc le code source est relativement court, c’est normal parcequ’il y a le Framework Phaser qui gère énormément de choses donc comme d’habitude on appelle la fonction main une fois que le DOM est chargé, vous créer votre zone de jeu grâce à l’ID du div réservé à cet effet ici idGameDiv, voilà vous définissez la taille de votre zone de jeu et c’est parti chargement des éléments, création de la scène de jeu, mise en place des graphismes, mis à jour du jeu donc gestion des collisions par exemple le saut de l’oiseau, du héro, la construction des tuyaux, redémarrage du jeu en cas de gameover voilà, c’est aussi simple que ça.
Donc tout ça, je vais vous l’expliquer dans les prochains cours donc dès maintenant vous pouvez télécharger le code source complet et commenté du jeu Flappy Bird là sous cette vidéo, sous ce cours vidéo.
Si vous avez des questions posez-les directement sous ce cours vidéo tout en sachant que vous allez avoir des cours dans les prochains jours qui expliquent en détail la création du code source de ce jeu donc vous allez apprendre à faire la même chose au fur et à mesure de la création de plusieurs jeux grâce aux framework Phaser, vous allez découvrir une bonne partie de ses fonctionnalités.
Donc ce que je vous propose maintenant c’est de cliquer sur le lien juste au-dessus de cette vidéo il y a une bannière, une image, cliquez ici pour lancer la deuxième vidéo et dans la deuxième vidéo vous allez aller beaucoup, mais beaucoup plus loin dans la création de jeux avec le Framework Phaser, avec createjs avec d’autres Framework. Vous allez découvrir la création d’applications performantes et de jeux performants avec JavaScript WebGL et l’API Canvas que ce soit pour les Smartphones, les tablettes ou les ordinateurs de bureau. Donc vous allez découvrir tout ça dans la deuxième vidéo vous aurez un support personnalisé par l’équipe Développement Facile donc je vous explique vraiment tout le dans le détail dans la deuxième vidéo pour créer des jeux JavaScript vraiment très facilement en HTML 5, JavaScript compatible avec la majorité des navigateurs mobiles tablettes donc cliquez simplement sur la bannière au-dessus ce cours vidéo sur le lien. Je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer, à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Retrouvez ici le lien vers le site officiel du framework Phaser
