Emission #10 Gérez les interfaces de vos jeux JavaScript – La Programmation Expliquée à ma Copine

Apprenez aujourd’hui à basculer entre les interfaces du jeu Pacman avec le framework Phaser.

Toujours avec Sandrine et Matthieu pour la programmation expliquée à ma copine.

Tout est dans la vidéo ci-dessous.

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

Emission #10 Gérez les interfaces de vos jeux JavaScript – La Programmation Expliquée à ma Copine

Matthieu : Bonjour et bienvenu sur l’émission « la programmation expliquée à ma copine », bonjour Sandrine.

Sandrine : Bonjour Matthieu.

Matthieu : Rappelez-vous dans la dernière émission, vous avez appris comment modifier le jeu Pacman pour lui rajouter des vies, des bonus, et vous étiez arrivé à un moment, on était arrivé à un moment ou Sandrine, le niveau était terminé, on devait basculer sur une nouvelle interface et donc comment faire ça avec le framework Phaser, c’est ce que vous allez apprendre aujourd’hui, c’est une émission vraiment très courte pour vous montrer comment basculer d’interface. On va déjà regarder un exemple de jeu avec un bouton, jouer, on a changé d’interface là, donc là il y a deux boutons, est-ce que le prochain nombre sera plus grand ou plus petit, on dit qu’il va être plus petit, on est toujours sur la même interface, on a juste fait une animation en déplaçant le nombre, le prochain il va être plus grand, c’est aléatoire, je peux me tromper, c’est des nombres de un à neuf, donc si je dis plus grand je vais forcément perdre.

Sandrine : Ah là oui c’était obligé.

Matthieu : Game over, donc là on a changé d’interface, si je reclique sur le bouton jouer, on va rechanger d’interface. Donc j’appuie sur le bouton jouer on change d’interface. Le but du jeu c’est de deviner, là on a le nombre 4 affiché à l’écran, si le prochain nombre sera plus grand ou plus petit. C’est un jeu de hasard, on se dit que le prochain sera plus petit, pas de bol il est plus grand donc on a perdu et à chaque fois comme ça on bascule d’interface. Comment faire ça avec le framework phaser, c’est pour compléter le jeu pacman qui est en cours de développement.

Je passe l’inclusion de différent fichiers, on verra au fur et à mesure comment utiliser phaser et séparer le code en plusieurs fichiers parce que tu as du voir en flash ou tu mettais le code, soit un peu partout.

Sandrine : C’est ça

Matthieu : Et des fois il y avait beaucoup de code au même endroit et du coup ça devait être compliqué à maintenir.

Sandrine : Des fois, au départ on a tendance à mettre le code sur chaque objet et il y a du code partout sur tous les objets, après on  se dit tiens, on va essayer de centraliser et du coup ça fait des grandes pages de codes.

Matthieu : Et donc le but que vous verrez dans les prochaines émissions c’est de créer des fichiers ou on saura ou retrouver le code, par exemple un fichier pacman ça concernera tous le code du héros, un fichier ennemis, ça concernera uniquement les ennemis, un fichier création de niveau et donc on se dira dans le fichier création de niveau il y a tout le code pour faire un niveau. Dans le fichier ennemis il y a tout le code pour créer et gérer les ennemis, leurs déplacements. Donc là pour basculer d’une interface à une autre, on va utiliser les états avec le framework phaser, on a un fichier boot.js, un fichier preload, un fichier game title etc. On l’a associé à un identifiant et pour chaque fichier ça va construire une interface, on ajoute nos états à chaque fois et on va utiliser game.state.start ça va lancer l’interface de boot. Et donc dans le fichier boot, on verra le code au fur et à mesure après mais ça va créer toute l’interface de démarrage avec les images, le positionnement des images, etc. Et parès on va lancer notre écran de preload, et donc à chaque fois l’écran de boot est terminé, on appel game.state.start, on lui dit démarre l’écran de preload, et donc si on regarde le fichier preload.js, pareil là on construit, on fait des load images on fait tout simplement ça va afficher des images, on va se dire, il y a telle image là, telle image là, ça va construire l’interface, et après on fait, une fois que le preload est fait, le preload c’est le préchargement de tous les éléments du jeu, ça prend un certain temps, c’est souvent on voit une barre de progression avec un pourcentage, une fois que ça c’est terminé on dit game state. Start, game title, game title comme son nom l’indique si vous parlez anglais c’est l’écran de titre du jeu. On va afficher le titre et le bouton play, donc ici je recharge, le titre et le bouton play. Et à ton avis Sandrine, qu’est-ce qu’il se passe quand on va appuyer sur le bouton play ?

Sandrine : Il va aller chercher quelque chose dans le game phaser.

