1. Epic GamesDeveloper
  3. Utiliser des effets visuels sur les joueurs

Utiliser des effets visuels sur les joueurs

Apprenez à ajouter des effets visuels personnalisés à l'appareil Générateur d'effets visuels.

Utiliser des effets visuels sur les joueurs

Cette section vous explique comment ajouter un effet visuel personnalisé de battement de cœur à votre jeu pour indiquer l'emplacement d'un accessoire immobile.

Lorsqu'un joueur de l'équipe des accessoires reste inactif trop longtemps, un effet visuel de battement de cœur est déclenché sur ce joueur pour révéler sa position à l'équipe des chasseurs. Cet effet visuel est enregistré pour chaque joueur de l'équipe des accessoires lorsqu'il apparaît dans le jeu.

Vous utiliserez les générateurs d'effets visuels ainsi que Verse pour mettre en place la fonctionnalité de battement de cœur. Cela comprend :

  • l'activation des effets visuels.

  • la téléportation du générateur d'effets visuels vers les joueurs.

  • la création d'une IU indiquant aux membres de l'équipe des accessoires le temps qu'il leur reste pour se déplacer avant que le battement de cœur ne se déclenche.

Ce tutoriel comprend des extraits de code Verse qui vous expliquent comment exécuter les mécaniques de jeu nécessaires dans ce jeu. Suivez les étapes ci-dessous et copiez le script complet à l'étape 6 de ce tutoriel.

Avant de commencer

Dossiers de ressources

Il est conseillé de classer les ressources et les appareils dans des dossiers afin de les retrouver plus facilement. Vous pouvez regrouper les appareils selon leur fonction, leur emplacement, leur type ou toute autre caractéristique de votre choix.

Vous pouvez déplacer les ressources positionnées dans les dossiers et les acteurs que vous créez.

Dans l'animation ci-dessus, l'appareil Générateur d'effets visuels est déplacé dans le dossier HeartBeatVFX de l'équipe des accessoires à des fins d'organisation. Vous pouvez également faire un clic droit et sélectionner Déplacer vers pour choisir le dossier dans lequel placer la ressource.

Appareils utilisés :

Générateur d'effets visuels

Générateur d'effets visuels

Créez un générateur d'effets visuels pour chaque joueur. Lorsqu'un joueur a besoin de l'effet visuel, celui-ci est téléporté à l'emplacement où il se trouve. Lorsque le joueur n'a plus besoin de l'effet visuel, celui-ci est caché jusqu'à qu'il en ait de nouveau besoin.

Les générateurs d'effets visuels de ce modèle utilisent l'effet visuel Niagara pour créer des ressources personnalisées qui s'affichent pendant le jeu. Les ressources d'effets visuels utilisées dans ce tutoriel sont configurées pour générer un battement de cœur et révéler les joueurs immobiles de l'équipe des accessoires. Ces effets visuels se déclenchent sur des accessoires restés statiques pendant au moins 15 secondes.

Consultez la section Effets visuels de la documentation pour obtenir de nombreux tutoriels sur la création d'effets visuels de battement de cœur. Vous pouvez ensuite utiliser le battement de cœur personnalisé que vous avez créé avec le générateur d'effets visuels.

Vous pouvez essayer cela lorsque vous placez un générateur d'effets visuels. Dans le panneau Détails, sélectionnez votre effet personnalisé dans le menu déroulant Effet visuel personnalisé. Veillez à activer l'option Remplacement d'effet visuel personnalisé pour que les effets visuels sélectionnés apparaissent dans le hublot.

Sélectionner vos propres effets visuels personnalisés à partir du générateur d'effets visuels

À partir de là, vous pouvez personnaliser votre effet dans le panneau Détails en ajoutant de la couleur et en déterminant le moment de lecture de l'effet et les joueurs autorisés à le voir.

Placez cet appareil à un endroit où les joueurs ne peuvent pas le voir et configurez les options utilisateur en fonction du tableau ci-dessous. Ensuite, copiez-collez cet appareil pour qu'il corresponde au nombre de joueurs de votre jeu.

Générateur d'effets visuels modifié
Option Valeur Explication
Effet visuel personnalisé HeartBeatVFX Définit une particule personnalisée plutôt qu'une particule de la liste prédéfinie.
Remplacement d'effet visuel personnalisé Activé Définit si les effets de développement sont utilisés.
Activé pendant la phase Partie Détermine les phases de jeu pendant lesquelles l'appareil est activé. Un générateur d'effets visuels activé joue son effet de particules défini.

