Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
27. May 2016

 

Welcome back to our ongoing tutorial series on using the Heaps framework with the Haxe programming language.  In the first tutorial we covered the configuration and programming a simple game using Heaps.  Then we covered the basics of 2D graphics in the next tutorial.  In this tutorial we are going to look at using 2D animation in Heaps.  We are going to cover three specific ways, first using a sequence of images for each individual frame of animation, second using a single simple spritesheet image and finally we are going to look at using a texture atlas.  All of the images used in this tutorial are available here, while the project files, source, images etc. are all available to Patreon backers.

 

As always there is a HD video version of this tutorial available here and embedded below.

 

First copy the animation frames into the resource folder.  Each is named along the lines of walk01, walk02, walk03, etc like so:

image

 

Now let’s jump into the code.  The process is almost identical to the sprite handling process from the previous tutorial:

import h2d.Anim;
import h2d.Bitmap;
import h2d.Sprite;
import h2d.Text;
import h2d.Tile;
import hxd.Res;
import hxd.res.Font;

import js.Lib;

import hxd.App;
class Main extends App {
	
	
	var animation:Anim;
	
	override function init() {
		Res.initEmbed();
		var tiles = new Array<Tile>();
		
		tiles.push(Res.walk01.toTile());
		tiles.push(Res.walk02.toTile());
		tiles.push(Res.walk03.toTile());
		tiles.push(Res.walk04.toTile());
		tiles.push(Res.walk05.toTile());
		tiles.push(Res.walk06.toTile());
		tiles.push(Res.walk07.toTile());
		tiles.push(Res.walk08.toTile());
		tiles.push(Res.walk09.toTile());
		tiles.push(Res.walk10.toTile());
		tiles.push(Res.walk11.toTile());
		tiles.push(Res.walk12.toTile());
		tiles.push(Res.walk13.toTile());
		tiles.push(Res.walk14.toTile());
		tiles.push(Res.walk15.toTile());
		tiles.push(Res.walk16.toTile());
		
		animation = new Anim(tiles, 10, s2d);
	}
	
	override function update(dt:Float) {
	}
	
	static function main() {
		new Main();
	}
	
}

 

Here we populate an array of type Tile with all of the images.  Remember Heaps will automatically make available any resource type with an appropriate loader.  Finally we pass this array to the constructor of Anim.  Anim is a special kind of drawable that contains several tiles that represent individual frames of animation.  Also in the constructor we pass along the frame rate to play the animation at, as well as the parent to play the animation relative to, in this case the default scene, s2d.  When you run this code you should see:

GIF

Pretty simple eh?

 

It’s also quite common to want to group all of your sprites together in a single image.  The following example does exactly that using this evenly spaced spritesheet (click for full sized image).  Just be aware, this code requires the width and height of each tile to be the same size.

animation

 

Now the code:

	override function init() {
		Res.initEmbed();
		
		var tileSrc = Res.animation.toTile();
		var tiles = tileSrc.grid(512);
		
		animation = new Anim(tiles, 10, s2d);
		animation.speed = 5;
	}

 

This code has basically the exact same end result.  Basically we load the entire spritesheet into a single tile, then split it into a number of smaller tiles using the grid() method, passing in the dimension to cut by.  Hopefully in the future this function will be updated to take both a width and a height value, removing the square requirement.  As you can see from this example, you can modify the Anim object after the fact, changing the animation speed, it’s position, rotation, scale etc.

 

One final option is to use an Atlas.  An Atlas is basically another form of spritesheet, but instead of being fixed dimensions, it comes with a text description file that says where each frame of animation within the texture is.  This allows you to more tightly store your images in a single image.  In terms of creating an atlas file, two options are LibGDX’s TexturePacker or CodeAndWeb’s TexturePacker.  Of course you could create the file by hand if you preferred.  Now some more code:

	override function init() {
		Res.initEmbed();

		var frame = Res.animationAtlasv1.get("walk01");
		
		var bmp = new Bitmap(frame, s2d);
		bmp.x = 400;
	}

 

As you can see, there is also a loader for Atlas files, so it’s simply a matter of accessing it via the Res interface.  In this particular example we are retrieving a single frame of animation that we use to populate a Bitmap and display on screen.  The Atlas loader also has the option of return an Anim object if preferred.

 

The Video

Programming

17. May 2016

 

