Sincronización de gráficos de animación: Ejemplo - Guía del usuario de Lumberyard

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Sincronización de gráficos de animación: Ejemplo

Puede utilizar gráficos de animación sincronizada para sincronizar la animación entre actores. Por ejemplo, la animación de un actor podría desencadenar una animación en otro actor. Un gráfico de animación puede ser el gráfico principal y tener varios gráficos secundarios. Del mismo modo, un gráfico de animación puede ser el gráfico secundario de un gráfico y el gráfico principal de otro gráfico.

En este tema se describen los siguientes pasos principales para sincronizar dos gráficos de animación:

  1. Agregue los componentes necesarios a las entidades que sincronizar, incluido el componente Anim Graph.

  2. Utilice el Editor de animación para crear un conjunto de movimiento y uno o varios gráficos de animación.

  3. Agregue un parámetro al gráfico secundario para recibir el evento de cambio desde el gráfico principal.

  4. Agregue un parámetro al gráfico principal.

  5. Agregue una acción de parámetro siervo al gráfico principal para enviar eventos de cambio al gráfico secundario.

  6. Sincronice los gráficos mediante elBus de eventos (EBus)y Lua Script (Sistema de escritura).

nota

Para obtener más información acerca de la sincronización de animación en clientes independientes en la red, consulte Sincronización de animaciones en la red.

En este tema se ilustra la sincronización de este gráfico con un ejemplo que tiene dos actores, un actor robot ("Jack") y un actor arma. Cuando el jugador activa el modo de sincronización y utiliza el teclado para disparar, el robot realiza un movimiento de disparo y el arma dispara. Cuando el jugador desactiva el modo de sincronización, el robot realiza un movimiento de disparo, pero el arma no dispara.


            La escena. de juego de ejemplo.

El robot tiene un gráfico de animación syncFeature_Jack y el arma utiliza un gráfico syncFeature_Gun. El gráfico de robot es el gráfico principal y el gráfico de arma es el gráfico secundario.

Cuando el modo de sincronización está activado, el arma dispara de forma sincronizada con el robot. Cuando el robot dispara, el estado del parámetro shoot del gráfico principal se recibe en el parámetro gunTrigger del gráfico secundario. El gráfico secundario, que está asociado al arma, recibe el evento de cambio de parámetro y dispara el arma.

1. Agregar componentes necesarios

El primer paso consiste en añadir los componentes necesarios a las entidades que desea sincronizar. Los componentes de robot y arma que utilizan las entidades en el ejemplo se describen en las secciones siguientes.

Componentes de entidad de robot

La entidad de robot utiliza los siguientes componentes:

  • Transform

  • Actor

  • Anim graph (Gráfico de animación)

  • Input

  • Script Lua

La imagen siguiente muestra la configuración de los componentes de la entidad de robot en el Inspector de entidades.


                    Los componentes de la entidad de robot.

Componentes de la entidad de arma

La entidad de arma utiliza los siguientes componentes:

  • Transform

  • Actor

  • Script Lua

  • Anim graph (Gráfico de animación)

  • Input

La imagen siguiente muestra la configuración de los componentes de la entidad de arma en el Inspector de entidades.


                    Los componentes de la entidad de arma en Entity Inspector.

2. Crear un conjunto de movimiento y gráficos de animación

Después de configurar las entidades y componentes, cree un conjunto de movimiento y dos gráficos de animación. El conjunto de movimiento contiene los movimiento que utiliza el gráfico y los gráficos de animación principal y secundario animan y sincronizan las entidades.

Para crear un conjunto de movimiento y dos gráficos de animación

  1. Crear un conjunto de movimientos. Para obtener más información acerca de cómo crear un conjunto de movimiento, consulte Introducción al editor de animation. El MotionSet0 de este ejemplo contiene los movimientos gunshootanimation, jack_shoot y jack_idle.

    
                        Conjunto de movimiento de ejemplo.
  2. Cree un gráfico de animación secundario. Para obtener más información acerca de cómo crear un gráfico de animación secundario, consulte Introducción al editor de animation. El gráfico secundario controla una o varias entidades cuyas acciones las determina el gráfico principal.

    El gráfico secundario syncFeature_Gun de este ejemplo tiene un nodo Bindpose0 y un nodo Motion0. El nodo Motion0 contiene el movimiento gunshootanimation.

    
                        Nodo de movimiento con animación asociada.
  3. Cree un gráfico principal. El gráfico principal envía eventos de control al gráfico secundario.

    El gráfico de animación principal syncFeature_Jack de este ejemplo tiene un nodo Motion1 y un nodo Motion0. El nodo Motion1 contiene el movimiento jack_idle y el nodo Motion0 contiene el movimiento jack_shoot.

    
                        Nodo de movimiento con movimiento inactivo asociado.
    
                        Nodo de movimiento con animación asociada.

