Share
Ce que vous allez créerDans ce didacticiel, je vais vous montrer comment utiliser le système de graphique de flux dans Amazon Lumberyard. Vous utiliserez le système de script visuel pour animer des boutons et créer des interactions entre le canevas d'interface utilisateur et vos scènes 3D. Ensuite, vous créerez un autre script pour modifier votre scène 3D en tenant compte de l'emplacement de votre avatar. Enfin, vous serez confronté à un défi.
Notez qu'il vous est conseillé de lire le reste de la série afin de bien comprendre les notations de cette partie..
Cette série de didacticiels s’adresse principalement à deux groupes de développeurs de jeux: ceux qui ne connaissent pas du tout les moteurs de jeu et ceux qui connaissent d’autres moteurs de jeu (tels que Unity, Unreal Engine ou Cry Engine), mais pas avec Lumberyard. . Je suppose que vous connaissez un peu la notation graphique informatique, je ne couvrirai donc pas toutes les notations de manière exhaustive..
Flow Graph est un système de script visuel qui vous permet d'implémenter une logique de jeu complexe sans avoir à programmer une seule ligne de code. Toute logique peut être créée, modifiée et supprimée avec seulement quelques interactions d'interface utilisateur. Flow Graph est également utile pour le prototypage de scénarios, d’effets et de sons de jeu..
Flow Graph se compose essentiellement de nœuds et de liens. Les premiers représentent généralement des entités de niveau ou des actions pouvant exécuter une action spécifique sur une entité cible. Ces derniers sont utilisés pour connecter des nœuds et sont représentés par des flèches qui connectent les entrées et les sorties entre les nœuds..
Le graphe de flux peut être ouvert de deux manières principales; le premier passe par le menu principal, en utilisant le lien à Vue > Ouvrir le volet de visualisation > Graphique de flux.
La seconde façon consiste à utiliser l’icône de graphe de flux disponible dans Éditeur barre d'outils.
Ouvrez le graphe de flux en utilisant l’une des options disponibles..
L'éditeur de graphe de flux est composé des composants suivants:
Avant de vous lancer dans l'action, vous devez apprendre les bases des scripts Flow Graph..
Les scripts de graphe de flux sont organisés en quatre catégories différentes et contenus dans le Graphes de flux (nombre 3 dans l'image précédente) arborescence de dossiers dans le Editeur de graphique de flux.
Dans le didacticiel précédent, vous avez créé un canevas d’interface utilisateur contenant des boutons. Vous vous souvenez peut-être aussi que cela n’a pas été complètement testé. Il est maintenant temps de revenir en arrière et de le finaliser.
L'idée principale derrière le canevas d'interface utilisateur est la suivante:
Ouvrez Lumberyard Editor, puis le Éditeur d'interface utilisateur. Cliquez sur Ouvrir et ouvrez votre MyCanvases.uicanvas.
Sous le Hiérarchie volet, sélectionnez le Contexte élément. Maintenant, sous la Propriétés volet, cliquez sur Ajouter un composant… puis sélectionnez le Fader composant.
Sous le Image Propriétés; une nouvelle propriété appelée Fader sera affiché.
Ce Fader la propriété sera utilisée pour disparaître le canevas de l'interface utilisateur lorsque vous chargez votre niveau.
Commencez par ouvrir le CompleteFirstLevel puis ouvrez le Graphique de flux Éditeur. Un graphique de flux vide doit apparaître.
Sous le Composants volet, sélectionnez le graphique Début, sous le Jeu Catégorie.
Notez que vous pouvez également utiliser le Rechercher un mot clé rechercher des nœuds spécifiques (quand vous savez quoi chercher).
Maintenant, cliquez sur Fichier> Nouveau créer un nouveau graphe de nœud. Le nom par défaut est Défaut, et il est placé sous le Fichiers externes section dans le Graphiques vitre.
Maintenant, faites glisser le Début noeud dans le graphique de noeud (centre de l'écran).
Le nœud Démarrer est le nœud par défaut qui est exécuté lorsque vous lancez votre jeu en utilisant le Passer au jeu option. Par conséquent, normalement, la plupart des graphes de nœud commenceront à ce nœud..
Avant d'ajouter les nœuds nécessaires pour afficher votre canevas d'interface utilisateur, vous devez apprendre des informations supplémentaires sur le graphe de nœud et ses propriétés..
Un nœud est représenté dans le graphe en tant que boîte avec des entrées et des sorties.
Un nœud est constitué de ports d'entrée situés à gauche pour recevoir des informations et de ports de sortie situés à droite pour transmettre des informations. Les ports de sortie sont activés en fonction de la fonction du nœud. Les ports peuvent avoir les différents types de données suivants.
| Type de données | Couleur | La description |
|---|---|---|
| Tout | vert | Non spécifié, tout type de données peut être reçu |
| Booléen | Bleu | Vrai ou faux |
| EntityID | Vert rouge | Une valeur unique qui identifie toute entité d'un niveau |
| Flotte | blanc | Une valeur à virgule flottante 32 bits |
| Int | rouge | Un nombre positif ou négatif de 32 bits |
| UInt64 | n / a | Un nombre positif ou négatif de 64 bits |
| Chaîne | Turquoise | Un tableau de caractères utilisé pour stocker du texte |
| Vec3 | Jaune | Un vecteur 3D composé de trois valeurs à virgule flottante. Peut être utilisé pour stocker des positions, des angles ou des valeurs de couleur |
| Vide | n / a | Utilisé pour les ports qui n'acceptent aucune valeur mais sont déclenchés pour transmettre le flux de contrôle via un graphe de flux. |
En prenant en compte l'image précédente:
Pour consulter une documentation complète concernant les nœuds Flow Graph, vous devez lire la documentation officielle..
Lorsque le jeu commence, vous voulez charger votre canevas d'interface utilisateur. Heureusement, Lumberyard a un nœud pour cela. Sélectionnez le Charge noeud sous UI> Toile et faites-le glisser dans le graphe de nœud.
Ce nœud a deux propriétés principales:
Sélectionnez le Charge noeud et sous le Propriétés volet, changez le CanvasPathname propriété à MyCanvases.uicanvas.
Lorsque vous appuyez sur Entrer clé, la propriété CanvasPathname à l'intérieur de Charge le noeud devrait changer en conséquence.
Ce Charge Le noeud est presque terminé. Votre prochaine étape consiste à connecter le Début noeud dans le Charge nœud. Ceci est effectué en faisant glisser un lien (ou une flèche) de la Début sortie dans le Charger Activer contribution.
Si vous vous trompez en connectant une flèche, vous pouvez facilement résoudre ce problème. Vous devez utiliser le bouton droit de la souris pour cliquer sur la flèche et Retirer il. Notez que vous pouvez également choisir d'autres options telles que Désactiver, Retard, ou Tout. Je ne les expliquerai pas dans ce tutoriel car ils ne sont pas importants pour ce que nous voulons accomplir.
Puisque nous voulons utiliser un bouton pour déclencher une action, nous devons en ajouter une ActionListener nœud. Sous le UI > Toile, faites glisser le ActionListener dans le graphe de noeud.
le ActionListener a trois propriétés très importantes:
Je ne couvre pas le Activer encore une fois depuis que je l'ai expliqué plus tôt.
La première étape consiste à connecter le En charge au ActionListener Activer. Ensuite, pour passer l’identifiant de la toile, vous devez connecter les deux CanvasID sortie et entrée. Notez que lorsque vous les connectez le CanvasID = 0 changements à CanvasID.
le ActionName n’est pas aussi simple puisque nous devons d’abord définir une action pour notre bouton. L'idée est d'en ajouter un action cliquez sur le Démarrer jeu bouton.
Ouvrez le Éditeur d'interface utilisateur, et ouvrez le MyCanvases.uicanvas. Sélectionnez le Démarrer jeu bouton, et sous le Propriétés volet, ajoutez la chaîne NewGameClick au Action de clic.
Sauver la MyCanvases.uicanvas et retournez dans le Graphique de flux éditeur. Sélectionnez le ActionListener noeud et changer le ActionName propriété à NewGameClick.
le ActionListener est maintenant configuré. Il reste maintenant à configurer l’action effectuée lorsque cela ActionListener est déclenché. Rappeler le Fader composant ajouté plus tôt. Il est maintenant temps de l'utiliser.
Pour cela, vous devez ajouter le Animation noeud à l'intérieur du UI > Fader arbre dans le noeud du graphe.
Les nouvelles propriétés à regarder sont:
La première étape consiste à vérifier le ElementID du Fader composant. Pour cela, ouvrez le UI Editor, chargez votre toile et sélectionnez le Contexte composant. À l'intérieur de Propriétés volet, regardez le numéro à l’intérieur du Id élément.
Notez que vous avez sélectionné le Contexte élément, puisque c’est celui qui a le Fader composant. Fermer la Éditeur d'interface utilisateur et changer le ElementID du Animation noeud à 2.
Ensuite, changez le StartValue à 1 et le Valeur cible à 0. Laissez le La vitesse valeur par défaut.
Maintenant, connectez le OnAction (ActionListener)au Activer contribution (Animation). Encore une fois, connectez le CanvasID ensemble (Charge noeud au Animation nœud).
Ce Graphique de flux est presque terminé. Pour comprendre ce qui manque, jouez au jeu (Contrôle-G). Que vois-tu? Votre menu avec l'action correcte à l'intérieur du Démarrer jeu bouton, mais pas de curseur de la souris pour vous aider. Réglons ça, alors.
Cherchez le Curseur de la souris noeud à l'intérieur du Contribution arbre et l'ajouter au noeud du graphe. Ce nœud n'a que deux entrées (Spectacle et Cacher). Les deux sont explicites, à droite?
Connectez le Début sortie (Début noeud) dans le Spectacle contribution (Curseur de la souris nœud). Ensuite, connectez le OnAction sortie vers le Cacher contribution.
Vous pouvez maintenant lancer le jeu et tester si tout va bien. Vous vous rendrez compte que c'est.
Cependant, nous allons effectuer une étape de performance supplémentaire. Puisque nous ne voulons pas créer de jeux avec des fuites de mémoire, nous devrions prendre l'habitude de faire les choses correctement. Une fois l’animation de fondu terminée, nous devrions décharger la toile..
Ajouter le Décharger noeud (UI > Toile) en tant que noeud final dans le graphique de noeud. Connectez le OnComplete (Animation) en sortie dans le noeud Activer (Décharger). Enfin, connectez le CanvasID ensemble (Charge noeud au Décharger nœud).
Le graphe de flux complet est:
Enregistrez votre graphique de flux et nommez-le mygraphdemo.
La prochaine étape de ce didacticiel consiste à créer un autre graphe de flux. Cependant, cette fois, vous interagirez directement avec les objets de votre scène 3D pour construire le graphique. L'idée principale est d'utiliser l'emplacement du lecteur pour interagir avec un déclencheur de proximité afin d'allumer une lampe..
dans le RollupBar, sélectionner Entité > Déclencheurs et faites glisser un Déclencheur de proximité dans la scène 3D.
Placer le Déclencheur de proximité près d'une lampe. La boîte 3d jaune représente la zone de déclenchement.
Clic droit le Déclencheur de proximité et sélectionnez le Créer un graphique de flux option.
Nomme le TriggerGraph et cliquez D'accord. L'éditeur de graphique de flux devrait s'ouvrir. Vous remarquerez que cette fois le graphique sera placé à l'intérieur du Niveau> Entités section.
Maintenant, réorganisez votre interface afin de voir le Déclencheur de proximité, la lampe (Lumière1) et le Editeur de graphique de flux en même temps.
Sélectionnez le Déclencheur de proximité et, à l'intérieur du noeud du graphique, utilisez le bouton droit de votre souris et sélectionnez le Ajouter l'entité sélectionnée option.
Un nouveau ProximitéTrigger noeud apparaîtra.
Les seules propriétés que nous utiliserons seront les Entrer et Laisser les sorties. Le premier est déclenché lorsque le joueur entre dans le Déclencheur de proximité zone, alors que la seconde est déclenchée lorsque le joueur quitte le Déclencheur de proximité surface.
Ensuite, sélectionnez votre Lumière1 élément et désélectionnez le actif option à l'intérieur du Propriétés de l'entité vitre.
Avec le Lumière1 sélectionné, à l'intérieur du Graphique de flux utilisez le bouton droit de la souris et sélectionnez Ajouter l'entité sélectionnée encore.
Maintenant, vous devez connecter le ProximitéTrigger noeud avec le Lumière nœud. Connectez le Entrer sortie dans le Activer contribution. Enfin, connectez le Laisser sortie dans le Désactiver contribution.
Enregistrez le graphe de flux et nommez-le TriggerGraph. Il est maintenant temps de lancer le jeu et de valider votre nouveau graphe de flux. Tout devrait fonctionner comme prévu.
Afin de tester les connaissances que vous avez acquises jusqu’à présent, vous devez maintenant recréer le Lumberyard par défaut. débutant-terminé-niveau. Pour cela, vous devrez jouer avec les pinceaux, l'éclairage, les matériaux, les textures, les terrains et les graphiques de flux. En bref, appliquez tout ce que vous avez appris jusqu'à présent. Votre dernier niveau devrait ressembler à ceci:
Ceci conclut ce tutoriel sur Lumberyard. Dans ce tutoriel, je vous ai montré comment utiliser le système Flow Graph. Vous avez utilisé le système de script visuel pour configurer le canevas d’interface utilisateur en tant que vue par défaut et avez créé des interactions entre ce dernier et vos scènes 3D. Ensuite, vous avez créé un script pour modifier votre scène 3D, en tenant compte de l'emplacement de votre lecteur et d'un déclencheur de proximité. Si vous avez des questions ou des commentaires, comme toujours, n'hésitez pas à laisser une ligne dans les commentaires.
Accentsconagua