In our previous tutorial looking at the Heaps game framework, we looked at creating an initial application.  As part of that tutorial we used s2d to draw some text on the screen.  Today we are going to look a bit closer at using 2D graphics with Heaps.  Let’s start straight off with a simple example:

import h2d.Bitmap;
import h2d.Sprite;
import h2d.Text;
import h2d.Tile;
import hxd.Res;
import hxd.res.Font;

import js.Lib;

import hxd.App;
class Main extends App {
	
	override function init() {
		
		// Example one, create a new Bitmap using a Tile
		Res.initEmbed();
		var logo = Res.logo.toTile();
		var bitmap = new Bitmap(logo, s2d);
		
	}
	
	override function update(dt:Float) {
	}
	
	static function main() {
		new Main();
	}
	
}

 

When we run this example:

image

For this example to work you need to copy an jpg, gif or png file named logo to the resource directory.  Don’t forget you need to tell Haxe where this directory is using the –D resourceDir flag (see previous tutorial for more information ).  In this example we convert the resource to a Tile object, which you can think of as a rectangular region within an image (even if it encompasses the entire image).  Finally we used this tile to create a Bitmap object, which is brings together the thing to draw ( the Tile ) and where to draw it (the Sprite). More on these later.  As before to display it on screen the bitmap is parented to the s2d object, which is a Scene object that is created for us automatically.


Let’s look at another quick source example, the performs a very similar task:

import h2d.Bitmap;
import h2d.Sprite;
import h2d.Text;
import h2d.Tile;
import hxd.Res;
import hxd.res.Font;

import js.Lib;

import hxd.App;
class Main extends App {
	
	override function init() {
		
		// Example two, create a bitmap manually using BitmapData 
		and draw it to screen.
		Res.initEmbed();
		var logoBitmapData = Res.logo.toBitmap();
		var bitmap = Bitmap.create(logoBitmapData);
		s2d.addChild(bitmap);
		
		// Set the pivot point of our bitmap so it is positioned 
		relative to it's center
		bitmap.tile.dx = -Math.round(bitmap.tile.width / 2 );
		bitmap.tile.dy = -Math.round(bitmap.tile.height / 2);
		// Now center the bitmap to the screen
		bitmap.x = s2d.width / 2;
		bitmap.y = s2d.height / 2 ;
	}
	
	override function update(dt:Float) {
	}
	
	static function main() {
		new Main();
	}
	
}

 

And running this one...

image

 

Here we again create a Bitmap to be drawn on screen, but this time using a different process.  In the first example (which is that way you would do things 99% of the time) we loaded the resource as a Tile.  In this example we instead load it using the toBitmap() method.  This is VERY VERY VERY confusing, and is why I decided to show it as an example.  toBitmap() does NOT create a Bitmap object, instead it creates a BitmapData object.  This naming convention was quite poorly chosen in my opinion and leads to a great deal of confusion.  BitmapData can be thought of the raw bytes of information that go together to make all the various pixels in our bitmap.  BitmapData is stored in system memory and is extremely slow to work with.  That said, you can easily manipulate this information, so if for example you wanted to convert all of the individual pixels to grayscale, you could.

Another change here is we didn’t set the Bitmap’s parent (s2d) during construction.  Instead we manually add the newly created bitmap to our scene by calling addChild().  This function will take any Sprite derived class.  We will get back to that in a second, but it’s an important concept to understand.  This second example shows a couple other key concepts.  Notice how we set the position .x and .y?  Well these are simple pixel coordinates to represent where the image should be drawn relative to the origin of it’s parent (s2d in this case).  The origin by default is the top left corner.  In this example we set the pivot point (or origin) by specifying dx and dy.  These are delta values that tell you where drawing calls are made relative to.  In this case we will perform drawing calls on this object relative to it’s mid point.

 

That’s about all I want to cover at this point in time, but there are a few key Heaps classes we should understand before moving on.

 

Sprite

If you come from other game engines, this terminology is very confusing.  Almost universally a Sprite represents and image ( bitmap or texture in memory ) and the position to draw it at.  In heaps however, a Sprite is only about the position of the object. Sprite is the only type of object that can be added to Layer (and thus Scene) ‘s addChild() method call. 

 

Drawable

Drawable inherits from Sprite and is the parent class for things that can actually be drawn on screen.  Bitmap inherits from this class, but so to does Text which we used earlier, as does Anim and Graphics.

 

Scene