3. Agregar un parámetro al gráfico secundario

Ahora está listo para añadir un parámetro al gráfico secundario que recibe el evento de cambio de parámetro desde el gráfico principal. Después de agregar el parámetro, añada las condiciones de parámetro que especifican cuando la animación pasa de un movimiento a otro.

Para agregar un parámetro al gráfico secundario para recibir el evento de cambio desde el gráfico principal

  1. En la pestaña Parameters (Parámetros) del gráfico de animación secundario, haga clic en el icono de signo más (+) y elija Add parameter (Agregar parámetro).

    
                        SeleccionarAgregue parámetroEn Animation Editor.
  2. En el cuadro de diálogo Create Parameter (Crear parámetro), en Value type (Tipo de valor), elija el tipo de datos que desea utilizar para el parámetro. En este ejemplo se utiliza el tipo de valor Boolean (Booleano) (casilla de verificación) ya que el disparador del arma está activado o desactivado.

    
                        Seleccione un tipo de valor para el parámetro.
  3. En Name (Nombre), escriba un nombre para el parámetro. En este ejemplo se utiliza gunTrigger.

    
                        Escriba un nombre de parámetro.
  4. Haga clic en Create (Crear). La lista Parameters (Parámetros) muestra el parámetro que ha creado.

    
                        Parámetro agregado al gráfico de animación.

Agregue condiciones de parámetros al gráfico secundario

En esta sección, agregue condiciones de parámetros en las líneas de transición que especifican cuándo cambia la animación. En el ejemplo, las condiciones indican si se ha presionado el disparador del arma.

Para agregar condiciones de parámetro al gráfico secundario

  1. Haga clic en la línea de transición desde el nodo BindPose0 al nodo Motion0. A continuación, en el panel Attributes (Atributos), haga clic en Add condition (Agregar condición) y elija Parameter Condition (Condición de parámetro).

    
                            Seleccione la línea de transición para añadir una condición de parámetro.
  2. Haga clic en Select parameter (Seleccionar parámetro).

    
                            Haga clic en Select parameter (Seleccionar parámetro).
  3. En la Parameter Selection Window (Ventana de selección de parámetros), elija el parámetro que acaba de crear y haga clic en OK (Aceptar).

    
                            Elija un parámetro para la condición de parámetro.

    En el panel Attributes (Atributos), una sección Parameter Condition (Condición de parámetro) muestra el parámetro que ha agregado. En la línea de transición, un nodo redondo pequeño indica que la línea tiene una condición de parámetro.

    
                            Nodo redondo pequeño que indica una condición de parámetro.
  4. Para Test Function (Función de prueba), use el valor predeterminado de param > testValue. En este ejemplo, esto significa que si el disparador recibe un valor mayor que 0, el arma se dispara.

    
                            Especificación de una función de prueba para la condición de parámetro.
  5. En Test Value (Valor de prueba), mantenga el valor predeterminado en 0,0.

  6. Haga clic en la línea de transición desde el nodo Motion0 al nodo BindPose0. A continuación, en el panel Attributes (Atributos), haga clic en Add condition (Agregar condición) y elija Parameter Condition (Condición de parámetro).

    
                            Seleccione la línea de transición opuesta para añadir otra condición de parámetro.
  7. Haga clic en Select parameter (Seleccionar parámetro).

  8. En la Parameter Selection Window (Ventana de selección de parámetro), elija el parámetro que está utilizando. El ejemplo utiliza el parámetro gunTrigger.

  9. Para Test Function (Función de prueba), use el valor predeterminado de param == testValue. En este ejemplo, esto significa que si el valor del disparador es igual a cero, el movimiento vuelve inactivo y el arma ya no dispara.

  10. En Test Value (Valor de prueba), mantenga el valor predeterminado en 0,0.

Ahora el gráfico de animación secundario está listo para recibir señales del gráfico principal.

4. Agregue un parámetro y condiciones de parámetros al gráfico principal

