Share
Introduites dans la version 2.4.7 de Phaser, les nouvelles fonctionnalités de l'appareil photo semblent vraiment intéressantes et méritent d'être vérifiées. Dans ce tutoriel, vous verrez à quel point il est facile d’appliquer des effets de caméra dans vos jeux HTML5 construits avec Phaser..
Remarque: si vous avez besoin d'une introduction au framework Phaser, vous pouvez vérifier Premiers pas avec Phaser: Construire "Monster Wants Candy", où je décompose le code source et l'explique en détail..
Vous pouvez utiliser trois nouvelles fonctionnalités intéressantes: le flash, le fondu et le bougé. Ils font exactement ce que vous pouvez attendre d'eux. Voyons pourquoi cela est très utile et devrait être pris en compte dans votre prochain projet de développement de jeux avec Phaser..
Jusqu'à présent, j'utilisais le plugin Juicy pour réaliser de telles fonctionnalités, mais le code source a été abandonné depuis longtemps et je devais le gérer moi-même. Maintenant, avec les fonctionnalités intégrées et faisant partie du code source de Phaser, je n'ai pas à m'inquiéter des problèmes de compatibilité ou des mises à jour du framework. Ils sont également beaucoup plus faciles à mettre en œuvre.
Je vais utiliser Enclave Phaser Template comme étude de cas. Il s'agit d'un ensemble de fonctionnalités de base, allant des états à la gestion audio et des scores élevés, aux tweens et aux animations. Le modèle est une source ouverte et disponible sur GitHub dans le cadre de l'initiative open.enclavegames.com. Vous pouvez ainsi facilement voir comment tout cela a été mis en œuvre, y compris les nouveaux effets de caméra..
Ok, passons à la partie mise en œuvre réelle.
Le clignotement de la caméra peut être utilisé pour des effets d'impact ou d'impact. Par exemple, lorsque le joueur est touché par la balle de l'ennemi, l'écran peut virer au rouge pendant un court instant. Voici l'effet caméra flash avec les paramètres expliqués:
flash (couleur, durée, force);
Il remplit l'écran avec la couleur unie et disparaît progressivement pour devenir alpha 0 au cours de la durée donnée. Vous pouvez utiliser le paramètre force pour écraser tous les autres effets de flash et en faire le seul effet actif au moment actuel. La couleur par défaut est le blanc et le flash dure une demi-seconde (500 millisecondes):
flash (0xffffff, 500, false);
Le clignotement de l’appareil photo peut être utilisé pour divers effets. Dans le modèle Enclave Phaser, la transition entre les nouveaux états est transparente et permet d'afficher le menu principal une fois toutes les ressources chargées. Au lieu de tout afficher instantanément, nous pouvons utiliser le flash avec une couleur noire comme base:
this.camera.flash (0x000000, 500, false);
Il est exécuté à la toute fin de la fonction de création dans le MainMenu.js fichier représentant l'état du menu. Vous pouvez voir l'effet en action sur un gif:
Comme vous pouvez le constater, cela produit un bel effet d’apparence lisse. Passons maintenant à la disparition progressive de la caméra.
Pour que la sensation de déplacement entre les états soit complète, nous pouvons utiliser le fondu pour obtenir un flash inversé et faire disparaître en douceur l’état. Si cela est fait correctement, cela peut produire un effet de fondu en sortie, ce qui est vraiment joli. Voici la théorie:
fondu (couleur, durée, force);
Les paramètres sont exactement les mêmes que dans le flash de l'appareil photo, sauf que la couleur par défaut n'est pas le blanc, mais le noir:
fade (0x000000, 500, false);
Il commence à remplir l’écran de alpha 0 avec la couleur donnée et se termine par un remplissage uni. Le code source actuel de la clickStart action sur le bouton Démarrer dans le MainMenu.js Le fichier ressemble à ceci:
Accentsconagua
clickStart: function () this.camera.fade (0x000000, 200, false); this.time.events.add (200, function () this.game.state.start ('Story');, ceci); Il fait apparaître l'écran en fondu sur une période de 200 millisecondes, puis lance un nouvel état après le même temps pour synchroniser les deux actions. Voici à quoi ça ressemble en action:
La combinaison du flash et du fondu fait une belle transition entre les états. Passons maintenant à l'effet shake.
Shake est une autre méthode utile pour l’appareil photo Phaser. Elle peut être utilisée dans les situations où un joueur heurte un obstacle lorsqu’il survole un astéroïde ou utilise une puissante bombe de son inventaire. Il peut être exécuté lors d'une collision avec les objets du jeu flottant à l'écran..
shake (intensité, durée, force, direction, shakeBounds);
Le premier paramètre détermine la quantité de tremblement de la caméra et le second la durée de la secousse. Le troisième concerne le remplacement du shake déjà en cours si ce paramètre est défini sur vrai. Le quatrième contrôle le tremblement horizontalement, verticalement ou les deux, et le dernier paramètre détermine si la caméra tremblera en dehors des limites du monde, montrant ce qui se trouve là. Voici l'exemple avec les valeurs par défaut:
shake (0,05, 500, vrai, Phaser.Camera.SHAKE_BOTH, vrai);
Il va secouer la caméra avec 0,05 intensité, pendant une demi-seconde (500 millisecondes), la Obliger paramètre est défini sur vrai, la caméra va trembler dans les deux sens, et aussi en dehors des limites du monde. Si vous n'avez pas besoin de personnaliser le shake et de laisser les paramètres par défaut, vous pouvez simplement les omettre lors de l'appel et le fonctionnement sera le même que ci-dessus:
secouer();
Et voici comment se présente le tremblement dans le code source du modèle Enclave Phaser lorsque les points sont ajoutés dans le code source. Game.js fichier:
this.camera.shake (0,01, 100, vrai, Phaser.Camera.SHAKE_BOTH, vrai);
Les trois derniers paramètres sont exactement les mêmes que ceux par défaut, ils auraient donc pu être omis, mais ils ont été laissés à des fins éducatives. Voyez-le en action:
Dans ce cas, l'intensité est inférieure à la valeur par défaut et la durée est plus courte pour donner l'impression d'être un peu plus faible, afin de ne pas trop distraire le joueur..
Il existe également une petite méthode pratique avec les trois expliquées ci-dessus. Vous pouvez réinitialiser tous les effets actifs et, du point de vue de la programmation, vous n’avez même pas besoin de savoir s’il en existe déjà un à un moment donné. resetFX méthode que vous pouvez utiliser.
this.camera.resetFX ();
Il efface immédiatement tous les effets de caméra en cours et les supprime de l'écran.
Si vous voulez savoir si un effet spécifique est actif ou déjà terminé, vous pouvez utiliser les événements fournis par la structure: onFlashComplete, onFadeComplete, et onShakeComplete.
Vous vous souvenez de l'exemple de fondu au clic du bouton dans le menu principal? Cela a été fait en attendant un certain temps, puis l'État a été remplacé par un nouveau. Nous pouvons le faire mieux en utilisant le onFadeComplete un événement:
clickContinue: function () this.camera.fade (0x000000, 200, false); this.camera.onFadeComplete.add (function () this.game.state.start ('Game');, ceci); Cette méthode a été mise en œuvre à l’étape suivante, dans le Story.js fichier lors du passage de l’état de l’histoire au premier. Vous devez admettre que ça a l'air mieux, et l'état est lancé exactement quand l'effet est terminé, peu importe sa durée.
Comme vous pouvez le constater, ce sont des fonctionnalités assez puissantes pour ajouter ce "jus" ou vernis supplémentaire à vos jeux. En même temps, ils sont aussi très faciles à utiliser. C’est formidable de les voir mis en oeuvre de manière native dans Phaser..
N'hésitez pas à récupérer le code source du modèle Enclave Phaser, à implémenter les effets et à partager des liens vers vos jeux mis à jour avec nous dans les commentaires.!