Déclencher des effets de battement de cœur à un endroit précis

Procédez comme suit pour déplacer l'appareil Générateur d'effets visuels dans Verse afin de déclencher et d'arrêter l'effet de battement de cœur pour les joueurs de l'équipe des accessoires.

  1. Créez un nouveau fichier Verse dans votre projet intitulé heartbeat.verse. Il ne s'agit pas d'un appareil Verse ; vous pouvez donc le créer en tant que fichier Verse vide.

  2. Commencez par double-cliquer sur le fichier Verse que vous avez créé pour ajouter les chemins d'accès Verse à importer suivants.

     using { /Fortnite.com/Characters }
 using { /Fortnite.com/Devices }
 using { /Fortnite.com/UI }
 using { /UnrealEngine.com/Temporary/SpatialMath }
 using { /UnrealEngine.com/Temporary/Diagnostics }
 using { /UnrealEngine.com/Temporary/UI }
 using { /Verse.org/Colors }
 using { /Verse.org/Simulation }

  3. Ce code crée une classe nommée heartbeat_vfx dans heartbeat.verse. La classe heartbeat_vfx contient une structure de données pour suivre les objets vfx_spawner_device de chaque joueur ainsi que les fonctions pour placer l'effet visuel à une position ou le réinitialiser.

     log_heart_beat := class(log_channel){}
     # Ces messages informent un agent d'accessoire qu'il doit se déplacer afin d'éviter que sa pulsation ne devienne visible.
 HeartBeatWarningMessage<localizes>(Time:int):message = "Heart Beat in {Time} Seconds. Move!"
 HeartBeatWarningClear<localizes>:message = ""
     # Cette classe expose les propriétés modifiables de battement de cœur à l'appareil Verse prop_hunt.
 heart_beat := class<concrete>():
     Logger:log = log{Channel:=log_heart_beat}
     @editable # Nombre de secondes pendant lesquelles un agent d'accessoire doit se déplacer avant que la pulsation n'indique sa position.
     MoveTime:float = 15.0
     @editable # Nombre de secondes restantes avant l'affichage de l'avertissement de pulsation. Cette valeur ne doit pas être supérieure au paramètre HeartBeatTimer.
     WarningTime:float = 5.0
     @editable # Matrice d'appareils d'effets visuels de pulsation. Il en existe une par joueur.
     AgentVFX:[]heartbeat_vfx = array{}
     @editable # Appareil Radio utilisé pour lire les effets sonores (SFX) de battement de cœur.
     SFXPlayer:radio_device = radio_device{}
     # Cette carte associe une interface utilisateur pour l'affichage de l'avertissement de pulsation à chaque agent d'accessoire.
     var WarningUI:[agent]heartbeat_warning_ui = map{}
     # Effectue un suivi du nombre de joueurs avec un effet de pulsation actif afin de pouvoir gérer l'appareil d'effets sonores.
     var NumberOfHeartBeats:int = 0
     # Configure l'interface utilisateur de pulsation pour l'agent.
     SetUpUI(PropAgent:agent):void =
         if:
             not WarningUI[PropAgent]
             AsPlayer := player[PropAgent]
             PlayerUI := GetPlayerUI[AsPlayer]
         then:
             UIData:heartbeat_warning_ui = heartbeat_warning_ui{}
             UIData.CreateCanvas()
             PlayerUI.AddWidget(UIData.Canvas, player_ui_slot{ZOrder := 1})
             if (set WarningUI[PropAgent] = UIData) {}
     # Activer les effets visuels et sonores de battement de cœur du joueur indiqué.
     Enable(PropAgent:agent, HeartBeatVFXData:heartbeat_vfx):void =
         if:
             # Identifie le personnage utilisé pour trouver la position de l'accessoire dans la scène.
             Character := PropAgent.GetFortCharacter[]
         then:
             # Définir la position de l'effet visuel de battement de cœur à la position de l'agent d'accessoire.
             HeartBeatVFXData.Activate(Character.GetTransform())
             # Incrémente le nombre de pulsations ; s'il s'agit de la première pulsation, lit le son pour l'activer.
             set NumberOfHeartBeats += 1
             if (NumberOfHeartBeats = 1) then SFXPlayer.Play()
             # Abonner l'agent d'accessoire au lecteur audio afin que le son de battement de cœur soit lu à partir de cette position.
             SFXPlayer.Register(PropAgent)
         else:
             Logger.Print("Character, Index, or HeartBeatVFXData not found. Cannot start the heartbeat")
     # Supprime les effets visuels et les effets sonores de battement de cœur pour l'agent d'accessoire indiqué.
     Disable(PropAgent:agent, HeartBeatVFXData:heartbeat_vfx):void =
         Logger.Print("Disabling heart beat.")
         # Désactiver les effets visuels.
         HeartBeatVFXData.Deactivate()
         # Désabonner l'agent d'accessoire du lecteur audio, ce qui arrête le son de battement de cœur.
         SFXPlayer.Unregister(PropAgent)
         # Diminue le nombre de pulsations. Ce nombre ne doit jamais descendre en dessous de 0.
         set NumberOfHeartBeats -= 1
         if (NumberOfHeartBeats < 0) then set NumberOfHeartBeats = 0
     # Supprime tous les effets visuels et les effets sonores de pulsation pour les agents d'accessoire.
     DisableAll():void =
         Logger.Print("Disabling all heart beats.")
         # Itérer tous les effets visuels et les déplacer vers 0,0,0.
         for (HeartBeatVFXDevice : AgentVFX):
             HeartBeatVFXDevice.Deactivate()
         # Désabonne tous les joueurs du son de pulsation.
         SFXPlayer.UnregisterAll()
         # Remet à 0 le compteur de pulsations
         set NumberOfHeartBeats = 0
     # La classe heartbeat_warning_ui contient une structure de données permettant de suivre le canevas d'IU et le bloc de texte par joueur, ainsi que la fonction permettant de créer un nouveau canevas d'IU pour l'avertissement de battement de cœur.
 heartbeat_warning_ui := class:
     var Canvas:canvas = canvas{}
     var Text:text_block = text_block{}
     # Crée la zone de dessin d'IU pour le message d'avertissement.
     CreateCanvas():void =
         set Text = text_block{DefaultTextColor := NamedColors.White, DefaultShadowColor := NamedColors.Black}
         set Canvas = canvas:
             Slots := array:
                 canvas_slot:
                     Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.75}, Maximum := vector2{X := 0.5, Y := 0.75}}
                     Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                     Alignment := vector2{X := 0.5, Y := 1.0}
                     SizeToContent := true
                     Widget := Text

  4. Ce code crée une méthode Activate() dans la classe heartbeat_vfx qui prend un argument transform et déplace l'appareil Générateur d'effets visuels vers cet argument transform.

     # La classe heartbeat_vfx contient une structure de données de suivi de la racine des effets visuels et des objets vfx_spawner_device par joueur, ainsi que les fonctions permettant de positionner l'effet visuel ou de le réinitialiser.
 heartbeat_vfx := class<concrete>:
     @editable # L'appareil d'effets visuels pour chaque pulsation.
     VFXDevice:vfx_spawner_device = vfx_spawner_device{}
     # Ce décalage est utilisé pour positionner la pulsation au-dessus de la tête d'un agent d'accessoire.
     HeartBeatVFXOffset:vector3 = vector3{X := 0.0, Y := 0.0, Z := 110.0}
     # Définit la position de l'effet visuel de battement de cœur et active l'effet visuel.
     Activate(Transform:transform):void =
         VFXPosition := Transform.Translation + HeartBeatVFXOffset
         if (VFXDevice.TeleportTo[VFXPosition, Transform.Rotation]):
             VFXDevice.Enable()

  5. Ce code crée une méthode Deactivate() dans la classe heartbeat_vfx qui désactive l'appareil Générateur d'effets visuels et masque ainsi les effets visuels de battement de cœur.

     # La classe heartbeat_vfx contient une structure de données de suivi de la racine des effets visuels et des objets vfx_spawner_device par joueur, ainsi que les fonctions permettant de positionner l'effet visuel ou de le réinitialiser.
 heartbeat_vfx := class<concrete>:
     @editable # L'appareil d'effets visuels pour chaque pulsation.
     VFXDevice:vfx_spawner_device = vfx_spawner_device{}
     # Ce décalage est utilisé pour positionner la pulsation au-dessus de la tête d'un agent d'accessoire.
     HeartBeatVFXOffset:vector3 = vector3{X := 0.0, Y := 0.0, Z := 110.0}
     # Définit la position de l'effet visuel de pulsation et active l'effet visuel.
     Activate(Transform:transform):void =
         VFXPosition := Transform.Translation + HeartBeatVFXOffset
         if (VFXDevice.TeleportTo[VFXPosition, Transform.Rotation]):
             VFXDevice.Enable()
            # Désactive l'effet visuel, et masque ainsi les effets visuels de pulsation
     Deactivate():void =
         VFXDevice.Disable()

