Bloc de matériau

Les matériaux ont de nombreuses fonctionnalités dans l'UEFN en raison des paramètres de matériaux modifiables exposés dans Verse.  Les matériaux paramétrés sont essentiels pour créer une interface utilisateur (IU) de grande qualité avec un material_block. 

Un material_block utilise les paramètres d'un matériau d'interface utilisateur ou d'instances de matériau pour modifier et contrôler les valeurs des paramètres via le code Verse afin de créer une interface utilisateur dynamique. Par exemple, les paramètres d'un matériau de mesure d'IU peuvent être programmés dans Verse pour modifier le comportement du matériau lorsque le joueur subit des dégâts ou en fait subir à un ennemi.

Avant d'écrire une ligne de code, réfléchissez à la manière dont vous souhaitez utiliser les matériaux dans votre IU. Créez des fils de fer pour déterminer à quoi vous voulez que votre IU ressemble et ce que vous voulez que les matériaux fassent.

Textures et matériaux d'IU

Le codage d'un emplacement material_block commence par la création de votre matériau d'IU. Vous pouvez utiliser les fonctions de matériau et les matériaux disponibles à partir du modèle de fonctionnalité des interfaces utilisateur, ou vous pouvez créer de toutes pièces un matériau personnalisé.

Matériaux

La création d'un nouveau matériau personnalisé distingue votre IU des autres qui modifient les matériaux d'IU existants et aisément disponibles. Configurez d'abord vos matériaux d'IU. Utilisez les étapes essentielles de configuration et les bonnes pratiques suivantes pour créer des matériaux d'IU :

• Définissez le domaine de matériau sur interface utilisateur dans le nœud Main Material (MMN).

• Modifiez votre matériau racine pour qu'il soit simple.

• Plus vous avez de paramètres, plus vous aurez de liberté avec votre matériau.

• Transformez votre matériau en instance de matériau lorsque le matériau est terminé.

Les instances de matériau sont utilisées comme type de classe dans le code Verse. Dans Verse, vous pouvez définir des valeurs par défaut pour les propriétés et paramètres de vos matériaux.

Texture

Les textures donnent une touche d'originalité à la conception d'une IU qui ne peut être obtenue uniquement avec des matériaux. L'UEFN fournit un dossier de textures que vous pouvez utiliser dans votre interface utilisateur sous Dossier Projet > Fortnite > Textures. Toutes les textures que vous importez doivent obéir à la règle de la puissance 2.

Les nœuds de matériau utilisent les paramètres du matériau et les exposent dans le code Verse. Avec Verse, vous pouvez utiliser les paramètres de matériau pour cibler les valeurs des pixels de la texture (appelés texels) dans le matériau afin de créer un type de masque ou pour d'autres calculs, afin de modifier l'apparence et le comportement des textures.

Afin de vous assurer que vos textures sont optimisées pour une utilisation dans l'IU, ouvrez la vignette et utilisez les paramètres suivants dans le panneau Détails :

• Définissez les paramètres de génération de mip sur Aucun mipmap.

• Définissez le groupe de textures sur IU.

• Définissez les paramètres de compression sur interface utilisateur 2C (RVBA8).

Les textures importées qui ne respectent pas la règle de la puissance 2 peuvent être modifiées pour s'adapter à l'échelle de texture appropriée. Pour modifier une texture, suivez les instructions dans Redimensionner les textures.

Exemple de bloc de matériau 1

Un material_block est utilisé comme l'un des emplacements à l'intérieur d'un widget personnalisé créé avec le code Verse. Pendant le gameplay, le material_block vous permet de manipuler les paramètres du matériau via Verse pour modifier l'apparence et le comportement du matériau/de l'instance de matériau de l'IU dans l'ATH, de la même manière qu'un image_block vous permet d'utiliser une texture dans Verse.

Le widget de matériau personnalisé est utilisé de plusieurs manières dans le code Verse :

• Il fournit un moyen d'utiliser les paramètres de matériau pour déterminer la taille, le comportement et l'apparence du matériau dans l'interface utilisateur.

• Il transmet les données de Verse aux paramètres, leur permettant d'être pilotés par des données de gameplay dynamiques uniquement disponibles à partir de Verse.

