• Register
Post tutorial RSS Animation sample

Animated 3D elements in games are very common, and a very basic feature a game must have. We introduce how we can animate 3D elements in Wave Engine.

Posted by on - Basic Client Side Coding


Animated 3D elements in games are very common, and a very basic feature a game must have. We introduce how we can animate 3D elements in Wave Engine.

By the end of this tutorial you would know how to animate 3D elements in Wave Engine:

Create Project

Create a new WaveEngine Game Project from the Wave Engine templates, and name it AnimationSample:

In MyScene.cs file add at the end of CreateScene() method the code to create a simple ViewCamera in this way:

csharp code:
  ViewCamera camera = new ViewCamera("MainCamera", new Vector3(2, 1, 2), new Vector3(0, 1, 0));
            camera.BackgroundColor = Color.CornflowerBlue;


For this sample, we will use the assets you can find in github here . We will need

  • isis.X: Contains the modeled object we will use.
  • isis-animations.X: Contains a set of animations to be applied to our model.
  • isis-difuse.png: Contains the texture that will be applied to our model.

Open Resources.weproj with WaveEngine Assets Exporter and add those files:


Do not forget to save the project in Assets Exporter.
We need to set two properties due to the model used and the animations. Select isis.X asset and mark the option "FullBoneWeights":

And in "isis-animations.X" mark the option "ExportAnimations":

Now, we will add a TextBlock to see which animation is currently played by the model at the end of CreateScene() method:

csharp code:
TextBlock animationName = new TextBlock("Animation")


Text = "Current Animation: ",

Margin = new Thickness(20f),



Do not forget to add the usings to WaveEngine.Framework.UI and WaveEngine.Components.UI

Add the Model

We need to create an entity to load our model and all components needed to represent it. First add these usings:

csharp code:
using WaveEngine.Framework.Graphics;
using WaveEngine.Framework.Physics3D;
using WaveEngine.Components.Graphics3D;
using WaveEngine.Materials;
using WaveEngine.Components.Animation;

Add code for create our model and add it to our scene at the end of CreateScene() method:

csharp code:
Entity animatedModel = new Entity("Isis")
     .AddComponent(new Transform3D())
     .AddComponent(new BoxCollider())
     .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());

With these lines we create an Entity with the model, texture and animations we have in the files we added previously to Content directory.

If we build and run we will get a still model:


Rotate Model

Now, we will add the needed code to rotate our model when we use left and right arrow keys to see the model. We will add a custom Behavior to the model for that purpose. So add a new class to AnimationSampleProject in solution explorer and name it PlayerBehavior:


Add a using to WaveEngine.Framework namespace to use Behavior as PlayerBehavior base class:

csharp code:
class PlayerBehavior:Behavior

Add this code as the parameter less constructor:

csharp code:
public PlayerBehavior()

: base("PlayerBehavior")



We are going to need access to the Transform3D component we need a using to WaveEngine.Framework.Graphics namespace, and add a class variable before PlayerBehavior() constructor like this:

csharp code:

public Transform3D playerTransform;

With RequiredComponent attribute we are indicating that the Entity that uses PlayerBehavior needs a Transform3D component that let access to such things like scale, rotation and position.

Create a class variable before the default constructor we will use it to access keyboard state:

csharp code:
KeyboardState state;

Override Update() method with this code:

csharp code:
protected override void Update(TimeSpan gameTime)
    state = WaveServices.Input.KeyboardState;

    if (state.Left == ButtonState.Pressed)
        playerTransform.Rotation -= Vector3.UnitY * 0.03f;
    if (state.Right == ButtonState.Pressed)
        playerTransform.Rotation += Vector3.UnitY * 0.03f;

On every update, we will get keyboard state, and if left array is pressed, we will rotate the model to the left, and if the right array is pressed we will rotate it to the right. But we need to add this new component to the animatedModel entity, so on CreateScene() method, add the PlayerBehavior after the SkinnedModelRenderer:

csharp code:
.AddComponent(new MaterialsMap(new BasicMaterial("Content/isis-difuse.wpk")))
.AddComponent(new Animation3D("Content/isis-animations.wpk"))
.AddComponent(new SkinnedModelRenderer())
.AddComponent(new PlayerBehavior());

Build, run and use arrow keys left and right:

Animate the model

Now it is time to use different animations contained in isis-animations file. We will need to create an array with strings animation names, an index to iterate them and a ButtonState variable to play an animation every time we press and release the space keyboard key. So add this code at the beginning of the PlayerBehavior class:

csharp code:
string[] animations = { "Jog", "Walk", "Idle", };

int animationIndex;

ButtonState lastSpaceState;

As we previously did with Transform3D component, PlayerBehavior requires an Animation3D component so add this before parameter less constructor:

csharp code:

public Animation3D animation;

Do not forget the using to WaveEngine.Components.Animation namespace.

Add this code at the end of Update() method in PlayerBehavior class:

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

lastSpaceState = state.Space;

With this code we are apply an animation every time we press and release the space keyboard key, update the TextBlock component Text property with the current animation name, playing the animation in looped mode, and updating the index of current animation played.

Note: TextBlock class is in WaveEngine.Components.UI namespace, so do not forget to add a using for it.

If we build, run, and use arrow and space keyboard keys we will see something similar to this:

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.