Comment reproduire le jeu de lumière de Resident Evil avec le Framework Phaser

Apprenez à utiliser très simplement les framework JavaScript Visibility et Phaser pour réaliser un jeu de lumière de survival horror comme Resident Evil.

Tout est dans la vidéo ci-dessous.

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

Comment reproduire le jeu de lumière de Resident Evil avec le Framework Phaser

Bonjour à tous et bienvenu sur Développement Facile.

D6ans ce nouveau cours toujours dédié au Framework phaser, vous allez découvrir comment créer avec phaser, son utilisation, pour créer des jeux sur les Smartphones, les tablettes, que ce soit iPad, iPhone, les smartphones sous Android, les tablettes sous Android et même le Web, avec le Framework phaser vous allez créer des jeux très performants et très rapidement donc voici un nouveau cours ou cette fois, vous allez combiner le Framework phaser avec un autre framework, c’est un framework très léger, il n’y a qu’un seul fichier mais très utile donc maintenant c’est partit, je vous fait pas patienter plus longtemps.

Enfaite c’est un jeu de gestion de lumière donc là volontairement c’est très simple avec des formes mais imaginez, vous créez un jeudi type Survival horror, un jeu comme Resident Evil ou le personnage se déplace, il est avec sa lampe de poche, une lampe de poche plus petite, il y a des obstacles et du coup ça éclaire uniquement la partie qu’il est censé voir et donc ça c’est le Framework additionnel à phaser.

Dans ce cours vous allez apprendre à combiner deux frameworks, phaser et le framework de visibilité en fonction des icônes tout simplement, donc je vais vous montrer un exemple sur le Web de ce Framework deux de visibilité, donc la démo est ici, là c’est la position de la lumière et à chaque fois c’est mis à jour en fonction des obstacles donc c’est un petit Framework est très léger, un seul fichier mais énormément pratique, vous voyez, donc vous imaginez le Survival horror, le resident evil où la personne se déplace avec sa lampe, elle a une lumière qui s’affiche, la zone se découvre en fonction des obstacles, donc elle voit plus ou moins bien les choses, donc c’est ce que vous allez apprendre à utiliser aujourd’hui avec le Framework phaser. Comment ça marche ?

Comme d’habitude le Framework phaser, vous rajoutez le frameowrk visibility polygone et le fichier main ou désactiver le cache. Le fichier main, les variables du jeu donc les obstacles, la lumière, les formes, le nombre de boîtes sur le jeu et le tableau qui contient toutes les formes. Vous créez votre div, donc toujours id game div qui est ici, id game div, id game div qui est ici que vous avez créé là pour phaser donc là je vous ai rajouté pour faire évoluer le jeu, pour faire un petit exercice, plutôt que de déclarer des variables globales à tout le JavaScript, vous créez une variable du jeu game.Globale et vous mettez toutes les variables ici et vous pouvez y accéder simplement, game.Globale le nom de la variable, qu’est-ce que ça vous permet ?

Dans les jeux que vous allez construire qui sont très complexes très évolués, vous allez peut être avoir une dizaine, une vingtaine de variables ici, dans plusieurs fichiers en plus, vu qu’elles sont globales si vous donnez le même nom à la variable vous allez perdu votre jeu risque de buguer et de ne pas fonctionner. Alors que si vous créez des variables globales mais sur la variable game uniquement, donc phaser en fait, .Globale vous les mettez toutes ici et là vous n’avez aucun risque, vous savez déjà ou sont toutes vos variables et vous pouvez mieux, c’est mieux de gérer ces variables plutôt que de créer des variables globales ici, là c’est un exemple, donc je vais au plus rapide mais évitez de créer des variables globales, utilisez plutôt ce système que j’ai trouvé qui est très pratique. On appelle trois fonctions, le chargement, le pré chargement, l’affichage et la mise à jour. Pré chargement, on définit juste la couleur de fond du jeu ici, grise classique, ensuite si vous voulez afficher le jeu en plein écran sur un Smartphone, une tablette vous avez la fonction disponible et là vous allez créer l’environnement du jeu, qu’est-ce que vous allez faire ?