Le code suivant montre comment material_block est utilisé pour afficher un bloc de matériau en dissolution dans l'ATH. Le bloc de code complet se trouve dans la section Code complet, ci-dessous.

Modules pour l'interface utilisateur et les matériaux

Les modules suivants contiennent les fonctions utilisées pour contrôler le material_block en tant que widget d'IU et déterminer les couleurs et le placement du matériau, entre autres.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }

Cibler des widgets UMG et des matériaux d'IU dans la classe Appareils

Dans la classe Appareils de Verse, une variable de widget de zone empilable nommée MyUI est déclarée, avec un paramètre Orientation d'orientation.Vertical. Cela amène la zone empilable à afficher son contenu verticalement.

Ensuite, un paramètre IU.MaterialBlock.MI_UI_Dissolve_material nommé DissolveMaterial est déclaré avec un paramètre Dissoudre et une valeur par défaut attribuée de 0,2.

materialblock_test_device := class(creative_device):

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Contrôler l'IU et des matériaux avec la fonction On Begin (Sur début)

Dans la fonction OnBegin, un carré qui se dissout lorsque le jeu démarre est créé sur l'ATH. 

La variable DissolveMaterialBlock est de type material_block et référence le matériau d'IU en définissant la DefaultImage sur le matériau d'IU (DissolveMaterial), tandis que la DefaultDesiredSize définit la taille par défaut du material_block lorsqu'il s'affiche dans un widget à l'aide des coordonnées X et Y.

Une expression for est utilisée pour afficher l'IU à l'écran pour chaque joueur dans l'espace de jeu. Le GetPlayspace(). La fonction GetPlayers() récupère un tableau de tous les joueurs du jeu, puis ajoute le widget contenant le material_block à leur ATH en fonction des instructions suivantes dans l'expression do :

• Crée une zone empilable appelée MyStackBox.

• Définit son orientation sur verticale.

• Insère le DissolveMaterialBlock dans le premier emplacement de MyStackBox.

• Définit MyUI sur MyStackBox afin qu'il puisse être ajouté à l'ATH du joueur en dehors de cette boucle.

    OnBegin<override>()<suspends>:void=
        DissolveMaterialBlock := material_block:
            DefaultImage := DissolveMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}

        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            MyStackBox:stack_box = stack_box:

Code complet

Copiez et collez le bloc de code complet ci-dessous pour voir le bloc de matériau se dissoudre dans l'ATH.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }

materialblock_test_device := class(creative_device):

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Exemple de bloc de matériau 2

Cet exemple s'appuie sur l'exemple ci-dessus en introduisant deux matériaux d'interface utilisateur supplémentaires, un déclencheur et des déclencheurs d'entrée. Les déclencheurs permettent d'afficher et de modifier le matériau affiché dans l'ATH.

Le code Verse commence avec les mêmes modules que le bloc de code ci-dessus pour contrôler le material_block et déterminer les paramètres du matériau d'IU. Un module supplémentaire est requis pour que les propriétés modifiables de ce code fonctionnent :

using { /Verse.org/Simulation }

Configuration de la classe Appareil de Verse

Cette classe d'appareil Verse a plus de fonctionnalités que la classe d'appareil précédente. Une expression de message nommée Text est utilisée pour afficher le message "This is a Text Block". Cette expression est appelée dans la fonction OnBegin par un text_block.

# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):

    Text<localizes><public> : message = "This is a Text Block."

Trois déclencheurs modifiables et deux déclencheurs d'entrée modifiables sont ajoutés à la classe Appareils pour contrôler le material_block et StackBox. Chaque déclencheur est renommé d'après la fonction qu'il exécute, par exemple :

• TriggerShow

• TriggerChange

• TriggerHide

• InputTriggerInc (augmente une valeur)

• InputTriggerDec (diminue une valeur)

   @editable
    TriggerShow:trigger_device = trigger_device{}
    @editable
    TriggerChange:trigger_device = trigger_device{}
    @editable
    TriggerHide:trigger_device = trigger_device{}
    @editable
    InputTriggerInc:input_trigger_device = input_trigger_device{}
    @editable
    InputTriggerDec:input_trigger_device = input_trigger_device{}   

Une variable de widget StackBox appelée MyUI est déclarée, de la même manière que la variable MyUI dans le code ci-dessus.

    var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}

