Initial Commit

Overview

This tutorial will demonstrate a simple 3D pipeline using Blender and Heaps. This tutorial will not be an exhaustive introduction to Blender or Heaps. Instead this will focus on the pipeline to build game assets.

I should note I’m new to game development and very new to Blender. This might not be the best or most optimized approach to creating game models in Blender but this was the first time I’ve been successful and thought it was worth documenting the process.

In this first part of the tutorial we will install the needed software and create an empty Heaps project. I’ll keep this section brief since this information can be found on other sites.

Note: I’m currenlty using a Mac so the commands will need to be translated to the Linux or Window equivalent commands.

Software

Blender

At the time this article is published the current version of Blender is 2.93.1. The software can be installed from the Blender website here: https://www.blender.org/download/releases/2-93/

Heaps.io

The installation instructions for Heaps can be found here: https://heaps.io/documentation/installation.html

Visual Studio Code

As called out in the Heaps install documentation I’m using Visual Studio Code with the Haxe Extensions. https://code.visualstudio.com

Chrome

For these tutorials I plan on using Chrome for development. You can use Firefox or compile to a Haxe binary if that is your preference. https://www.google.com/chrome/

Git

This is optional but I would recommend installing Git for any project. https://git-scm.com

Initial Commit

After Blender and Heaps are installed we can create a simple hello world project. The source code for this project can be found here: https://gitlab.com/gillman/heaps-model-animation-tutorial/-/tags/v1

This is based on the documentation here: https://heaps.io/documentation/hello-world.html

First we will create a directory. We will call this project cube since we will be creating a textured and animated cube.

mkdir cube

Next open the directory in Visual Studio Code and create a new file in the root directory named compile.hxml. Add the following code to this file.

-cp src
-lib heaps
-js hello.js
-main Main
-debug

compile.hxml This file will be used generate the output files.

After that we can create an src directory that will hold our Main.hx class. This contains the code to load the game. It should contain the following:

class Main extends hxd.App {
    override function init() {
        var tf = new h2d.Text(hxd.res.DefaultFont.get(), s2d);
        tf.text = "Hello World !";
    }
    static function main() {
        new Main();
    }
}

We can now compile the code using the following command:

haxe compile.hxml

This should generate a client.js and client.js.map file in the bin directory. Main.hx

To execute this javascript file we can create an index.html file that contains the following:

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Cube</title>
    <style>
        body { margin:0;padding:0;background-color:black; }
        canvas#webgl { width:100%;height:100%; } 
    </style>
</head>
<body>
    <canvas id="webgl"></canvas>
    <script type="text/javascript" src="bin/client.js"></script>
</body>
</html>

index.html You could open this in your browser of choice or you can create a VS Code Launch file by creating a .vscode directory and the following launch.json file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Build",
            "url": "file://${workspaceFolder}/index.html",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": {
                "type" : "haxe",
                "args" : "active configuration"
            }
        }
    ]
}

Launch.json This will build the code and start the browser. After executing you should see the following: Game Screen

Finally, since I will be storing this in git I will create a .gitignore file:

# Heaps.io
bin
# Mac
.DS_Store

gitignore

Wrap Up

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

Next time we will create a model in blender, texture that model and load that model into our application.