On continu ensemble à créer des jeux avec le framework Phaser, plus vous aurez d’exemple, plus vous pourrez facilement développer votre propre jeu.
Cette fois vous allez voir comment réaliser un survival horror ou le but du joueur est de survivre dans un environnement hostile.
Vous verrez ici comment réaliser une ambiance « horror » très simplement.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer un survival horror jeu HTML5 JavaScript avec le Framework Phaser
Bonjour à tous et bienvenu sur Développement Facile.
Alors on continu ensemble, vous allez continuer à apprendre à utiliser le Framework phaser, donc un Framework pour créer des jeux HTML 5 JavaScript beaucoup plus facilement et beaucoup plus rapidement sur les mobiles, les ordinateurs de bureau, compatibles avec les tablettes, les Smartphones et les ordinateurs, aujourd’hui le jeu va consister à créer, c’est un jeu simple, un survival horror, un jeu ou le héros il fait nuit et il doit se déplacer dans un décor, vous imaginez il est avec sa lampe torche et quand il se déplace avec son regard ça éclaire la pièce pour découvrir les éléments.
Ca donne ceci en fait avec la souris, vous déplacez la lumière et donc il se déplace donc c’est vraiment très simple il y a juste des murs, pas d’ennemi, ni rien mais après vous pouvez rajouter des ennemis donc vous remarquez le clignotement de la lumière, les déplacements voilà un petit peu ce que vous allez apprendre aujourd’hui à créer dans ce cours avec le Framework phaser.
Alors comme d’habitude le fichier main.JS qui va lancer le jeu avec le cache désactivé parce que c’est une version de développement, donc faut surtout pas que le navigateur mette le fichier JavaScript dans le cache, le Framework phaser qui est bien évidemment inclus et très important une balise avec un identifiant unique, justement pour pouvoir créer avec l’API canvas tous les éléments du jeu WebGL suivant le navigateur sur lequel c’est exécuté. Comme d’habitude les variables du jeu donc le curseur donc les plus directionnelles, l’objet jeu, le joueur, le mur, le sol, la gestion de la zone de lumière, et la taille du jeu donc dès que le DOM est chargé ça va automatiquement appeler la fonction main et la fonction main on créé la zone de jeu de 640 par 480, API canvas WebGL, on récupère notre div ici donc la div qui est là, et sur les événements du Framework phaser preload update on va appeler onpreload, oncréat et on update, en onpreload on charge toutes les images du jeu donc là on peut changer la couleur de fond du jeu, donc là je la met un peu plus clair ça va permettre de voir la zone de jeu donc les murs et là c’est la zone ou on peut se déplacer donc ça vous donne un aperçu, à quoi ressemble le parcours du jeu, c’est plus simple comme ça pour vous, donc je le remets comme c’était avant, voilà, et là on est dans la nuit en mode Survival un petit peu dans le jeu.
Ensuite oncreate c’est là ou vous allez créer tout le décor, la mise en place des graphismes du jeu donc le Sprite c’est le sol, on met le sol, on créé un bitmap data de la taille du jeu, on dessine les murs, on récupère les murs, ensuite on intègre le joueur, donc toujours sur le game add sprite, add bitmap data, add sprite le sol, les murs, ensuite on écoute le joueur quand il appuie sur les tous directionnelles parce qu’on va faire un déplacement du joueur et on créé un masque pour la lumière c’est-à-dire on masque toute la zone de jeu et avec le masque on va éclairer une certaine partie c’est-à-dire là ou la souris est orientée pour l’éclairage tout simplement. Et tout se passe dans on update qui est appelé en continu pendant le jeu, donc ça c’est le masque, donc si le joueur appui sur la touche basse, enfin, haut, bas, gauche, ou droite, on augmente ou on diminue la vitesse en Y ou X, normal, droite, gauche, haut, bas, on change les valeurs en X et Y, donc est ce qu’il y a un mur ? On vérifie ici s’il y a un mur en testant sa couleur si c’est bien une couleur qu’il n’y a pas de mur, on peut effectuer le déplacement du joueur, ensuite on affiche la zone qui est éclairée donc en fonction de la position du joueur bien évidemment, on va afficher la zone qui est éclairée et là on déplace la zone d’éclairage tout simplement, en fonction de l’endroit où vous éclairez avec la souris c’est-à-dire ou le joueur regarde finalement donc ça se passe ici, on récupère déjà la position du joueur, on calcul un angle, on récupère des pixels, on créé une ligne et ensuite on remplit la ligne, le masque, on va faire un effet de clignotement de la lumière donc l’algorithme du jeu utilise des concepts de masque, d’angle, de couleur avec les get pixels donc plusieurs choses, le dessin d’une ligne donc là ont créé justement l’effet de couleur en créant des lignes de visualisation tout simplement, donc je vous invite vraiment à tester, à regarder ce code source pour créer le jeu donc je vais enlever le masque, comme ça vous pourrez voir à quoi ressemble le jeu, donc là, il n’y a plus le masque vous voyez sur l’écran la zone de lumière de déplacement, il se passe exactement l’inverse bien évidemment, vu qu’il n’y a plus de masque vous voyez la zone complète du jeu avec l’effet de lumière, voilà, donc ça vous donne un aperçu donc c’est vraiment c’est pas très compliqué, je ne dis pas non plus que c’est simple parce qu’il y a quelques notions à bien appréhender, je vais remettre le jeu comme c’était avant.
De toute façon si vous avez des questions posez les directement sous ce cours l’équipe développement facile vous répondra et ensuite vous trouverez le code source de ce jeu en téléchargement direct sous cette vidéo, il est entièrement commenté, et maintenant si vous voulez aller beaucoup plus loin, c’est-à-dire découvrir le Framework phaser, d’autres Framework, comment les modèles de conceptions peuvent vous aider, la programmation orientée objet, parce que là vous voyez que votre code il est orienté un petit peu en procédural, on a pas d’objet, on appel des fonctions, on peut faire beaucoup mieux, parce que dans un jeu plus compliqué si vous deviez gérer les niveaux, les ennemis, le fichier serait énorme en taille, et justement dans la deuxième vidéo vous allez découvrir la méthode développement facile pour créer un ensemble de classe, donc plusieurs chez JavaScript qui interagissent les uns avec les autres, pour travailler en équipe, chacun travaille sur une partie du projet, du jeu, pour utiliser Framework phaser pour créer des jeux beaucoup plus rapidement, compatibles avec les Smartphones, les tablettes et les ordinateurs de bureau donc tout ça c’est dans la deuxième vidéo au dessus de cette vidéo il y a une bannière, un lien cliquable, vous cliquez dessus et on se retrouve directement dans la deuxième vidéo, vous allez découvrir la méthode développement facile, comment bénéficier de l’accompagnement des experts de l’équipe développement facile, je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Télécharger le survival horror vu dans la vidéo
Retrouvez le code source commenté du jeu expliqué dans la vidéo
Téléchargement du code source 12 jeu survival horror