Afficher un avertissement de battement de cœur à l'attention d'un joueur

Procédez comme suit pour configurer une interface utilisateur personnalisée avec un bloc de texte permettant d'afficher le message d'avertissement de battement de cœur. Consultez la section Interfaces utilisateur dans le jeu pour en savoir plus sur la création d'interfaces utilisateur personnalisées et d'autres composants d'IU Verse.

  1. Les deux constantes ci-dessous contrôlent le texte qui s'affiche aux joueurs de l'équipe des accessoires à différents moments du jeu.

    • La constante HeartBeatWarningMessage est une fonction qui prend un int et renvoie le type message. Ce type est utilisé dans les éléments d'IU, car il est possible de le localiser. Il s'agit du texte que les joueurs voient lorsqu'ils doivent se déplacer pour éviter que l'effet de battement de cœur n'indique leur position.

    • La constante HeartBeatWarningClear est un message vide qui s'affiche pour que les joueurs ne voient plus le message d'avertissement.

     # Ces messages informent un agent d'accessoire qu'il doit se déplacer afin d'éviter que sa pulsation ne devienne visible.
 HeartBeatWarningMessage<localizes>(Time:int):message = "Heart Beat in {Time} Seconds. Move!"
 HeartBeatWarningClear<localizes>:message = ""

  2. Créez une nouvelle classe nommée heartbeat_warning_ui dans heartbeat.verse. La classe heartbeat_warning_ui contient une structure de données permettant de suivre le canevas d'IU et le bloc de texte par joueur, ainsi que la fonction permettant de créer un nouveau canevas d'IU pour l'avertissement de battement de cœur.

     # La classe heartbeat_warning_ui contient une structure de données permettant de suivre le canevas d'IU et le bloc de texte par joueur, ainsi que la fonction permettant de créer un nouveau canevas d'IU pour l'avertissement de battement de cœur.
 heartbeat_warning_ui := class:
     var Canvas:canvas = canvas{}
     var Text:text_block = text_block{}
     # Crée la zone de dessin d'IU pour le message d'avertissement.
     CreateCanvas():void =
         set Text = text_block{DefaultTextColor := NamedColors.White, DefaultShadowColor := NamedColors.Black}
         set Canvas = canvas:
             Slots := array:
                 canvas_slot:
                     Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.75}, Maximum := vector2{X := 0.5, Y := 0.75}}
                     Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                     Alignment := vector2{X := 0.5, Y := 1.0}
                     SizeToContent := true
                     Widget := Text

