• HaXe Video Game Graphics

Getting Started with HaXe
HaXe is an opensource multiplatform(Windows, Mac OS X and Linux Wahoo!) language that allows you to write flash code without buying the expensive Adobe tools. HaXe has similarities to Actionscript. But HaXe is not Actionscript!! The tutorials require Flash to run.

Using HaXe we're going to resurrect an old SNES game, Gundam Wing: Endless Duel. Using ripped sprites from the rom I will demonstrate some video game coding practices in the following tutorials.
To contact me, I am mnorton AT wecare DOT net

Getting Started

We're going to start off with a simple example to give you a feel for HaXe. This simple example demonstrates how to load art into a HaXe application and display it using the Flash player. This is the art we're going to use for our getting started example.



Step 1. Create a project directory

C:\home\mnorton\scriptdev\HaXe>mkdir swf_example C:\home\mnorton\scriptdev\HaXe>

Step 2. Save the art file to swf_example directory

Right-click on the background art shown above on this page.



Select "Save Image As". Save the file, deathscythe_background.png to the swf_example directory we created in Step 1.

C:\home\mnorton\scriptdev\HaXe\swf_example>dir
Volume in drive C has no label.
Volume Serial Number is 8007-210B

Directory of C:\home\mnorton\scriptdev\HaXe\swf_example

08/19/2008 07:22 PM    < DIR >     .
08/19/2008 07:22 PM    < DIR >     ..
08/19/2008 07:22 PM          7,252 deathscythe_background.png
    1 File(s)                 7,252 bytes
    2 Dir(s)         38,867,542,016 bytes free

C:\home\mnorton\scriptdev\HaXe\swf_example>


Step 3. Create the swfmill xml source file


We're going to use the swfmill tool to load our background art into our HaXe code. The swfmill tool requires an xml file for input. Using an editor, create the following xml file.

<movie width="320" height="240" framerate="12" version="9">
  <frame>
    <library>
      <bitmap id="BackgroundBitmap"
          import="deathscythe_background.png" />
    </library>
  </frame>
</movie>

Save this file as png_lib.xml. We will build a Shockwave Flash (swf) file using the swfmill tool and the png_lib.xml file. Type in the following command for swfmill.

swfmill simple png_lib.xml png_lib.swf


The swfmill utility requires the png_lib.xml file for input and outputs the png_lib.swf file (which contians the png file).

Step 4. The HaXe source file

Copy and paste the source code below into your editor. Save the file as Main.hx. The naming convention is very important in HaXe. The file name needs to match the name of the HaXe class in the file.

// file: Main.hx
// http://www.employees.org/~mnorton/haxe/HaXe.html
import flash.display.Bitmap;

class BackgroundBitmap extends Bitmap {
   public function new() {
     super();
   }
}

class Main {

  function new() {
     var tile = new BackgroundBitmap();
     flash.Lib.current.addChild( tile );
   }

   static function main() {
     var v = new Main();
   }
}


Now we need to envoke the HaXe compiler to build our swf application. You can use the following command line syntax (all one line) at your system prompt.

haxe -swf png_swf_test.swf -swf-version 9 -swf-lib png_lib.swf -main Main


Another way you can compile HaXe application is to create a compile.hxml file, as follows.

-swf png_swf_test.swf
-swf-version 9
-swf-lib png_lib.swf
-main Main

Save this as file, compile.hxml. You can compile the HaXe application with the compile.hxml using the following compiler syntax.

haxe compile.hxml

Step 5. Run the Flash file

From both examples, the compiler flags are set for -swf png_swf_test.swf. This is the binary file you will run in your browser.



Send comments to: mnorton wecare net