Matthieu : Oui mais enfaite on va changer d’écran, là on a le bouton play qui est créé, on lui affecte une action, on va appeler cette fonction play game et vu qu’on change d’écran , si on regarde je clic sur play ça change d’écran, et don qu’est-ce qu’on fait au clic sur le bouton play ? On lui dit change d’écran. Game.start play game change d’écran, et on regarde play game, si vous avez oublié play game à quoi ça correspond, identifiant play game ça correspond au fichier the game, on regarde le fichier the game, et là c’est le jeu, on construit le jeu, je passe assez vite volontairement, le but c’est de vous apprendre comment changer d’interface avec phaser et donc qu’est-ce qu’il se passe ? Là on arrive sur le jeu, on a deux boutons, plus grand plus petit, un chiffre. On va regarder les deux boutons clic show siyers, l’utilisateur dit que le prochain nombre va être plus grand ou plus petit, et donc là il y a deux actions différentes ici, soit un nombre plus grand soit un plus petit, on fait un effet de tween number c’est pour l’arrivée du nombre qui arrive comme ça, là plus petit, là perdu, mais ça fait un effet de tween, est-ce que vous voyez le petit effet ? Ca je vous apprendrais à le faire dans une prochaine émission, et donc à un moment le joueur va perdre, ici, le joueur a perdu, si on regarde, qu’on fait exprès de perdre, enfaite on voit qu’il y a un changement d’interface et donc en changement d’interface, qu’est-ce qu’on fait ? Le joueur a perdu, on appel interface suivante, game state.start, afficher l’interface game over, et l’interface game over c’est celle-là, et donc si on regarde l’interface game over il y a un bouton jouer, sur le bouton jouer qu’est-ce que tu mettrais ? Play game tu ferrais l’appel de la nouvelle interface. Est-ce que ça te parle mieux du coup Sandrine ?

Sandrine : Ouais là on parle du rangement de chaque fonctions quoi.

Matthieu : Exactement, on rentre en douceur dans le fait d’organiser son code dans différents fichiers, pour commencer très simplement, vous pouvez vous dire, une interface c’est égale à un fichier. En gros pour débuter il faut bien commencer par quelque chose. Est-ce que tu as une autre question avant de terminer cette courte émission ?

Sandrine : Non c’était clair cette fois-ci.

Matthieu : C’est bon, donc une interface, un fichier et dans ce fichier vous mettez le code qui correspond à cette interface. Comme d’habitude si vous voulez prendre de l’avance sur les émission « la programmation expliquée à ma copine », renseignez votre nom, votre adresse mail sous cette vidéo, vous allez recevoir des cours gratuitement, des cours en vidéo pour apprendre à développer des applications pour le web, pour les smartphones, pour les tablettes, ça va vous permettre de développer en équipe, créer des applications, d’apprendre toutes les stratégies de développement utilisées par des experts. Et si vous voulez être accompagné par l’équipe développement facile, l’accompagnement personnel, à chaque fois vous avez une question, vous la posez, vous joignez votre code source, l’équipe développement facile vous répondra en directe, cliquez simplement juste au-dessus de nous il y a une image, un lien cliquable, cliquez simplement sur cette image, ça va vous rediriger vers une deuxième vidéo ou je vous explique tout ce que vous devez savoir pour créer des applications performantes, sur le web, sur les smartphones, sur les tablettes, pour être accompagné par l’équipe d’expert développement facile, vous êtes en train d’appliquer les cours, vous avez une question, vous la posez, et quelques temps après vous recevez une réponse de l’équipe développement facile toujours avec un exemple, soit pour corriger votre code, votre code source corrigé, soit un exemple supplémentaire de code source, cliquez simplement sur le lien juste au-dessus de nous et vous serrez redirigés vers la deuxième vidéo ou vous allez tout savoir sur la création d’applications performantes. En attendant je vous dis à bientôt pour la prochaine émission « la programmation expliquée à ma copine », Sandrine, pour changer un peu du mot de la fin si tu as un conseil à leur donner, quelque chose à faire, ça peut être à votre tour de mettre en pratique ce cours, ou de créer le pacman comme on a vu au cours des dernières émissions ?

Sandrine : Je dirais que une application bien développée c’est une application bien organisée et bien rangée.

Matthieu : Ça c’est très vrai, très bonne remarque de Sandrine, une application bien développée elle a forcément une structure, une organisation ou on peut se retrouver très rapidement comme Sandrine rien qu’en lisant les noms du fichier boot, game over, preload, elle doit savoir dans sa tête à quoi ça peut correspondre, boot c‘est le démarrage rapide, preload c’est le pré chargement, game over c’est l’écran de perdu quoi.

Sandrine : Et puis il faut penser aussi que l’on est pas seul à développer l’application, on a des collègues, on a intérêt à bien ranger les choses correctement si on veut être compris par les collègues.

Matthieu : C’est très important quand vous travaillez en équipe d’avoir une architecture d’application compréhenssible par vous-même surtout par vos collègues, si vous êtes absents c’est un de vos collègue qui va reprendre le code et le faire évoluer.

Sur ces bons conseils de Sandrine, cliquez sur le lien pour voir la deuxième vidéo et je vous dis à très bientôt dans l’émission « la programmation expliquée à ma copine ».

Sandrine : A bientôt.

[/ppmtoggle] [/ppmaccordion]

Montrez vos interfaces de jeu réalisées avec le framework Phaser.

Utilisez la zone commentaire pour poster les différentes interfaces de votre jeu ainsi que leur transition.