Gérer les effets de battement de cœur

Procédez comme suit pour créer le gestionnaire de battements de cœur :

  1. Le code suivant crée une classe nommée heart_beat dans heartbeat.verse. Cette classe expose les propriétés modifiables de battement de cœur à l'appareil prop_hunt et gère les effets de battement de cœur.

     log_heart_beat := class(log_channel){}
 # Cette classe expose les propriétés modifiables de battement de cœur à l'appareil prop_hunt.
 heart_beat := class<concrete>():
     Logger:log = log{Channel:=log_heart_beat}
         @editable 
         MoveTime:float = 15.0
  2. Ce code ajoute les propriétés modifiables suivantes à la classe heart_beat.

    1. Ce code contrôle le nombre de secondes avant qu'un agent d'accessoire doive se déplacer, pour que son battement de cœur ne révèle pas sa position.

           @editable 
     MoveTime:float = 15.0

      1. Ce code contrôle le nombre de secondes restantes avant qu'un message apparaisse à l'écran pour indiquer à un membre de l'équipe des accessoires de se déplacer et éviter que le battement de cœur s'arrête.

         @editable
 WarningTime:float = 5.0

      2. Ce code est une matrice d'appareils d'effets visuels de battement de cœur. Il en existe une par joueur.

         @editable
 AgentVFX:[]heartbeat_vfx = array{}

      3. Dans ce code, l'appareil Radio est utilisé pour lire les effets sonores (SFX) de battement de cœur.

         @editable
 SFXPlayer:radio_device = radio_device{}

  3. Ce code associe une IU d'affichage de l'avertissement de battement de cœur à chaque agent d'accessoire.

     # Cette carte associe une interface utilisateur pour l'affichage de l'avertissement de pulsation à chaque agent d'accessoire.
 var WarningUI:[agent]heartbeat_warning_ui = map{}

  4. Ce code effectue un suivi du nombre de joueurs disposant d'un effet de battement de cœur actif afin de pouvoir gérer l'appareil d'effets sonores.

     # Effectue un suivi du nombre de joueurs avec un effet de pulsation actif afin de pouvoir gérer l'appareil d'effets sonores.
 var NumberOfHeartBeats:int = 0

  5. Ce code affiche l'interface utilisateur d'avertissement pour les joueurs.

     # Configure l'interface utilisateur de pulsation pour l'agent.
 SetUpUI(PropAgent:agent):void =
     if:
         not WarningUI[PropAgent]
         AsPlayer := player[PropAgent]
         PlayerUI := GetPlayerUI[AsPlayer]
     then:
         UIData:heartbeat_warning_ui = heartbeat_warning_ui{}
         UIData.CreateCanvas()
         PlayerUI.AddWidget(UIData.Canvas, player_ui_slot{ZOrder := 1})
         if (set WarningUI[PropAgent] = UIData) {}

  6. Ce code active les effets visuels (VFX) et les effets sonores (SFX) pour le joueur indiqué.

         # Activer les effets visuels et sonores de battement de cœur du joueur indiqué.
        Enable(PropAgent:agent, HeartBeatVFXData:heartbeat_vfx):void =
         if:
             # Identifie le personnage utilisé pour trouver la position de l'accessoire dans la scène.
             Character := PropAgent.GetFortCharacter[]
         then:
             # Définir la position de l'effet visuel de battement de cœur sur la position de l'agent d'accessoire.
             HeartBeatVFXData.Activate(Character.GetTransform())
             # Incrémente le nombre de pulsations ; s'il s'agit de la première pulsation, lit le son pour l'activer.
             set NumberOfHeartBeats += 1
             if (NumberOfHeartBeats = 1) then SFXPlayer.Play()
             # Abonner l'agent d'accessoire au lecteur audio afin que le son de battement de cœur soit lu à partir de cette position.
             SFXPlayer.Register(PropAgent)
         else:
             Logger.Print("Character, Index, or HeartBeatVFXData not found. Cannot start the heartbeat")

  7. Ce code crée une méthode pour désactiver les effets visuels et sonores d'un joueur, et une autre pour les désactiver pour tous les joueurs.

         # Supprime les effets visuels et les effets sonores de battement de cœur pour l'agent d'accessoire indiqué.
     Disable(PropAgent:agent, HeartBeatVFXData:heartbeat_vfx):void =
         Logger.Print("Disabling heart beat.")
         # Désactiver les effets visuels.
         HeartBeatVFXData.Deactivate()
         # Désabonner l'agent d'accessoire du lecteur audio, ce qui arrête le son de battement de cœur.
         SFXPlayer.Unregister(PropAgent)
         # Diminue le nombre de pulsations. Ce nombre ne doit jamais descendre en dessous de 0.
         set NumberOfHeartBeats -= 1
         if (NumberOfHeartBeats < 0) then set NumberOfHeartBeats = 0
     # Supprime tous les effets visuels et les effets sonores de pulsation pour les agents d'accessoire.
     DisableAll():void =
         Logger.Print("Disabling all heart beats.")
         # Itérer tous les effets visuels et les déplacer vers 0,0,0.
         for (HeartBeatVFXDevice : AgentVFX):
             HeartBeatVFXDevice.Deactivate()
         # Désabonne tous les joueurs du son de pulsation.
         SFXPlayer.UnregisterAll()
         # Remet à 0 le compteur de pulsations
         set NumberOfHeartBeats = 0

Section suivante

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page