Simplifiez votre développement de jeux HTML5 JavaScript avec le Framework Phaser et la Programmation orienté objet

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Découvrez un aspect très important dans le développement des jeux vidéo : les états.

C’est une façon très pratique et une technique éprouvé qui permet de gérer les différentes phases d’un jeu vidéo.

Tout est dans la vidéo ci-dessous.

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

Simplifiez votre développement de jeux HTML5 JavaScript avec le Framework Phaser et la Programmation orienté objet

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours dédié au Framework phaser, le Framework qui vous permet de créer beaucoup plus facilement vos jeux HTML 5 JavaScript, que ce soit pour les mobiles comme les Smartphones et les tablettes et également les ordinateurs de bureau donc dans ce nouveau cours vous allez découvrir un autre principe de fonctionnement du Framework phaser ça s’appelle les States donc les états, en fonction de l’interface du jeu, d’un certain état, à un moment donné clé du jeu vous allez appeler différentes classes JavaScript, donc c’est une autre façon d’utiliser Framework phaser, ça peut être notamment très pratique dans les jeux très complexes avec beaucoup d’interfaces, beaucoup de niveaux, donc vous allez découvrir ça tout de suite à travers un jeu vraiment très simple.

Le jeu s’appelle une chance sur deux, vous avez un bouton jouer et vous devez deviner des nombres qui sont compris entre zéro et neuf, si le prochain va être grand ou plus petit. Là je mise sur plus grand, plus petit, plus petit encore, plus grand, plus petit, plus grand, donc pour l’instant je gagne, plus petit, je gagne toujours, nombre plus grand, plus petit, le nombre… J’avais misé sur un nombre plus petit et le nombre aléatoire état plus grand donc j’ai perdu, j’ai fait un score de huit, vous avez vu c’est un jeu très simple, et il s’avère que c’est des boutons et c’est un enchaînement d’écrans en fait d’interfaces donc des appels de classes qui s’affichent à l’écran.

Comment vous faites avec le Framework phaser pour créer ce jeu, il y a plusieurs fichiers JavaScript, j’ai désactivé le cache du navigateur sur chacun, je les aient mis en mode développement tous ces fichiers, parce c’était plus simple pour tester, comme je vous l’ai dit pendant le développement de votre jeu JavaScript, pensez à désactiver le cache du navigateur sinon vos modifications ne seront pas prises en compte, ce qui est un peu gênant, je n’en donc le fichier main, contrairement à d’habitude pour les jeux complexes il est énorme ou il y a beaucoup de code et justement la méthode développement facile simplifie énormément tout ça, là vous avez un fichier très court, ou vous créez votre instance de phaser game comme d’habitude, et en fait tout, ici la couleur de fond du jeu, donc c’est les fonctions qui sont appelées automatiquement par phaser ici, donc j’ai juste changé la couleur de fond du jeu mais c’est là ou vous ajoutez tous les écrans de jeux avec les classes que vous allez utiliser, donc vous instanciez des classes ici, donc elles sont là, fichier JavaScript à chaque fois plusieurs classes, vous leur donnez un nom et là vous démarrez sur le premier écran de jeu, donc strat la classe boot ça va l’instancier, et donc qu’est-ce que ça fait ?

Il faut activer le debug parce qu’il y a des message de debug, voilà boot the game, on lance la classe boot, le jeu, donc on appelle preload automatiquement et on charge, vous le verrez parce que je lance le jeu, il se charge très vite mais il y a une image de chargement en cour qui est affiché donc et ensuite une fois que le chargement en court est terminé on affiche l’écran suivant donc le preload, donc ça c’était l’initialisation du jeu pour passer en plein écran sur les Smartphones par exemple ou les tablettes, et donc on instancie la classe preload, dans la classe preload, qu’est-ce qu’on fait ? On charge, on ajoute une barre de chargement, tout simplement, et on charge toutes les images donc les number c’est des Sprite ou y’a les nombres de zéro à neuf donc c’est une image sous forme de Sprite avec tous les nombres de zéro à neuf tout simplement et ensuite vous chargez tous les éléments de jeu, donc le bouton Play, le bouton nombre plus élevé, le bouton nombre plus bas, l’écran de jeu perdu et le titre du jeu, et ensuite une fois que tout est préchargé tous ces éléments sont chargés, vous appelez l’écran suivant vous instanciez de la classe game title, qui est ici game title, alors vous créez le bouton, vous affichez l’image game title, le titre du jeu c’est cette image, une chance sur deux, et le bouton jouer en dessous.

Je vous le dis encore une fois, je suis pas du tout graphiste j’ai fait ces graphismes très rapidement avec Gimp, donc ça ne ressemble pas à des boutons, je suis d’accord avec vous, vous ferrez beaucoup mieux, donc vous affichez l’image du jeu donc l’accueil qui est donc set là, chance sur deux et juste en dessous le bouton Play qui est juste là, le bouton Play et donc quand on appuie sur le bouton Play, qu’est-ce qui se passe ? On appelle cette fonction qui va instancier la classe Play game et dans Play game qu’est ce qu’on fait ? Play game je clique, dans Play game vous avez les variables de la classe que vous allez utiliser, donc dans la fonction create vous récupérez un nombre aléatoire pendant la création du jeu la première fois donc ça c’est un nombre aléatoire compris entre zéro et neuf donc vous ajoutez vos Sprite qui contient tous les nombres et vous définissez la Frame donc le nombre random donc la position vous savez dans les Sprite on donne une position donc de 0 à 9 une position et donc là on définit le nom en positionnant notre Sprite au bon endroit, vous créez le bouton de jeu supérieur, clique supérieur ici et le bouton jeux inférieur et quand on clique dessus ça tire un nombre inférieur avec la variable pour savoir si le joueur a appuyé sur supérieur ou inférieur et ensuite qu’est-ce qui se passe ?

