Comunidad orientada al desarrollo de videojuegos

Cargar Animaciones en Wave Engine

OBJETIVOS

La animación de elementos 3D en videojuegos es muy común, y una característica básica que un juego debe tener.

Al final de este post deberías saber como animar elementos 3D en Wave Engine:

screenfinalanimation

CREAR PROYECTO

Creamos un nuevo proyecto de juego de Wave Engine y lo llamamos AnimationSample:

02createproject_thumb1

en la clase MyScene.cs añadimos el siguiente código en el método CreateScene() para crear una simple cámara fija:

FixedCamera camera = new FixedCamera("Fixed Camera", new Vector3(0f, 2f, 2.5f), new Vector3(0f, 1f, 0f));
 
EntityManager.Add(camera);

Nota: No nos olvidemos de incluir los usings necesarios, como son WaveEngine.Components.Cameras y WaveEngine.Common.Math.

RECURSOS

Para este ejemplo usaremos tres archivos.wpk que podemos encontrar en la carpeta Resources:

  • isis.wpk: contiene el modelo que usaremos
  • isis-animations.wpk: contiene un set de animaciones que se aplican al modelo
  • isis-difuse.wpk: contiene la textura que aplicaremos a nuestro modelo

Añadimos estos tres archivos en la carpeta Content de nuestro proyecto:

screencontent

No olvidemos entrar en las propiedades de los tres archivos y elegir la opción copiar siempre o copiar si es posterior, para evitar el error FileNotFoundException.

Vamos a añadir un TextBlock para ver que animación se está ejecutando en el momento, lo hacemos en el método CreateScene()

TextBlock animationName = new TextBlock("Animation")
{
     Text = "Current Animation: ",
     Margin = new Thickness(20f),
};
 
EntityManager.Add(animationName);

Necesitaremos añadir nuevos usings como son WaveEngine.Framework.UI y WaveEngine.Components.UI.

AÑADIR EL MODELO

Necesitamos crear una entidad para cargar nuestro modelo y todos los componentes necesarios para representarlo en la escena. Primero añadimos los usings:

using WaveEngine.Framework.Graphics;
using WaveEngine.Framework.Physics3D;
using WaveEngine.Components.Graphics3D;
using WaveEngine.Materials;
using WaveEngine.Components.Animation;

Añadimos el siguiente código para crear y representar nuestro modelo, lo añadimos en CreateScene():

Entity player = new Entity("player")
      .AddComponent(new Transform3D())
      .AddComponent(new SkinnedModel("Content/isis.wpk"))
      .AddComponent(new MaterialsMap(new BasicMaterial("Content/isis-difuse.wpk")))
      .AddComponent(new Animation3D("Content/isis_animations.wpk"))
      .AddComponent(new SkinnedModelRenderer());
 
EntityManager.Add(player);

Con estas líneas hemos creado una entidad con nuestro modelo, textura y animaciones que tenemos en la carpeta Content.

Si ejecutamos nuestra aplicación veremos nuestro modelo:

screenmodel

ROTAR EL MODELO

Ahora vamos a añadir el código necesario para rotar el modelo cuando pulsemos las teclas de flecha izquierda y derecha. Creamos una nueva clase Behavior para rotar el modelo. Añadimos esta nueva clase al proyecto y la llamamos PlayerBehavior.cs:

screenplayerbehavior

Añadimos un using a la nueva clase WaveEngine.Framework para usar Behavior como clase base de PlayerBehavior:

class PlayerBehavior:Behavior

Añadimos el constructor de la clase:

public PlayerBehavior()
     : base("PlayerBehavior")
 {
 }

Vamos a necesitar acceder al componente Transform3D, y para ello tenemos que añadir un nuevo using WaveEngine.Framework.Graphics, y añadimos una variable de clase antes del constructor:

[RequiredComponent]
public Transform3D playerTransform;

Con el atributo RequiredComponent estamos indicando que la entidad que tenga incluida PlayerBehvior() necesita un componente Transform3D obligatoriamente, que nos permitirá el acceso a cosas como el tamaño, la rotación y la posición de esa entidad.

Creamos otra variable de clase antes del constructor que usaremos para acceder al estado del teclado:

KeyboardState state;

Ahora sobrescribimos el método Update() con el siguiente código:

protected override void Update(TimeSpan gameTime)
{
    state = WaveServices.Input.KeyboardState;
 
    if (state.Left == ButtonState.Pressed)
        playerTransform.Rotation.Y -= 0.03f;
    if (state.Right == ButtonState.Pressed)
        playerTransform.Rotation.Y += 0.03f;
}

En cada actualización, obtenemos el estado del teclado y si se pulsa izquierda o derecha el modelo rotará en una u otra dirección. Si ejecutamos y probamos a pulsar las teclas veremos lo siguiente:

screenrotate

ANIMAR EL MODELO

Ahora es el momento de empezar a animar el modelo con el contenido de isis-animations.wpk. Necesitaremos crear un array de strings que guardará el nombre de las animaciones, un índice que itere entre ellas y una variable ButtonState para ejecutar una animación todas las veces que pulsemos la tecla espacio. Para ello añadimos el siguiente código al principio de la clase, con las variables de clase anteriores:

string[] animations = { "Jog", "Walk", "Idle", };
int animationIndex;
ButtonState lastSpaceState;

Como hemos hecho previamente con el componente Transform3D, necesitamos acceder al componente Animation3D, así que añadimos otro RequiredCompomnent antes del constructor:

[RequiredComponent]
public Animation3D animation;

No nos olvidemos de incluir el using WaveEngine.Components.Animation.

Ahora añadimos el código necesario para iterar entre las animaciones:

if (lastSpaceState == ButtonState.Release && state.Space == ButtonState.Pressed)
{
    EntityManager.Find<TextBlock>("Animation").Text = "Current Animation: " + animations[animationIndex];
    animation.PlayAnimation(animations[animationIndex], true);
    animationIndex++;
    if (animationIndex == animations.Length)
        animationIndex = 0;
}
 
lastSpaceState = state.Space;

Con este trozo de código estamos aplicando una animación cada vez que pulsamos y soltamos el espacio, actualizamos la propiedad Text del componente TextBlock con el nombre de la animación actual, ejecutamos la animación en modo loop, y actualizamos el índice de la animación que se ejecuta actualmente.

Nota: La clase TextBlock esta incluida en el using WaveEngine.Components.UI, no olvidemos incluirlo.

Finalmente si ejecutamos, veremos como podemos girar el modelo a la vez que se ejecuta una animación, y cambiar entre ellas si pulsamos el espacio.

screenwalk

DESCARGAR EL PROYECTO

Puedes descargar el proyecto completo aquí.

FUENTES

Tutorial original en inglés: http://blog.waveengine.net

Para descargar Wave Engine: http://www.waveengine.net

Traducido por Carlos Sánchez López

, , , , ,

Leave a Reply