Kris Kross Will Make You Jump, Jump

Overview

In the third part of the tutorial we will animate our model in Blender, export it from Blender and import it into our project. Lets get started.

Legend

I’m using the following to identify different types of commands or actions.

Menus: Menu1->Menu2->Menu3 A series of menu clicks.

Keys: Key One or more keys to press.

Properties: Property Name A property of an object.

Value: “Value” The value to set a property too.

I Like To Move It Move It

As usual, there are a couple ways to do this. We are going to use an Armature, even though that is overkill for what we want to do, since that is typically what you would use for more complex models.

In Blender click on the Model tab, make sure you are in Object mode, then click Add->Armature to add an Armature and a new bone to the model. To view the bone click on the Armature on the right hand Scene View, click on Object Data Property tab in the property view, open the Viewport Display and click the In Front option.

Add Armature

Usually you will have more bones in your model but we are going to keep it simple for now.

Now we need to set the Armature as the parent of the mesh. So first select the cube, then press Cmd while clicking the Armature, then Cmd-P and select the “With Empty Groups” option. Then press Option-A to unselect everything.

Add Armature

Then select the Animation tab, select just the cube on the right hand side, switch to Edit Mode, Select the Object Data Properties section on the right, make sure the “Bone” vertex group is selected, then click Assign. This assigns the different vertices that make up the cube to the bone.

Assign Vertices

Your So Animated

Now we are ready to animate the cube. Switch to Pose mode, switch to the Action Editor and set the Frames to “24”.

Animation Prep

We will create three animations since in most cases you will have more than one animation. We will only use two in this tutorial. We will use all three in the last tutorial.

The first animation will be a simple idle animation. We will have the cube rotate slightly around the Z axis. Click the new Action Button, and change the name from Action to “Idle”. Then set the key frame to 1, click the bone, and with the mouse in the 3D Viewport hit I and select the “Rotation” option. You should see the following:

First Key Frame

Then move the keyframe too 6, rotate the Rotation Z cube axis to “10” and insert another keyframe by hitting I and select the “Rotation” option.

Second Key Frame

Advance the current key frame to the 12th frame, set Rotation Z to “0”, and insert another key frame.

Third Key Frame

Advance the current key frame to the 18th frame, set Rotation Z to “-10”, and insert another key frame.

Fourth Key Frame

Finally, advance to the 24th frame, set Rotation Z to “0”, and insert a key frame.

Fifth Key Frame

Now if you play the animation you should see the cube wiggle back and forth. Finally we need to push this animation onto the NLA list so click the Push Down button to add it to the NLA list.

Now we are ready for the second animation, the walk animation. We will have the cube rotate around the “Z” axis again but we will make the rotation more exaggerated so that it looks like it is walking. Repeat the process from above with the following changes:

  1. Set the animation name to “Walk”
  2. Set the 1st key frame Rotation Z property to “0”
  3. Set the 6th key frame Rotation Z property to “30”
  4. Set the 12th key frame Rotation Z property to “0”
  5. Set the 18th key frame Rotation Z property to “-30”
  6. Set the 24th key frame Rotation Z property to “0”

The third animation will be a jump animation. We will have the cube jump by changing the “Z” position of the cube. Repeat the process from above with the following changes:

  1. When inserting the key frames select “Location” instead of “Rotation”
  2. Set the animation name to “Jump”
  3. Set the 1st key frame Location Z property to “0”
  4. Set the 12th key frame Location Z property to “1”
  5. Set the 24th key frame Location Z property to “0”

Animation Clean-Up

Now switch to the NLA Screen and set their names to the animation names by double clicking on the name on the left hand side.

NLA List

Export the Animations

Now we are ready to export the animations. We will still be using the FBX exporter but there are a few other options we need to set:

  1. Make sure Path Mode is set to “Copy” and Embed Textures is selected.
  2. Provided you have removed the camera, lights and other objects from the scene you can leave the include section as is.
  3. In the Transform Section, set the Scale to “0.1”, set Apply Scaling to “FBX Units Scale”, set Forward to “-Y Forward”, set Up to “Z Up”.
  4. In the Bake Animation Section, Uncheck the “All Actions” and set Simplify to “0”.

Export Animation

Now export the model to the res directory and overwrite the simple model we created before.

Load the Animations In Heaps

Now we are ready to load the animations in Heaps. At the end our new main class will look like this:

import h3d.anim.Animation;
import h3d.scene.Object;
import hxd.Key;
class Main extends hxd.App {
    private var model:Object;
    private var walkAnimation:Animation;
    private var jumpAnimation:Animation;

    override function init() {
        s3d.lightSystem.ambientLight.set(0.74, 0.74, 0.74);
        var cache = new h3d.prim.ModelCache();
        cache.loadLibrary(hxd.Res.cube);
        model = cache.loadModel(hxd.Res.cube);
        walkAnimation = cache.loadAnimation(hxd.Res.cube, "Walk");
        jumpAnimation = cache.loadAnimation(hxd.Res.cube, "Jump");
        s3d.addChild(model);
        cache.dispose();
        new h3d.scene.CameraController(s3d).loadFromCamera();
    }

    override function update(dt:Float) {
        super.update(dt);
        if (Key.isPressed(Key.SPACE)) {
            model.playAnimation(jumpAnimation);
        } else if (Key.isPressed(Key.UP)) {
            model.playAnimation(walkAnimation);
        }
    }

    static function main() {
        hxd.Res.initEmbed();
        new Main();
    }
}

Lets go through the changes one by one. First we add two global variables to hold the animation information.

    private var walkAnimation:Animation;
    private var jumpAnimation:Animation;

Then we load the Walk and Jump animations from the FBX model.

	walkAnimation = cache.loadAnimation(hxd.Res.cube, "Walk");
    jumpAnimation = cache.loadAnimation(hxd.Res.cube, "Jump");

Finally we play one of the animations depending on the key that is pressed.

	override function update(dt:Float) {
        super.update(dt);
        if (Key.isPressed(Key.SPACE)) {
            model.playAnimation(jumpAnimation);
        } else if (Key.isPressed(Key.UP)) {
            model.playAnimation(walkAnimation);
        }
    }

Wrap Up

The code can be found here: Just a reminder that the code can be found here: https://gitlab.com/gillman/heaps-model-animation-tutorial/-/tags/v3

With that we have all of the steps necessary to animate and load models into Heaps. In the final installment I will be looking at refactoring some of the code and looking at how you could use this in combination with movement.