() translation by (you can also view the original English article)
En este tutorial, te enseñaré cómo usar el sistema Flow Graph en Amazon Lumberyard. Jugarás con el sistema de secuencias de comandos visuales para animar los botones y crear interacciones entre el lienzo de la interfaz de usuario y tus escenas en 3D. A continuación, creará otro script para modificar su escena 3D teniendo en cuenta la ubicación de su avatar. Por último, se enfrentará a un desafío.
Tenga en cuenta que le aconsejamos que lea el
resto de la serie con el
fin de comprender completamente las anotaciones de esta parte.
¿Quién debe leer esta serie de tutoriales?
Esta serie de tutoriales está dirigida principalmente a dos grupos de desarrolladores de juegos: aquellos que no están familiarizados con los motores de juego en absoluto, y aquellos que están familiarizados con otros motores de juego (como Unity, Unreal Engine o Cry Engine), pero no con Lumberyard . Supongo que usted tiene algún conocimiento de la notación de gráficos por computadora, por lo que no cubrir exhaustivamente todas las anotaciones.
Gráfico de Flujo
Flow Graph es un sistema de scripting visual que le permite implementar una lógica de juego compleja sin necesidad de programar una única línea de código. Toda la lógica puede ser creada, modificada y eliminada con sólo unas cuantas interacciones de interfaz de usuario. Flow Graph también es útil para la creación de prototipos de escenarios de juegos, efectos y sonidos.
En su núcleo, Flow Graph consta de nodos y enlaces. Los primeros normalmente representan entidades o acciones de nivel que pueden realizar una acción específica sobre una entidad objetivo. Estos últimos se utilizan para conectar nodos y se representan como flechas que conectan las entradas y salidas entre nodos.
El Gráfico de Flujo se puede abrir de dos formas principales: La primera es a través del menú principal, usando el enlace en View > Open View Pane > Flow Graph.
La segunda forma es a través del icono de Flow Graph disponible en la barra de herramientas Editor.
Abra el gráfico de flujo utilizando una de las opciones disponibles.
El editor de Flow Graph se compone de los siguientes componentes:
- Node graph Gráfico de nodos: rejilla de la ventana principal para mostrar nodos y conexiones de gráfico de flujo.
- Components Componentes: panel del árbol del explorador para todos los nodos que puede utilizar.
- Flow Graphs: panel del árbol del navegador para gráficos y entidades; Cada gráfico de flujo creado se colocará aquí.
- Properties Propiedades: panel para mostrar las propiedades de entrada y salida del nodo.
- Search Buscar: panel para buscar gráficos y nodos.
- SearchResults: panel para mostrar los resultados de la búsqueda.
- Breakpoints Puntos de interrupción: panel para mostrar puntos de interrupción; Una excelente manera de depurar su juego o prototipo.
Scripts de Flow Graph
Antes de saltar a la derecha en la acción, es necesario aprender los conceptos básicos de las scripts flujo de gráficos.
Las secuencias de comandos de flujo de flujo se organizan en
cuatro categorías diferentes y se incluyen en el árbol de carpetas de
Flow Graphs (número 3 en la imagen anterior) del Editor Flow Graph.
- Level: Este directorio contiene scripts que son específicos para el nivel que está abierto actualmente. Contiene Entidades, Componentes y Módulos. Los archivos de entidades son los gráficos de flujo creados y asociados con una entidad actualmente disponible en el nivel. Los componentes son similares, pero ahora los gráficos de flujo están asociados con componentes del nivel. Los módulos representan una lista de módulos que son específicos para el nivel.
- Global: Contiene las acciones de la interfaz de usuario utilizadas para encapsular la lógica de la interfaz de usuario para facilitar la depuración y el mantenimiento.
- Prefabs: Similar al prefab para la entidad, también puede crear prefabs de gráficos. Puede crear un evento dentro de un prefab, darle un nombre y, a continuación, hacer referencia a la instancia prefab como lo hace normalmente para una entidad.
- External Files archivos externos: representa una lista de scripts de Flow Graph importados o creados.
Flow Graph Scripting: Canvas interfaz de usuario como la vista predeterminada
En el tutorial anterior, creó un lienzo de interfaz de usuario que contiene algunos botones. También puede recordar que no se probó completamente. Ahora es el momento de volver y finalizarlo.
La idea principal detrás de la UI Canvas es la siguiente:
- Cuando se ejecuta el juego (Control-G), el lienzo de interfaz de usuario debe cargarse (en lugar del primer nivel).
- Al hacer clic en el botón Iniciar juego Start Game, se producen dos acciones secuenciales:
- 1) El Canvas de la interfaz de usuario se desvanece.
- 2) Usted carga su CompleteFirstLevel.
Componente Fader
Abra
el editor de Lumberyard y luego el editor de UI. Haga clic en Abrir Open y
abra MyCanvases.uicanvas.
En el panel Jerarquía Hierarchy , seleccione el elemento de fondo Background . Ahora, en el panel Propiedades Properties , haga clic en Agregar componente Add Component ... y luego seleccione el componente Fader.
Debajo de las propiedades de la imagen Image ; Se mostrará una nueva propiedad denominada Fader.
Esta propiedad Fader se utilizará para atenuar el lienzo de la interfaz de usuario al cargar el nivel.
Scripting de Flow Graph
Comience abriendo el CompleteFirstLevel y luego abra el editor de flujo gráfico. Debe aparecer un Flow Graph vacío.
En el panel Componentes Components, seleccione el gráfico Inicio Start, en la categoría Juego Game.
Tenga en cuenta que también puede utilizar la palabra clave de búsqueda Search Keyword para buscar nodos específicos (cuando se sabe qué buscar).
Ahora, haga clic en File > New para crear un nuevo gráfico de nodos. El nombre predeterminado es Predeterminado Default y se coloca en la sección External files en el panel Gráficos Graphs.
Ahora, arrastre el nodo Inicio Start en el gráfico de nodos (centro de la pantalla).
El nodo Inicio es el nodo predeterminado que se ejecuta al iniciar el juego mediante la opción Cambiar al juego Switch to Game. Por lo tanto, normalmente la mayoría de los gráficos de nodos se iniciará en este nodo.
Antes de agregar los nodos necesarios para mostrar su UI Canvas, necesita aprender información adicional sobre el gráfico de nodos y sus propiedades de nodos.
Descripción Nodos de Flow Graph
Un nodo se representa en Flow Graph como un cuadro con entradas y salidas.
Un nodo consiste en puertos de entrada en el lado izquierdo para recibir información y puertos de salida en el lado derecho para transmitir información. Los puertos de salida se activan dependiendo de la función del nodo. Los puertos pueden tener los siguientes tipos de datos diferentes.
| Tipo de datos | Color | Descripción |
|---|---|---|
| Cualquier | Verde | No especificado, cualquier tipo de datos puede ser recibido |
| booleano | Azul | Verdadero o Falso |
| EntityID | Verde / Rojo | Un valor único que identifica cualquier entidad en un nivel |
| Float | Blanco | Un valor de punto flotante de 32 bits |
| Int | Rojo | Un número positivo o negativo de 32
bits |
| UInt64 |
N/A | Un número positivo o negativo de 64 bits |
| String | Turquesa | Una serie de caracteres utilizados para almacenar texto |
| Vec3 | Amarillo | Un vector 3D que consta de tres valores de punto flotante. Puede usarse para almacenar posiciones, ángulos o valores de color |
| Void | n / a | Se utiliza para puertos que no aceptan ningún valor, sino que se activan para pasar el flujo de control a través de un flow graph |
Teniendo en cuenta la imagen anterior:
- El texto con fondo azul representa el nombre del nodo.
- El texto con fondo rojo representa la entidad objetivo.
- Las flechas en la parte izquierda del nodo representan los puertos de entrada del nodo MoveEntityTo.
- Las flechas en la parte derecha del nodo representan los puertos de salida del nodo MoveEntityTo.
Para consultar una documentación completa sobre los nodos Flow Graph, debe leer la documentación oficial.
Flow Graph Scripting: Finalización del Canvas de
la interfaz de usuario
Cuando se inicia el juego, desea cargar el lienzo de su interfaz de usuario. Afortunadamente, Lumberyard tiene un nodo para eso. Seleccione el nodo Load en UI > Canvas y arrástrelo al gráfico de nodos.
Este nodo tiene dos propiedades principales:
- Activate: se activa automáticamente cuando se llama a este nodo.
- CanvasPathname: representa el nombre de la ruta de acceso a su lienzo de interfaz de usuario. Aquí debe poner el nombre del lienzo UI creado en el tutorial anterior (MyCanvases.uicanvas).
Seleccione el nodo Cargar Load y, bajo el panel Propiedades Properties, cambie la propiedad CanvasPathname a MyCanvases.uicanvas.
Al pulsar la tecla Intro Enter , la propiedad CanvasPathname dentro del nodo Cargar Load debe cambiar en consecuencia.
Este nodo Load está casi completo. El siguiente paso es conectar el nodo Inicio Start al nodo Cargar Load. Esto se realiza arrastrando un enlace (o una flecha) desde la salida Start a la entrada Load Activate.
Si comete un error al conectar una flecha, puede arreglarlo fácilmente. Debes utilizar el botón derecho del ratón para hacer clic en la flecha y eliminarla. Tenga en cuenta que también puede elegir otras opciones como Disable, Delay o Any. No voy a explicar en este tutorial ya que no son importantes para lo que queremos lograr.
Puesto que queremos usar un botón para activar una acción, necesitamos agregar un nodo ActionListener. Bajo la UI > Canvas, arrastre el ActionListener en el gráfico de nodos.
El ActionListener tiene tres propiedades muy importantes:
- CanvasID: Representa un identificador entero único del lienzo para escuchar. En otras palabras, se refiere al lienzo que se carga en el nodo anterior. Por lo tanto, debe tener el mismo identificador que el MyCanvases.uicanvas.
- ActionName: Representa el nombre de la acción que escuchará el ActionListener. Este nombre de acción se pasa cuando el usuario hace clic en un botón.
- OnAction: activa la salida correcta cuando el lienzo envía la acción; Envía una orden a realizar.
No estoy cubriendo el Activate de nuevo desde que lo expliqué antes.
El primer paso es conectar el OnLoad al ActionListener Activate. A continuación, para pasar el ID de lienzo, debe conectar tanto la salida como la entrada de CanvasID. Tenga en cuenta que cuando se conecta el CanvasID = 0 cambia a CanvasID.
El ActionName no es tan simple ya que primero debemos definir una acción para nuestro botón. La idea es agregar un clic de acción Action al botón Iniciar juego Start Game.
Abra el Editor de la interfaz de usuario y abra MyCanvases.uicanvas. Seleccione el botón Iniciar juego Start Game y, bajo el panel Propiedades Properties , agregue la cadena NewGameClick a Click Action.
Guarde MyCanvases.uicanvas y vuelva al editor de Flow Graph. Seleccione el nodo ActionListener y cambie la propiedad ActionName a NewGameClick.
El ActionListener ahora está configurado. Lo que queda ahora es configurar la acción realizada cuando se activa ActionListener. Recuerde el componente Fader añadido anteriormente. Ahora es el momento de usarlo.
Para ello, debe agregar el nodo Animation Animación dentro del árbol UI > Fader en el nodo gráfico.
Las nuevas propiedades a considerar son:
- ElementID: Representa el identificador entero único del elemento Fader.
- StartValue: Representa el valor para que el Fader comience; Varía de 0 a 1.
- TargetValue: Representa el valor para que el Fader termine; De nuevo, oscila entre 0 y 1.
- Speed Velocidad: Representa los segundos que toma el Fader para atenuarse; 1 representa 1 segundo, 2 sería el doble de rápido. 0 representa una acción instantánea
- OnComplete: Activa la salida cuando el Fader está completo.
El primer paso es verificar el ElementID del componente Fader. Para ello, abra el Editor de interfaz de usuario, cargue su lienzo y seleccione el componente Background . Dentro del panel Propiedades Properties, eche un vistazo al número dentro del elemento Id.
Tenga en cuenta que ha seleccionado el elemento Background, ya que es el que tiene el componente Fader. Cierre el Editor de la interfaz de usuario y cambie el ElementID del nodo de animación Animation a 2.
A continuación, cambie el StartValue a 1 y TargetValue a 0. Deje el valor de Speed como predeterminado.
Ahora, conecte OnAction (ActionListener) a la entrada Activate (Animación Animation). Una vez más, conecte el CanvasID (nodo Load al nodo Animation ).
Este Flow Graph está casi completo. Para entender lo que falta, jugar el juego (Control-G). ¿Que ves? Su menú con la acción correcta dentro del botón Iniciar juego Start Game, pero no hay ningún cursor del ratón para ayudarle. Vamos a arreglar eso, entonces.
Busque el nodo MouseCursor dentro del árbol de entrada y agréguelo al nodo del gráfico. Este nodo sólo tiene dos entradas (Mostrar y ocultar). Ambos se explican por sí mismos, ¿no?
Conecte la salida de inicio Start (nodo Start) en la entrada Mostrar (nodo MouseCursor). A continuación, conecte la salida OnAction a la entrada Ocultar.
Ahora puede ejecutar el juego y probar si todo está bien. Te darás cuenta de que lo es.
Sin embargo, realizaremos un paso de rendimiento adicional. Puesto que no queremos crear juegos con pérdidas de memoria, deberíamos tener el hábito de hacer las cosas correctamente. Después de que termine la animación de desvanecimiento, deberíamos descargar el canvas.
Agregue el nodo Unload (UI > Canvas) como su nodo final en el gráfico de nodos. Conecte la salida OnComplete (Animation) en el nodo Activate (Unload). Finalmente, conecte el objeto CanvasID (nodo Load al nodo Unload).
El flow graph completo es:
Guarde su flow graph y denomínelo mygraphdemo.
Más Flow Graph Scripting
El siguiente paso de este tutorial es crear otro diagrama de flujo. Sin embargo, esta vez, interactuará directamente con los objetos dentro de su escena 3D para construir el gráfico. La idea principal es usar la ubicación del reproductor para interactuar con un disparador de proximidad para encender una lámpara.
En la RollupBar, seleccione Entity > Triggers y arrastre un Trigger Proximity en la escena 3D.
Coloque el disparador de proximidad Proximity Trigger cerca de una lámpara. La caja amarilla 3d representa el área del disparador.
Haga clic con el botón derecho del ratón en el disparador de proximidad Proximity Trigger y seleccione la opción Crear gráfico de flujo Create Flow Graph .
Asigne un nombre a TriggerGraph y haga clic en Aceptar OK. El editor de Flow Graph debe abrirse. Observará que esta vez la gráfica se colocará dentro de la sección Level > Entities.
Ahora, reorganice su interfaz para ver el disparador de proximidad Proximity Trigger, la lámpara (Light1) y el Flow Graph Editor al mismo tiempo.
Seleccione el desencadenador de proximidad Proximity Trigger y, dentro del nodo del gráfico, utilice el botón derecho del ratón y seleccione la opción Agregar entidad seleccionada Add Selected Entity.
Aparecerá un nuevo nodo ProximityTrigger.
Las únicas propiedades que usaremos serán las salidas de entrada Enter y salida Leave. El primero se activa cuando el jugador entra en el área de Disparo de Proximidad Proximity Trigger, mientras que el segundo se dispara cuando el jugador abandona el área de Disparo de Proximidad Proximity Trigger .
A continuación, seleccione el elemento Light1 y deseleccione la opción Activa Active dentro del panel Propiedades de Entidad Entity Properties.
Con el Light1 seleccionado, dentro del Flow Graph utilice el botón derecho del ratón y seleccione Add Selected Entity nuevamente.
Ahora debe conectar el nodo ProximityTrigger con el nodo Light. Conecte la salida Enter a la entrada Enable. Finalmente, conecte la salida Leave en la entrada Desactivar Disable .
Guarde el gráfico de flujo y llámelo TriggerGraph. Ahora es el momento de ejecutar el juego y validar su nuevo gráfico de flujo. Todo debe funcionar como se esperaba.
Reto
Con el fin de probar el conocimiento que ha adquirido hasta ahora, ahora se le reta a recrear el Lumberyard por defecto de getting-started-completed-level. Para eso, tendrá que jugar con los pinceles, iluminación, materiales, texturas, terrenos y gráficos de flujo. En resumen, aplique todo lo que ha aprendido hasta ahora. Su nivel final debe ser similar al siguiente:
Conclusión
Esto concluye este tutorial sobre Lumberyard. En este tutorial, te enseñé cómo usar el sistema de Flow Graph. Has jugado con el sistema de secuencias de comandos visuales para configurar el lienzo de la interfaz de usuario como tu vista predeterminada y has creado interacciones entre el lienzo de la interfaz de usuario y tus escenas en 3D. A continuación, creó un script para modificar su escena 3D, teniendo en cuenta la ubicación de su reproductor y un disparador de proximidad. Si tiene preguntas o comentarios, como siempre, siéntase libre de dejar una línea en los comentarios.