Puede añadir un parámetro y condiciones de parámetros al gráfico principal como hizo con el gráfico secundario. Sin embargo, también agrega acciones de parámetro ("siervo") secundario al gráfico principal. Las acciones indican al gráfico secundario que imite las animaciones del gráfico principal.

Para agregar un parámetro al gráfico principal

  1. En la pestaña Parameters (Parámetros), haga clic en el icono de signo más (+) y elija Add parameter (Agregar parámetro).

    
                        Adición de un parámetro al gráfico principal.
  2. En el cuadro de diálogo Create Parameter (Crear parámetro), en Value type (Tipo de valor), elija el tipo de datos que desea utilizar para el parámetro. En este ejemplo se utiliza el tipo de valor Boolean (Booleano) (casilla de verificación) ya que el disparador del arma está activado o desactivado.

    
                        Elección de un tipo de valor para el parámetro.
  3. En Name (Nombre), escriba un nombre para el parámetro. En este ejemplo se utiliza shoot.

    
                        Introduzca un nombre para el parámetro del gráfico principal.
  4. Haga clic en Create (Crear).

Agregar condiciones de parámetro al gráfico principal

Ahora agregue las condiciones de parámetro en las líneas de transición en el gráfico principal del mismo modo que hizo en el gráfico secundario.

Para agregar condiciones de parámetro al gráfico principal

  1. Haga clic en la línea de transición desde el nodo Motion1 al nodo Motion0. A continuación, en el panel Attributes (Atributos), haga clic en Add condition (Agregar condición) y elija Parameter Condition (Condición de parámetro).

    
                            Haga clic en la línea de transición para agregar una condición de parámetro.
  2. Haga clic en Select parameter (Seleccionar parámetro).

  3. En la Parameter Selection Window (Ventana de selección de parámetro), elija el parámetro que acaba de crear. En este ejemplo se utiliza shoot.

    
                            Elija un parámetro para la condición de parámetro.
  4. Para Test Function (Función de prueba), use el valor predeterminado de param > testValue.

  5. En Test Value (Valor de prueba), utilice el valor predeterminado de 0.0.

  6. Haga clic en la línea de transición desde el nodo Motion0 al nodo Motion1. A continuación, en el panel Attributes (Atributos), haga clic en Add condition (Agregar condición) y elija Parameter Condition (Condición de parámetro).

    
                            Agregue una condición de parámetro a la otra línea de transición.
  7. Haga clic en Select parameter (Seleccionar parámetro).

  8. En la Parameter Selection Window (Ventana de selección de parámetro), elija el parámetro que está utilizando. El ejemplo utiliza shoot.

  9. Para Test Function (Función de prueba), use el valor predeterminado de param == testValue.

  10. En Test Value (Valor de prueba), utilice el valor predeterminado de 0.0.

5. Añada acciones de parámetro siervo al gráfico principal

Ahora está listo para agregar acciones de parámetro («siervo») secundario al gráfico principal. Un script utiliza estas acciones para sincronizar los dos gráficos.

Para agregar una acción de parámetro siervo al gráfico principal

  1. En el Editor de animación, haga clic para seleccionar la primera línea de transición de nuevo. En este ejemplo se selecciona la línea desde el nodo jack_idle Motion1 al nodo jack_shoot Motion0.

    
                        Haga clic en la línea de transición para agregar una acción de parámetro siervo.
  2. En el panel Attributes (Atributos) del gráfico principal, haga clic en Add action (Agregar acción), Servant Parameter Action (Acción de parámetro siervo).

    
                        Haga clic enAcción Add Acción,Acción de parámetro de servidor.
  3. En Servant Parameter Action (Acción de parámetro siervo), en el recuadro Trigger Mode (Modo de disparador), mantenga el valor On Enter (Al introducir) predeterminado. On Enter (Al introducir) especifica que la acción se activa cuando se introduce el estado o transición.

    
                        UsarEn Escriba:  paraActivador de modo.
  4. En el cuadro Servant anim graph (Gráfico de animación siervo), haga clic en Browse (Examinar) (...) y elija el gráfico de animación secundario que tenga el parámetro que desee utilizar. En este ejemplo se elige un gráfico de animación secundario denominado syncFeature_Gun.

  5. Haga clic en Select parameter (Seleccionar parámetro) para elegir un parámetro del gráfico de animación secundario que acaba de elegir. En este ejemplo se elige en parámetro gunTrigger.

    
                        Haga clic en Select parameter (Seleccionar parámetro).
    
                        Elija un parámetro para la acción de parámetro siervo.

    En la línea de transición, un pequeño nodo cuadrado indica que la línea de transición tiene una acción de parámetro. El nodo redondo pequeño situado al lado representa la condición de parámetro que añadió con anterioridad.

    
                        Nodo cuadrado pequeño que indica una acción de parámetro.
  6. En Trigger value (Valor de disparador), especifique el valor que emitir cuando se activa la acción. Dado que Trigger value (Valor de disparador) se trata como un valor flotante único, puede utilizarlo para parámetros flotantes, booleanos y enteros. Este ejemplo especifica 1.0, que es el valor cuando se dispara el arma.

    
                        Especifique un valor de disparador.
  7. Haga clic en la línea desde Motion0 a Motion1 y repita los pasos para agregar una acción de parámetro siervo a la línea de transición restante.

  8. En el cuadro Trigger value (Valor de disparador), especifique un valor distinto. El ejemplo especifica un valor de disparador de 0.0, que es el valor cuando el arma está inactiva.