Les trois matériaux d'IU (RadialMaterial, Stripe Material et DissolveMaterial) sont ajoutés à la classe d'appareil et des valeurs par défaut sont attribuées à leurs effets de matériau.

    RadialMaterial:UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material = UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material {Progress := 1.0}
    StripeMaterial:UI.MaterialBlock.MI_UI_Stripe_material = UI.MaterialBlock.MI_UI_Stripe_material {Speed := 0.5}
    DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}

Contrôler l'IU, les matériaux et les déclencheurs avec la fonction On Begin (Sur début)

La fonction OnBegin configure les contrôles pour les différents déclencheurs en abonnant différentes fonctions à leurs TriggeredEvents et contrôle les déclencheurs d'entrée en abonnant des fonctions à leurs PressedEvents. Lorsque la valeur par défaut augmente ou diminue, les matériaux d'IU sont affectés par Verse en utilisant le material_block pour effectuer les opérations suivantes :

• OnShow - Affiche le matériau d'IU dans l'ATH du joueur.

• OnChange - Modifie le paramètre Progrès du matériau d'IU pour afficher un changement dans le matériau de remplissage.

• OnHide - Masque le matériau d'IU au joueur.

• IncreasesValue - Augmente la progression et la vitesse auxquelles le matériau se dissout, ainsi que la quantité de dissolution dans le matériau.

• DecreasesValue - Diminue la progression et la vitesse auxquelles le matériau se dissout, ainsi que la quantité de dissolution dans le matériau.

    OnBegin<override>()<suspends>:void=
        Print ("Init")


        TriggerShow.TriggeredEvent.Subscribe(OnShow)
        TriggerChange.TriggeredEvent.Subscribe(OnChange)
        TriggerHide.TriggeredEvent.Subscribe(OnHide)
        InputTriggerInc.PressedEvent.Subscribe(IncreaseValue)
        InputTriggerDec.PressedEvent.Subscribe(DecreaseValue)

Une variable text_block nommée Label (étiquette) est utilisée pour ajouter un text_block à l'appareil Verse. Le text_block est utilisé pour afficher une chaîne de texte dans l'ATH d'un joueur. Un text_block affiche le message codé à la variable Texte par défaut et contrôle l'apparence et le placement du texte à l'aide des paramètres de bloc de texte suivants :

• DefaultTextColor

• DefaultShadowColor

• DefaultShadowOffset

        var Label:text_block = text_block:
            DefaultText := Text,
            DefaultTextColor := NamedColors.White,
            DefaultShadowColor:= color{R:=0.0, G:=0.0, B:=0.0},
            DefaultShadowOffset := option{vector2{X:=5.0, Y:=2.0}}

Les trois matériaux d'interface utilisateur sont ajoutés aux expressions et contrôlés à l'aide de material_block.

        RadialMaterialBlock := material_block:
            DefaultImage := RadialMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}


        StripeMaterialBlock := material_block:
            DefaultImage := StripeMaterial
            DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}

Une expression for est utilisée pour déterminer quand l'interface utilisateur apparaît à l'écran et quelle interface utilisateur afficher à l'écran. 

L'interface utilisateur apparaît à l'écran en trouvant chaque joueur dans l'espace de jeu à l'aide de GetPlayspace().GetPlayers(), puis appelle GetPlayerUI[Player] pour renvoyer la classe player_ui du joueur.  Cela est essentiel pour ajouter un widget à l'ATH/IU d'un joueur.

        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]

Ensuite, dans l'expression do, une nouvelle stack_box nommée MyStackBox est créée à l'aide des paramètres du widget StackBox UMG. Une fois les valeurs du widget attribuées à MyStackBox, une nouvelle variable nommée MyUI se voit attribuer toutes les valeurs de MyStackBox à l'exécution. 

Cela permet à MyUI d'utiliser les propriétés du widget StackBox et de référencer le material_block pour effectuer les opérations suivantes :

• Utiliser la propriété Orientation de la StackBox.

