Everyone Is A Picasso

Overview

In this second part of the tutorial we will create a simple model in Blender, texture it, export it and import it into our project. Lets get started.

Legend

I’m using this 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.

Model Me This

As mentioned in the previous tutorial we will be creating a simple cube. Again, we aren’t looking for complex models, we are focusing more on the process itself.

First lets open Blender, which will have created a cube for us using the default starting template.

Default Blender

Select the camera and light on the right hand side. First click on the Light, then hold CMD while clicking the Camera. Then hit X to delete. You don’t need these items for games.

Remove Camera and Light

Next we will move the cube up since it is sitting in the middle of the Z plane. With your cursor over the cube hit A to select all, G to grab, Z to constrain to the Z axis, 1 to move up 1 unit and Enter to confirm. Then we need to zero the transforms so select the Object->Apply->All Transforms menu item.

Move Cube

This is a good time to save. I usually create a design directory to save all of my design files. To save the file click the File->Save menu item in the upper left corner.

First Save

Blue Paint

As usual, there is a couple of ways to do this. I think the simplest is to use the Shading tab since this is a simple model.

Shading Tab

Switch to the Shading tab. In the node panel at the bottom, click Add->Search and search for “Image Texture”.

Add Image Texture Node

Clink in the node panel to drop the new node.

Drop Node

Now click “New” in the Image Texture node. Give the image a Name like “CubeTexture”, for now we can use a small Width and Height, say 16 by 16.

Most game engines like textures that are powers of two. So 256, 512, 1024, … The larger the texture the better resolution but the images also take up more memory. Since we will be using a single color we can use a small image. If you were going to create a texture for a more complex and detailed model you would probably want to use a larger texture size like 1024, 2048 or higher.

Create Image

Finally, set the Color to your color of choice, I’m using “#0abde3”, and click Ok.

I should note we could have saved the last few steps and just created this image in Gimp or another image editing tool. We didn’t need to do this in Blender.

Now we need to apply our texture to our model. Conect the “Color” output of the Image Texture node to the “Base Color” input of the Principled BSDF.

Shaded Model

We are now ready to export and this is another good time to save.

Export This

We will now export the model from Blender so we can import it into Heaps. There is a section on 3D models for Heaps here that we will be following: https://heaps.io/documentation/fbx-models.html

We will be using the Blender FBX exporter and we will save the fbx file in a new res directory. Heaps will automatically convert this file into usable format for importing.

So click on File->Export-FBX. Then set the Path Mode to “Copy” and make sure the “Embed Textures” button to the right of the Path Mode is enabled. Under the Transform section set the Scale to “0.10”, Apply Scalings to “FBX Units”, Forward to “-Y Forward”, Up to “Z Up”. Finally, set the File Name to “cube.fbx” and then click the “Export FBX” button.

Export Model

Load It Up

Now we will load the model into Heaps. Update the Main.hx file to look like this:

Note: If you used a different file name when exporting the FBX file you will need to update the Main.hx file below to use your choosen file name.

class Main extends hxd.App {
    override function init() {
        s3d.lightSystem.ambientLight.set(0.74, 0.74, 0.74);

        var cache = new h3d.prim.ModelCache();
        cache.loadLibrary(hxd.Res.cube);

        var model = cache.loadModel(hxd.Res.cube);
        s3d.addChild(model);

        cache.dispose();
    }

    static function main() {
        hxd.Res.initEmbed();

        new Main();
    }
}

This initializes the embedded file system, creates an ambient light, loads the cube model into the cache, loads the model in the scene and disposes of the cache once we are done loading.

Finally, copy the “CubeTexture.png” from the design folder to the res folder since we will need it when we load the model. Otherwise we will see the following error:

Uncaught haxe_ValueException
arg0: haxe_ValueException {message: 'Resource file not found 'cube.fbm/CubeTexture.png'', __previousException: undefined, __nativeException: haxe_ValueException, value: hxd_fs_NotFound}

The project directory should look like this when you are done: Main.hx

When you run the program you should see the following:

Initial Run

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/v2

In the final tutorial we will animate the cube so it will jump, load the animations and add interactions so it jumps on command.