Ahora que los gráficos de animación están listos, puede realizar los siguientes pasos: recopilar los scripts de Lua de entrada de usuario y escritura para sincronizar los gráficos.

6. Sincronizar los gráficos principal y secundario

La sincronización de los gráficos principal y secundario conlleva los siguientes pasos:

  1. Obtención de la entrada a través del teclado del jugador.

  2. Colocación de un componente de script de Lua y un script de Lua en la entidad secundaria.

  3. Colocación de un componente de script de Lua y un script de Lua en la entidad principal.

Los scripts de Lua sincronizan los dos gráficos manejando eventos de gráficos de animación enBus de eventos (EBus)Sistema

Obtención de la entrada del jugador

En el ejemplo, el estado de sincronización de los gráficos principal y secundario y el disparo del arma se controlan mediante las siguientes entradas de teclado o pulsaciones de teclas, por parte del usuario. El multiplicador del valor del evento es el valor real enviado al sistema de entrada y al script de Lua.

Combinación de teclas Descripción Multiplicador del valor del evento
1 Activa el modo de sincronización. 1
2 Desactiva el modo de sincronización (desactivado de forma predeterminada). -1
S Dispara el arma. 1
D Detiene el disparo del arma. -1

Para recopilar estas entradas, el ejemplo añade componentes Input a la entidad de robot y a la entidad de arma.

Para utilizar el componente de entrada, debe habilitar la gema Input Management Framework y la gema Starting Point Input para su proyecto. El marco Input Management Framework convierte la entrada para eventos de juego definidos por el usuario. La gema Starting Point Input interpreta la entrada de hardware y la convierte en eventos de entrada tales como pressed, released y held.

Cada componente de entrada hace referencia a un archivo .inputbindings. Un archivo .inputbindings enlace un conjunto de entradas a un evento. Estas entradas pueden proceder de fuentes tales como ratón, teclado o controlador de juego. Puede utilizar elEditor de enlaces de entradaEn Lumberyard Editor para crear un archivo de enlaces de entrada. Para obtener más información, consulte Uso del componente Input.

Obtención de la entrada de teclado para controlar la sincronización de gráfico

En el ejemplo, la entidad de arma tiene un componente de entrada. El componente de entrada utiliza un recurso synctest.inputbindings para vincular las entradas de teclado 1 y 2 al evento SyncControl. El evento SyncControl controla el modo de sincronización, que determina si el arma se dispara o no cuando dispara el robot.

La imagen siguiente muestra los enlaces de entrada correspondientes en el Input Bindings Editor (Editor de enlaces de entrada).


                    Recursos de enlace de entrada de ejemplo para el control de sincronización en elEditor de enlaces de entrada.

Obtención de una entrada de teclado para controlar el disparo

El componente de entrada en el robot utiliza un recurso syncgun.inputbindings para enlazar las entradas de teclado S y D al evento ShootControl. El evento ShootControl controla el disparo de la pistola.

La imagen siguiente muestra los enlaces de entrada correspondientes en el Input Bindings Editor (Editor de enlaces de entrada).


                    Ejemplo de recurso de enlaces de entrada para control de disparo en elEditor de enlaces de entrada.

Uso de un script en el gráfico secundario para conmutar la sincronización

El ejemplo utiliza componentes de script de Lua tanto en la entidad principal (robot) como secundaria (arma). El script en la entidad principal controla el disparo del arma. El script en la entidad secundaria controla el modo de sincronización. Para añadir un script de Lua a una entidad, agregue un componente de script de Lua a la entidad y, a continuación, asocie el script al componente.