s2d is an instance of Scene which is ultimately the root of the 2D scene graph.  At it’s core, Scene is actually a Sprite itself ( via Layer ), but it also holds a special object called Stage and is capable of responding to a number of UI events, as we will see in an upcoming tutorial.

 

Tile

This is another one of those things can be a bit confusing.  A Tile is a rectangle within a texture or image, but ultimately represents a source rectangle that is going to be displayed.  For example, the tile of a bitmap could represent only a portion of the source image.  Consider the following change to our original source:

	override function init() {
		Res.initEmbed();
		var logo = Res.logo.toTile();
		var bitmap = new Bitmap(logo, s2d);
		bitmap.tile.setSize(Math.round(bitmap.tile.width / 2),	
		Math.round(bitmap.tile.height / 2));
	}

 

When this code is run we get:

image

 

The underlying image of our Bitmap is unchanged, but we are only using a quarter of it because we shrank the dimensions of the tile.  This Tile approach is handy when dealing with sprite sheets, where you have several different frames of animation in a single source texture.  We will see this process in a later tutorial.

Programming

12. May 2016

 

mínt is a renderer agnostic ui library for the Haxe language that is part of the snõwkit family of libraries.  Put more simply, it’s a Haxe based cross platform UI library.  As the headline above suggests, they just released Alpha 2.0.  The major feature of this release is the addition of a scaling factor, making high DPI monitor support easy to implement.  There is also the beginnings of a UI editor which you can try right here in your browser.

 

This release also included several minor changes including:

  • control added children_at_point for a sorted list
  • window fixed close handle being a label
  • textedit fixed/added alignment options
  • margins added fixed offset to the anchor layout
  • examples added an empty luxe testbed and an AutoCanvas helper
  • lib added focus model, allowing user/platform specified focus handling
  • textedit add/enable IME entry (+ in mint.render.luxe)
  • luxe added color options to most controls
  • slider josuigoa added invert flag
  • textedit added display_char for password type entry
  • lib fixed usage of luxe types in mint core code

 

More information about this release is available here while mint itself is available on Github.

GameDev News

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 , ,

9. March 2016

 

So I’ve decided that it’s time to do another series about Haxe development here on GameFromScratch.  I did a short five part tutorial series on using Haxe and NME a few years back before it was rebranded OpenFL, but haven’t really touched it much since.  Before jumping in to a Haxe game engine, I had to decide which game engine to jump into!  Part of my decision is going to be informed by a poll I’m currently running on Twitter.  Of course, it’s useful to take a current look at the Haxe game engine landscape.  I did a post entitled Choosing A Haxe/NME Game Engine three years ago, but simply put, a lot changes in 3 years!  So what follows is a quick roundup of the most popular Haxe based game engines and a quick blurb about each.  If I miss one, please be sure to let me know in comments below, on Twitter or via email!

Oh... and this is not a review in any sense of the word.  I have very little working experience with the majority of engines I am about to cover and have no informed opinion to share as a result!  They are also in no particular order unless you can consider “completely random” as a type of order!

 

Haxe Game Engines

 

 

Flash Engine Ports

 

HaxeFlixel

http://haxeflixel.com/

HaxeFlixel is an interesting story... it started life as a Haxe port of the popular Flash 2D game engine, Flixel.  Then, well, Flixel basically died and HaxeFlixel lived on.  In fact HaxeFlixel 4.0 was just released, while Flixel hasn’t been updated in years.  It is a complete 2D game engine for Haxe.

 

HaxePunk

http://haxepunk.com/

Wow, I could almost copy and paste the HaxeFlixel entry for HaxePunk.  It also started life as a Flash library port, and since lives on while it’s inspiration is no longer updated.  That said,FlashPunk is much less active than HaxeFlixel.

 

Haxeling(Starling Port)

https://github.com/Haxeling/haxe-starling

This one is more of a WIP than the prior two, and is a port of the popular Starling Flash library to the Haxe language.  There are limits right now such as the lack of an HTML5 target and a few missing features.  Starling is perhaps best known for being the framework Angry Birds was initially created in.

 

Away3D

https://github.com/away3d/away3d-core-openfl

A port of the Away3D 3D flash framework to the Haxe language.  One of the few 3D libraries that has model loading support out of the box (oddly...).  Obviously from the name, this is a 3D focused library.

 

Popular Haxe Frameworks

 

Kha

http://kha.tech/ || https://github.com/KTXSoftware/Kha