• Assigner un stack_box_slot à chaque material_block, text_block et variable Label (étiquette) dans une matrice à l'aide de l'expression Slots:array pour organiser les objets de la matrice.

        do:
            MyStackBox:stack_box = stack_box:
                Orientation := orientation.Vertical
                Slots := array:
                    stack_box_slot:
                        Widget := stack_box:
                            Orientation := orientation.Horizontal
                            Slots := array:
                                stack_box_slot:
                                    Widget := RadialMaterialBlock

Créer la fonctionnalité OnShow

Une fois que TriggerShow.TriggeredEvent est appelé, la fonction OnShow récupère tous les joueurs dans l'espace de jeu avec leur IU de joueur, puis ajoute le widget à leur IU de joueur à l'aide de la valeur MyUI. 

Enfin, la valeur de progression de RadialMaterial est définie sur 1,0 à l'exécution, ce qui signifie que la barre de PV ou de bouclier est pleine lorsque le jeu commence.

    OnShow(InAgent: ?agent):void=
        Print ("Show")
        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            PlayerUI.AddWidget(MyUI)


        set RadialMaterial.Progress = 1.0    

Créer la fonctionnalité OnHide

Pour masquer le matériau d'IU de l'ATH lorsque la barre de PV ou de bouclier subit des dégâts, la fonction OnHide utilise une expression for pour récupérer les joueurs dans l'espace de jeu et l'IU du joueur, puis met à jour l'IU du joueur à l'aide de PlayerUI.RemoveWidget (MyUI). 

    OnHide(InAgent: ?agent):void=
        Print ("Hide")
        for:
            Player:GetPlayspace().GetPlayers()
            PlayerUI := GetPlayerUI[Player]
        do:
            PlayerUI.RemoveWidget(MyUI)

Créer la fonctionnalité OnChange

Le matériau d'IU change d'apparence en fonction des valeurs transmises via le paramètre Progression.  Lorsque le TriggerChange.TriggeredEvent se produit, la fonction OnChange est appelée et met à jour le paramètre Progression du matériau d'IU RadialMaterial en fonction d'IncreaseValue et de DecreaseValue. 

    OnChange(InAgent: ?agent):void=
        Print ("Change Material Parameter")
        set RadialMaterial.Progress =  RadialMaterial.Progress - 0.25

Créer la fonctionnalité IncreaseValue

La fonction IncreaseValue augmente les valeurs du paramètre Progression sur le matériau selon les quantités de progression, de vitesse et de dissolution prédéfinies : 

• Progression = +1,0

• Vitesse = +0,1

• Dissolution = +0,025

Ce changement se produit lorsque les joueurs reçoivent des PV ou du bouclier. Ils verront ces augmentations reflétées dans leurs PV et leur matériau de bouclier, au niveau de l'ATH. 

Ce code fonctionne également lorsqu'il est appliqué aux PV et au bouclier d'une IA ennemie lorsqu'une nouvelle IA apparaît dans le jeu.

    IncreaseValue(InAgent: agent):void=
        Print ("Increase Value of Material Parameter")
        set RadialMaterial.Progress +=  1.0
        set StripeMaterial.Speed +=  0.1
        set DissolveMaterial.Dissolve +=  0.025

Créer la fonctionnalité DecreaseValue

La fonction DecreaseValue diminue les valeurs du paramètre Progression sur le matériau selon les quantités de progression, de vitesse et de dissolution prédéfinies :

• Progression = -1,0

• Vitesse = -0,1

• Dissolution = -0,025

Ce changement se produit lorsque les joueurs subissent des dégâts de PV ou de bouclier. Ils verront ces diminutions reflétées dans leur PV et leur matériau de bouclier, au niveau de l'ATH.

Ce code fonctionne également lorsqu'il est appliqué à une IA ennemie lorsque l'IA subit des dégâts de PV ou de bouclier pendant le jeu.

    DecreaseValue(InAgent: agent):void=
        Print ("Decrease Value of Material Parameter")
        set RadialMaterial.Progress -=  1.0
        set StripeMaterial.Speed -=  0.1
        set DissolveMaterial.Dissolve -=  0.025

À vous de jouer

Si vous disposez d'un matériau radial, d'un matériau rayé ou d'un matériau de dissolution, vous pouvez copier et coller le code suivant dans votre propre projet pour voir comment le material_block fonctionne sur chaque matériau dans le code Verse. 

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

# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):

    Text<localizes><public> : message = "This is a Text Block."