Advertisement
  1. Game Development
  2. Phaser
Gamedevelopment

Nouvelles fonctionnalités de la caméra à Phaser

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Introduit dans la version 2.4.7 de Phaser, les nouvelles fonctionnalités de l'appareil photo sont très intéressantes et ça vaut la peine de les vérifier. Dans ce tutoriel, vous verrez combien 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 cadre Phaser, vous pouvez consulter Démarrer avec Phaser: Construire "Monster Wants Candy", où je divise le code source et l'explique en détail.

Il existe trois nouvelles fonctionnalités intéressantes que vous pouvez utiliser: flash de la caméra, fondu et agitation. Ils font exactement ce que vous pouvez attendre d'eux. Voyons pourquoi ceux-ci sont très utiles et devraient être pris en compte dans votre prochain projet de développement de jeux avec Phaser.

Jusqu'à présent, j'utilisais le plugin Juicy pour atteindre de telles fonctionnalités, mais le code source a été abandonné il y a longtemps et je devais le gérer moi-même. Maintenant, avec les fonctionnalités intégrées et une partie du code source Phaser, je n'ai pas à vous soucier de problèmes de compatibilité ou de mises à jour de la structure. Ils sont également beaucoup plus faciles à mettre en œuvre.

Enclave Phaser Template

J'utiliserai Enclave Phaser Template en tant qu'étude de cas—c'est un ensemble de fonctionnalités de base, des états à la gestion audio et highscore aux prétentions et aux animations. Le modèle est ouvert et disponible sur GitHub dans le cadre de l'initiative open.enclavegames.com, afin que vous puissiez facilement voir comment tout cela a été mis en œuvre, y compris les nouveaux effets de la caméra.

Enclave Phaser Template

Ok, passons à la partie de mise en œuvre actuelle.

Flash d'appareil photo

En clignotant, la caméra peut être utilisée pour les effets de frappe ou d'impact—par exemple, lorsque le ballon de l'ennemi est touché par l'ennemi, l'écran peut devenir rouge pendant un court instant. Voici l'effet de la caméra flash avec les paramètres expliqués:

Il remplit l'écran de la couleur unie et disparaît à l'alpha 0 pendant la durée donnée. Vous pouvez utiliser le paramètre de force pour écraser tous les autres effets de flash et avoir ceci comme le seul en cours d'exécution au moment actuel. La couleur par défaut est blanche et le flash dure une demi-seconde (500 millisecondes):

Clignotant, la caméra peut être utilisée pour différents effets. Dans le modèle Enclave Phaser, il fait une belle transition transparente lors de l'affichage d'un nouvel état, pour afficher le menu principal après que toutes les ressources ont fini de charger. Au lieu de montrer tout instantanément, nous pouvons utiliser le flash avec la couleur noire comme base:

Il est exécuté à la fin de la fonction de création dans le fichier MainMenu.js représentant l'état du menu. Vous pouvez voir l'effet en action sur un gif:

Enclave Phaser Template - Flash

Comme vous pouvez le voir, cela permet d'obtenir un bon effet d'apparence douce. Maintenant, passons à l'évanouissement de l'appareil photo.

Faisure de la caméra

Pour compléter le sentiment de déplacement entre les états, nous pouvons utiliser un fondu pour obtenir un flash inversé et faire en sorte que l'état se dégrade. Si cela se fait correctement, cela peut entraîner un fondu, un effet de fondu, qui semble vraiment sympa. Voici la théorie:

Les paramètres sont exactement les mêmes que dans le flash d'une caméra, sauf que la couleur par défaut n'est pas blanche, mais en noir:

Il commence à remplir l'écran de l'alpha 0 avec la couleur donnée et se termine par un remplissage solide. Le code source actuel de l'action clickStart sur le bouton Démarrer dans le fichier MainMenu.js ressemble à ceci:

Il disparaît l'écran sur une période de 200 millisecondes, puis lance un nouvel état après le même temps pour synchroniser les deux actions. C'est ce qu'il ressemble à l'action:

Enclave Phaser Template - Fade

La combinaison de flash et de fondu crée une bonne transition entre les états. Maintenant, passons à l'effet de vibration.

Secousse d'appareil photo

Une autre méthode utile de la caméra Phaser est un agitation—elle peut être utilisée pour les situations où un joueur frappe les obstacles lors du vol à travers le champ d'astéroïdes ou en utilisant une puissante bombe à partir de l'inventaire. Il peut être exécuté en collision avec les objets de jeu flottant sur l'écran.

Le premier paramètre contrôle combien la caméra tremble, et la seconde la durée de la vibration dure. Le troisième consiste à remplacer le shake déjà en cours si ce paramètre est défini sur true. Le quatrième contrôle le shake horizontalement, verticalement ou les deux, et le dernier paramètre décide si la caméra s'effondrera en dehors des limites du monde montrant tout ce qui se trouve là. Voici l'exemple avec les valeurs par défaut:

Il secouera la caméra avec une intensité de 0.05, pendant une demi-seconde (500 millisecondes), le paramètre de force est réglé sur true, la caméra tremblera dans les deux sens, et 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 dans l'appel et cela fonctionnera comme ci-dessus:

Et c'est ainsi que le shake réel apparaît dans le code source Enclave Phaser Template lorsque les points sont ajoutés dans le fichier Game.js:

Les trois derniers paramètres sont exactement les mêmes que ceux par défaut, donc ont pu être omis, mais ont été laissés à des fins éducatives. Voyez-le en action:

Enclave Phaser Template - Shake

Dans ce cas, l'intensité est inférieure à la valeur par défaut, et la durée est plus courte pour se sentir un peu plus faible, de sorte qu'il ne va pas distraire le joueur trop.

ResetFX

Il y a aussi une petite méthode pratique avec ces trois explications ci-dessus. Vous pouvez réinitialiser tous les effets actifs et, du point de vue de la programmation, vous ne devez même pas savoir s'il y a une course au moment donné—il existe une méthode spéciale de resetFX que vous pouvez utiliser.

Il efface immédiatement tous les effets de la caméra en cours et les supprime de l'écran.

Événements

Si vous souhaitez savoir si un effet spécifique est actif ou déjà terminé, vous pouvez utiliser les événements fournis par le cadre: onFlashComplete, onFadeComplete et onShakeComplete.

Rappelez-vous l'exemple de fondu sur le bouton cliquez dans le menu principal? Cela a été fait en attendant un certain temps, puis l'état a été changé en un nouveau. Nous pouvons le faire mieux en utilisant l'événement onFadeComplete:

De cette façon, il a été implémenté à l'étape suivante, dans le fichier Story.js lors du passage de Story State à Game One. Vous devez admettre que cela semble mieux, et l'état est lancé exactement lorsque l'effet est terminé, peu importe combien de temps il dure.

Résumé

Comme vous pouvez le voir, ce sont des fonctionnalités assez puissantes quand il s'agit d'ajouter ce "jus" ou un polissage supplémentaire à vos jeux. Ils sont en même temps également très faciles à utiliser—il est formidable de les voir implémenter nativement dans Phaser.

N'hésitez pas à saisir le code source du modèle Enclave Phaser, mettez en œuvre les effets et partagez les liens vers vos nouveaux jeux mis à niveau avec nous dans les commentaires!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.