Un écouteur sur le déplacement de la souris, vous allez appeler la fonction move, donc c’est le déplacement du joueur avec sa lampe comme un Resident Evil, ensuite vous créez les obstacles voilà et donc vous allez, là c’est les variables au stack que vous initialisez et vous allez créer, là nombre de forme sur le jeu, il y en a quatre donc vous bouclez à chaque fois, vous créez boîte donc là, création d’une boite c’est un while pour ce jeu il ne faut pas que les boîtes soient superposées, c’est pour ça qu’il y a un test ici pour éviter que les boîtes se superposent, on test est-ce qu’elle se superpose, True ou false et on créé une boite avec largeur, hauteur, position en aléatoire, tout simplement, on définie une couleur de fond pour le rectangle on dessine un rectangle et on termine le dessin de la couleur de fond et ensuite on met notre boîte, notre forme dans le tableau des polygones c’est ce qui permet de créer des formes aléatoires et qui ne se chevauchent pas à chaque fois. Vous créez des formes aléatoires et elle ne de se chevauchent pas tout simplement, voilà et à chaque fois le joueur se déplace donc vous avez les effets de lumières qui sont très bien gérées, tout simplement. Ensuite qu’est-ce qui se passe ?

L’écouteur de la souris, on va appeler move à chaque fois que le joueur déplace la zone de lumière, on appelle move, dans move on utilise le Framework visibility polygone qui est ici donc c’est expliqué son mode de fonctionnement tout en anglais, vous avez même un exemple, visibilité polygone voyez un Framework qui tient dans un seul fichier relativement un petit peu long, donc vous pouvez bien évidemment utiliser, sur Internet vous avez des services en ligne pour compresser fichier JavaScript qui va tout mettre sur une seule ligne, donc je vous conseille d’utiliser ça, si vous utilisez le framework visibilité polygone dans votre jeu en production, utilisez un compresseur de JavaScript qui va réduire sa taille des fois par deux ou trois ça dépend, qui va tout mettre sur une seule ligne toutes les instructions donc vous faites un convert to segments de votre tableau qui contient toutes les formes, tous les polygones et à chaque fois est-ce que la lumière peut s’afficher, oui ou non elle ne peut pas s’afficher, donc qu’est-ce qu’on fait ?

En fonction que la lumière est visible ou non, on met à jour la visibilité de la lumière, tout simplement, on met à jour l’affichage de la lumière ce qui donne ceci en rechargeant, voilà, la lumière s’affiche mais jusque-là ne peut pas s’afficher elle est bloquée donc c’est très pratique pour développer un jeu de type Survival horror, que vous allez pouvoir faire, voilà la lumière est enfermée dans un bloc, enfermée dans un bloc un jeu type résident evil pour mettre le joueur dans l’ambiance avec sa lampe, il se déplace entre les blocs, je vais mettre cinq blocs pour vous montrer, voilà cinq blocs, je recharge le jeu, y’a cinq blocs et le joueur se déplace en voyant des zones de lumière donc voilà, c’est très fin, là il y a un petit flux très léger de lumière, voyez les blocs ne se chevauchent pas, des lumières très léger tout simplement, là il n’y en a même parmi les blocs qui ne se chevauchent pas, là il y en a un petit peu.

Donc maintenant c’est vraiment à vous de jouer, à vous, à partir de cet exemple, de créer votre jeu de type résident evil survival horror et vous trouverez sous ce cours vidéo le code source complet de cet exemple en téléchargement, si vous avez des questions posez les directement également sous cette vidéo, l’équipe développement facile vous répondra et je vous invite si vous voulez aller beaucoup plus loin, donner un coup d’accélérateur à la création de vos jeux pour les mobiles, que ce soit les tablettes iPad, les mobiles iPhone ou Google Android et même sur le Web, donc apprendre à utiliser le framework phaser et également d’autres framework comme par exemple unique framework, juste au-dessus de ce cours, il y a une bannière cliquable, cliquez simplement sur cette bannière et je vous explique tout dans la deuxième vidéo, vous allez découvrir comment les experts de l’équipe développement facile vont vous accompagner dans votre apprentissage de la création de jeux performant sur les mobiles, les tablettes, iPhone, iPad, Android donc une équipe d’experts en développement qui va vous accompagner, répondre à toutes vos questions que vous pouvez vous poser en fonction de tel ou tel exemple, comment l’implémenter, il y a un truc que je comprends pas, comment faire, vous allez apprendre des modèles de conceptions, travailler en équipe, tout ça c’est dans la deuxième vidéo cliquez simplement sur le lien au-dessus de ce cours et vous saurez tout sur la création de jeux performants sur mobile tablette et le web, je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de jeu de lumière

Retrouvez le code source commenté du jeu de lumière réalisé avec le framework Phaser et le framework Visibility

Montrez nous vos exemples d’implémentation du framework Visibility

Utilisez la zone commentaire pour poster vos implémentations du framework Visibility dans vos jeux