Kha is a low level framework whose design favors speed over other priorities.  It supports 2D and 3D but again is quite low level (so no model api for example).  Kha runs at the level similar to SFML, SDL or JGWL, with game engines built over top of it.  Such engines include:

KhaPunk || Cycles || Komponent2D || Kha2D

These engines work at a higher level of abstraction (further from the metal), making use of Kha to provide multimedia functionality.

 

NME

https://github.com/haxenme/nme

NME is the library that lead to OpenFL.  It is similar to Kha in that it provides low level cross platform implementation of the technical “stuff” that makes up a game, then more high level game engines are built on top of it.  Haxe became OpenFL, but it seems there was a community that want to see NME continue as it was, so NME seems to have some life as well.

 

OpenFL

http://www.openfl.org/

Starting life as an implementation of Flash API in a cross platform manner using the Haxe programming language.  Basically it allows Flash developers to seemlessly transition to Haxe development.  A number of engines are layered on top of OpenFL.  As mentioned above, OpenFL was originally NME, although they have no evolved in different directions.  OpenFL was used to make several commercial games such as Papers Please. HaxePunk, HaxeFlixel and Stencyl all are (or were) layered over top of OpenFL.

 

awe6

https://github.com/hypersurge/awe6

awe6 is awesome, but oddly never really seems to have taken off.  I’m glad to see that it’s still under development even if there isn’t much of a community around it.  awe6 is build around the idea of inversion of control (and dependency injection) and I really can’t do it justice in a single paragraph.  The lack of a community though makes this very much not an engine for people that aren’t able to solve problems on their own.  I did a closer look at awe6 years ago, and it should remain equally valid.

 

snowkit

http://snowkit.org/

This is one of the new kids on the block and a very cool looking collection of tools.  Snowkit is composed of flow – a build tool, snow – a low level media library, luxe – a game engine built on snow, mint – a UI library, linc – hxcpp bindings to several popular game libraries (SDL, OpenAL, etc) and hxsw a string/shader library.  The collection all together is snowkit and provides, with haxe, a complete framework for creating games.  It’s a cool concept, but it’s also much more complicated due to all the moving pieces.

edit—To clarify, snowkit is an umbrella term for all of the above mentioned technologies combined as well as the community around it.  The actual game engine is luxe, not snowkit.

 

lime

https://github.com/openfl/lime

Lime isn’t a game engine, it’s a cross platform media layer.  Basically OpenFL and other libraries/engines are built on top of lime.  It provides logic for windows, input, audio, rendering, networking, etc... in a cross platform manner.  Obviously it’s pretty low level.  Heck OpenFL is pretty low level and its over top of lime after all.

 

BabylonHx

http://babylonhx.gamestudiohx.com/

BabylonHx is a Haxe port of BabylonJS which I looked at in depth here.  I like BabylonJS, it’s a great Javascript game engine with a clean easy to understand design.  BabylonHx is an incomplete port of babylonjs...  how incomplete I do not know.

 

Cycles

http://cyclesgame.org/

This one I know very little about, but I am going to change that, because the concept sounds really cool.  Basically it integrates into Blender and uses Haxe (and under that Kha) as the programming language.  Basically you create your game world in Blender and code the logic in Haxe.  It’s similar I suppose to Blend4Web or BDX.  The choice of Cycles is probably a poor one though, as Cycles is the name of the modern renderer for Blender.  I am intrigued though... enough that I am going to download it now, so that’s the end of this list... ;)  EDIT- Doh... coming soon.  Boo

 

The Ones I Missed

And the following are my wall of shame, the engines I missed and various members in the community pointed out to me (thanks for that btw). 

 

Heaps

https://github.com/ncannasse/heaps

Heaps is a game engine by Nicolas Cannasse, who can basically be considered the father of the Haxe language, as well as CastleDB and other important Haxe projects.  Heaps was used to make Evoland 2.  It is a 2D and 3D game engine capable of targeting WebGL, Flash 3D, Mobile and Desktops using OpenGL.

 

Flambe

http://getflambe.com/

A 2D cross platform Haxe based game engine including tools for importing Flash animations, creating particle systems and glyphs.  Can target iOS, Android, Flash, HTML5 and desktop targets using Adobe’s AIR.  Open source and MIT licensed.

Did I miss any (that aren’t unsupported or extremely unstable)?  Which of these engines are you most interested in?

Programming

Month List

Popular Comments