On fait une tween d’apparition donc une animation pour faire apparaître le nombre tout simplement donc si les boutons sont bien activés, on désactive le clic des boutons pendant la tween et on faire apparaître le nombre à la fin dès que le nombre à apparu sur le côté voilà comme ça, je vous montre, je clique, le nombre apparais donc là j’ai perdu, je rejoue le nombre apparais encore perdu pas de chance, donc là il sera plus grand, le nombre apparais à la fin de Ia tween on appelle la fonction exit number tout simplement qui va faire disparaître une nouvelle tuile pour faire disparaître donc première tween, deuxième tween le nombre disparaît ensuite, donc il y a deux tweens de disparition. La première et la deuxième pour faire disparaître l’autre nombre et à la fin de la deuxième tween, ça fait que vous pouvez enchaîner les animations comme ça c’est vraiment très pratique d’enchaîner les tween, vous appelez entre un nombre un, vous activez le clic sur les boutons à la fin des tween, et si le joueur s’est trompé on affiche l’écran perdu du jeu, on instancie l’écran game over ça va afficher l’écran perdu sinon et bien il aura le nombre aléatoire toujours et un score qui est lancé tout simplement.

Voilà un petit peu le fonctionnement du jeu, regardez, on a cliqué voilà, on a cliqué, un nombre apparaît, on re clique, on refait un nombre, ça fait dans l’ordre clique sur le bouton, que ce soit l’un ou l’autre, on appelle la tween, ensuite la sortie exit number, on re fait on appelle notre fonction aléatoire une nouvelle fois donc choix d’un nouveau nombre aléatoire ici et on relance l’animation pour sortir vérifier si le joueur à juste ou faux, donc je vais grandir en mettant une seconde pour l’animation de choix, ça permettra de voir le score quand le joueur perd, tout simplement, nombre plus grand, bien évidemment, nombre plus grand, là ce sera un nombre plus petit forcément un nombre plus grand un nombre plus petit, un nombre plus grand et là je vais faire exprès de perdre, voilà, score de sept, très simple ce jeu donc l’animation game over, on affiche un texte avec le score du jeu, le score que l’on récupère ici, on récupère le score ici, couleur blanche ça c’est pour le debug en fait si on affiche le debug vous allez voir le score du jeu s’afficher en bleu, voilà votre score set game over tout simplement, je vous le remonte encore une fois, donc le boot the game on démarre le jeu, ensuite on joue, voilà et là on a perdu, votre score un, votre score un c’est pour le debug, ça permet de debuguer en plus avec un système de couleur, on voit très facilement le démarrage du jeu, le boot, le preload, le score du jeu quand on a perdu donc c’est très pratique cette façon, ça permet de séparer déjà tout votre code en plusieurs fichiers JavaScript, d’utiliser des classes que vous préparez ici, vous initialisez vos classes ici, vous l’instanciez ici en appelant un écran de jeux et ensuite vous enchaînez en appelant les écrans les uns à la suite des autres dans l’ordre que vous avez choisi, vous ajoutez de l’interaction sur des images, des boutons Play the game, là pareil, interaction sur des boutons plus grand, plus petit nombre, nombre supérieur, nombre inférieur et ici si le joueur a perdu, vous lancez un nouvel écran perdu, sinon vous continuez à tourner en boucle avec les cliques sur ces boutons et là c’est l’image de perdu, vous pouvez relancer parce qu’il y a le bouton Play, Play the game ça relance le jeu un petit peu comme le début ou il y a game title Play the game donc c’est un jeu relativement simple mais ça vous montre toutes les possibilités, si vous voulez programmer en utilisant la programmation orientée objet, ça vous montre un exemple comment séparer votre code dans plusieurs fichiers JavaScript.

Comme d’habitude vous retrouverez le code source en téléchargement complet sous ce cours vidéo, si vous avez des questions posez les directement sous cette vidéo l’équipe développement facile vous répondra avec plaisir et maintenant juste au dessus de cette vidéo il y a une bannière donc un lien cliquable qui vous amène dans une deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin, déjà vous allez découvrir comment la méthode développement facile peut vous aider à créer des jeux très complexes, très évolués sur les Smartphones, les tablettes, les ordinateurs de bureau, que vous pourrez travailler en équipe donc mettre à profit la programmation orientée objet, la programmation événementielle et les modèles de conceptions donc toute la méthode développement facile va vous faire gagner un temps phénoménal dans votre développement bien évidemment les experts de l’équipe développement facile sont à votre disposition pour vous aider, à mettre en place la méthode développement facile dans votre environnement de développement donc je vous explique tout ça dans la deuxième vidéo, cliquez simplement au dessus de cette vidéo sur l’image, la bannière, le lien cliquable je vous retrouve tout de suite dans la deuxième vidéo pour tous expliquer de A à Z. A tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de la vidéo

Retrouvé le code source commenté de l’utilisation des états avec le framework Phaser

Downloads

  • 15 bases les états
    15 bases les états

    Code source commenté de l'exemple d'utilisation des états avec le framework JavaScript Phaser

Pensez vous utiliser les états dans vos jeux vidéos ?

Utilisez la zone commentaire pour poser vos questions sur les états dans les jeux vidéo

 

Créez des Jeux JavaScript / HTML5 Performants avec la Formation Gratuite Jeux Faciles!

Apprenez Comment Développer des Jeux sur Mobiles iOS / Androïd, Tablettes et le Web avec les Frameworks Phaser, Threejs...