Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


5. May 2016

 

Introduction

Welcome to the first part of a multipart tutorial series on creating games using the Haxe programming language with the Heaps graphics engine.  Heaps is under development by Nicolas Cannasse, the guy that created the Haxe language in the first place.  In his own words:

Heaps is a cross platform graphics engine designed for high performance games. It's designed to leverage modern GPUs that are commonly available on both desktop and mobile devices. The framework currently supports HTML5 WebGL, Flash Stage3D, native Mobile (iOS and Android) and Desktop with OpenGL. 

Heaps is a very cool library, but not an incredibly well documented one.  So that’s where this tutorial series comes in.  We are going to look at creating 2D then 3D graphics using the Heaps engine.  For this series I will be doing both text and video versions of each tutorial.  The video version of this tutorial is available here.

 

Setting Up Your Haxe Development Environment

This tutorial is going to assume you are using Windows, if you are on another operating system, the steps are going to vary slightly.

First head to Haxe.org/download and download the appropriate Haxe installer for the most reason version.

image 

In my case I am going with the Windows Installer.  Run the executable and say yes to any security messages you receive.  You want to install everything like so:

image

 

Install where ever you like:

image

 

Verify your install worked correctly.  Fire up a command prompt and type haxelib version:

image

 

That was easy, eh?  Next you will probably want an IDE or Editor.  Personally I am using Haxe Develop, a special port of Flash Develop.  This is a Windows only IDE though.  Another option is Visual Studio Code with the Haxe language extensions.

 

Finally we need to install the Heaps library.  It’s not registered with Haxelib yet, so we currently have to install it from Github.  Run the command:

 

haxelib git heaps https://github.com/ncannasse/heaps.git

image

 

And done.

 

Creating a Hello World application

Now let’s create our first application to make sure everything is up and running correctly.  A simple hello world app.

Assuming you are using HaxeDevelop, go ahead and create a new project via Project->New Project

image

 

I created a JavaScript project like:

image

 

Inside our project folder, we need to create a folder for our resources.  I simply created a directory called res.  Simply right click your project in the Project panel and select Add->New Folder...

image

 

Next we need a TTF file, I personally used this font.  Simply download that zip and copy the ttf file into the newly created res directory.  You can open an Explorer window to that directory by right clicking it and selecting Explore.  I personally renamed it to not be all caps, it should work either way though.  If you are using HaxeDevelop, your project should look something like this:

image

 

We have two final bits of configuration.  First we need to text HaxeDevelop that we use the Heaps library, and that the resource folder is named Res.  Right click your project and select Properties

image

 

Next select the Compiler Options tab.  First add an entry to Compiler options with the value –D resourcePath=”res”.  Then add a value to Libraries of heaps.  That’s it, click Apply then Ok.

image

 

Finally some code!  First we need a WebGL canvas for our application to run in.  Simply open up index.html located in the Bin folder and add a canvas.  Your code should look something like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>JSTest</title>
	<meta name="description" content="" />
</head>
<body>
	<canvas id="webgl" style="width:100%;height:100%"></canvas>
	<script src="JSTest.js"></script>
</body>
</html>

 

Now we need to edit our main Haxe code.  By default it will be called Main.hx and it’s the entry point (and entirety) of our program.  Enter the following code:

import h2d.Text;
import hxd.Res;
import hxd.res.Font;
import js.Lib;

class Main extends hxd.App {
        var text : Text;

		// Called on creation
        override function init() {
			// Initialize all loaders for embeded resources
			Res.initEmbed();
			// Create an instance of wireframe.tff located in our res folder, then create a font2d of 128pt size
			var font = Res.wireframe.build(128);
			// Create a new text object using the newly created font, parented to the 2d scene
            text = new Text(font, s2d);
			// Assign the text
			text.text = "Hello World";
			// Make it read, using hex code ( RR GG BB, each two hex characters represent an RGB value from 0 - 255 )
			text.textColor = 0xFF0000;
        }

		// Called each frame
        override function update(dt:Float) {
			// simply scale our text object up until it's 3x normal size, repeat forever
			var scaleAmount = 0.01;
			if (text.scaleX < 3.0) text.setScale(text.scaleX + scaleAmount);
			else text.setScale(1);
			
        }

        static function main() {
            new Main();
        }
    }

Now go ahead and run your code by either hitting F5 or click this button image

You should see:

GIF

 

Congratulations, your first Haxe programming using the Heaps library.  Next up, we will jump into 2D graphics with Heaps.

 

Video

Programming , ,

blog comments powered by Disqus

Month List

Popular Comments

SideFX Release Houdini 15.5
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


22. May 2016

 

SideFX have released Houdini 15.5.  Houdini is a 3D application with a focus on procedural generation.  This release brings several new features, including:

 

Modeling

  • New PolyBevel SOP

  • New PolySplit SOP

  • New Dissolve SOP

  • TopoBuild tool (phase II)

  • Variable width offsets in PolyExpand2D

  • Double-click for edge loop selection

  • Double-click for point and primitive island selection

Crowds

  • Advanced locomotion controls

  • Direct FBX Imports for agents

  • Vertex normal support for deforming crowd agents

  • New Agent CHOP

  • New Terrain Adaptation SOP

  • Improved crowd steering behaviour

  • Accurate foot planting

  • Mocap Biped 3 with library of motion clips

UVs

  • Triplanar UV projection VOP

  • Curvature support for UV Bake

  • Tighter UV island packing in layout

Lighting and Rendering

  • Third Party Rendering Support in Houdini Indie - Today: RenderMan, Arnold, and Octane - Coming: Redshift, V-Ray and Maxwell

  • New VR Camera built using new VR lens shader

  • DOF and Motion Blur in OpenGL ROP

  • Overscan rendering support and crop window fixes

  • OpenGL displacement mapping in viewport

  • "Render to Disk in Background" button on SOHO ROPs

  • Photon tracing control in Mantra

User Experience

  • Better Euler tumbling in viewport

  • 3D handle enhancements

  • File chooser enhancements

  • Improved geometry snapping

  • Multi row/column pasting in Parameter Spreadsheet

  • Help system enhancements

Character

  • "Delta Mush" deformation support

  • Multi overlapping selection in Dopesheet

  • Hair and fur grooming enhancements

Performance

  • Faster VEX function loading and more efficient memory use

  • Faster saving of large geometry

  • HQueue performance optimizations

Volumes

  • OpenVDB 3.1

Interoperability

  • Many Alembic enhancements

 

You can see a summary of the new features in the video below.

GameDev News

blog comments powered by Disqus

Month List

Popular Comments