El script de Lua en la entidad de arma recibe la entrada desde el teclado para conmutar al modo de sincronización. Para sincronizar el gráfico secundario al gráfico principal, el script utiliza el evento SyncAnimGraph de EBus. En el siguiente ejemplo, el parámetro self.entityId hace referencia a la entidad secundaria (el arma). El parámetro self.Properties.PrimaryEntity hace referencia al robot.

AnimGraphComponentRequestBus.Event.SyncAnimGraph(self.entityId,self.Properties.PrimaryEntity);

Para quitar la sincronización del gráfico secundario del gráfico principal, el mismo script utiliza el evento DesyncAnimGraph de EBus.

AnimGraphComponentRequestBus.Event.DesyncAnimGraph(self.entityId,self.Properties.PrimaryEntity);

El script completo muestra cómo los métodos DesyncAnimGraph y SyncAnimGraph gestionan el evento de entrada de SyncControl.

-- syncSample.lua local syncSample = { Properties = { PrimaryEntity = { default = EntityId() } }, } function syncSample:OnActivate() self.SyncControlInputBusId = InputEventNotificationId("SyncControl"); self.SyncControlInputBus = InputEventNotificationBus.Connect(self, self.SyncControlInputBusId); self.ShootControlInputBusId = InputEventNotificationId("ShootControl"); self.ShootControlInputBus = InputEventNotificationBus.Connect(self, self.ShootControlInputBusId); self.SyncControl = false; self.Shooting = false; end function syncSample:HandleSyncControl(floatValue) if (floatValue > 0 and self.SyncControl == false ) then AnimGraphComponentRequestBus.Event.SyncAnimGraph(self.entityId, self.Properties.PrimaryEntity); self.SyncControl = true; elseif(floatValue < 0 and self.SyncControl == true ) then AnimGraphComponentRequestBus.Event.DesyncAnimGraph(self.entityId, self.Properties.PrimaryEntity); self.SyncControl = false; end end function syncSample:HandleInput(floatValue) if (InputEventNotificationBus.GetCurrentBusId() == self.SyncControlInputBusId) then self:HandleSyncControl(floatValue); end end function syncSample:OnPressed(floatValue) self:HandleInput(floatValue); end function syncSample:OnHeld(floatValue) self:HandleInput(floatValue); end return syncSample;

Uso de script en el gráfico principal para controlar el disparo

El script de Lua de ejemplo en la entidad principal (el robot) recibe la entrada de teclado que conmuta el disparo del arma. El parámetro shoot del gráfico de animación de la entidad del robot utiliza el tipo Boolean (Booleano) (casilla de verificación). Cuando el arma se dispara, el parámetro shoot es true. Dado que shoot es un parámetro booleano con nombre, el script de Lua en la entidad principal utiliza la función SetNamedParameterBool en el AnimGraphComponentBus.

El script completo muestra cómo se utiliza la función SetNamedParameterBool para conmutar el estado de disparo.

-- syncGun.lua local syncGun = { } function syncGun:OnActivate() self.ShootControlInputBusId = InputEventNotificationId("ShootControl"); self.ShootControlInputBus = InputEventNotificationBus.Connect(self, self.ShootControlInputBusId); self.Shooting = false; end function syncGun:HandleShootControl(floatValue) if (floatValue > 0 and self.Shooting == false ) then AnimGraphComponentRequestBus.Event.SetNamedParameterBool(self.entityId, "shoot", true); self.Shooting = true; elseif(floatValue < 0 and self.Shooting == true ) then AnimGraphComponentRequestBus.Event.SetNamedParameterBool(self.entityId, "shoot", false); self.Shooting = false; end end function syncGun:HandleInput(floatValue) if (InputEventNotificationBus.GetCurrentBusId() == self.ShootControlInputBusId) then self:HandleShootControl(floatValue); end end function syncGun:OnPressed(floatValue) self:HandleInput(floatValue); end function syncGun:OnHeld(floatValue) self:HandleInput(floatValue); end return syncGun;

El ejemplo en acción

La siguiente imagen animada muestra el ejemplo finalizado en acción cuando se desactiva el modo de sincronización. El robot dispara, pero el arma no.


                Modo de sincronización desactivado

La siguiente imagen animada muestra el ejemplo cuando el modo de sincronización está activada. El arma dispara cuando el robot dispara.


                Modo de sincronización activado