Using bitmap resources to create a webgame in haxe 2.0

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Using bitmap resources to create a webgame in haxe 2.0

Jon...
Hi folks,
Firstly I'm a noob round here - so first off, a big up to all the guys (and gals?) on the haxe (and other related projects) team.  Your doing a fantastic job opening up flash development to the "non-arty" types like me 8-)

Secondly - I came across Haxe 2.0 when stumbling round the net looking for resources on how to port my PC casual games to flash (I'm a programmer by trade so know my way around a class and code - no worries there) - not sure if it's relevant at this point but I'm targeting the Flash 9 player and I want to generate ActionScript 3 code.

Obviously for my web game I wanted to be able to use the same bitmaps (all stored in PNG format), I've managed to work out (I think) using SWFMill and an XML file to generate an assets.swf file

!assets.xml
<?xml version="1.0" encoding="iso-8859-1" ?>
<movie version="9">
    <background color="#ffffff"/> 
    <frame>   
        <library>     
            <bitmap id="EasyPipes" name="EasyPipes" import="epipe0.png" />   
        </library> 
    </frame>
</movie>


"epipe0.png" is a 1040x65 pixel 32bit PNG - I have a series of 16 65x65 sub images laid out on a single row.

I compile this fine with "swfmill simple assets.xml assets.swf" and all seems ok.

Next up is my main bit of Actionscript / Haxe code...

!Main.hx
package ;

import flash.Lib;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;

class EasyPipes extends BitmapData { public function new() { super(0, 0); }}

class Main extends Sprite
{   
    static function main()   
    {       
        var bitmapData = new EasyPipes();       
        var single = new BitmapData(65,65);

        var srect = new flash.geom.Rectangle(65,0,65,65);
        var dpoint = new flash.geom.Point(0,0);

        single.copyPixels(bitmapData,srect,dpoint);
       
        var pipe = new flash.display.Bitmap(single,flash.display.PixelSnapping.AUTO,true);
       
        pipe.x = 0; pipe.y = 0;
      
        flash.Lib.current.addChild( pipe );
    }
}

Effectively I want to "cut out" a single 65x65 bitmap from a location in my tpage and blit it to the screen.  Again this seems to work (albeit a little long winded IMHO) anyway I wanted to ask the haxe experts if this is the correct way to go about including and using bitmaps in a haxe web based game (my project has about 8 meg of bitmap resources in total), if it's not can someone kindly point me in the correct direction?

Thanks in advance for any advice you can give.

Jon...


--
haXe - an open source web programming language
http://haxe.org
Reply | Threaded
Open this post in threaded view
|

Re: Using bitmap resources to create a webgame in haxe 2.0

Pieter Witvoet
Hey Jon,

that looks more or less like how I've been doing things. I's a bit long-winded, yeah, but after I wrote a script that generated the xml file for swfmill and a hx file with a class definition for each image, things became a lot more workable. I then further encapsulated the creating of BitmapData objects and the copyPixel methods into an easily usable rendering class.

I do think that 8 MB of art is quite a lot though. Perhaps you can shave off a bit with tools like PngOptimizer, even though I've found swfmill to do a pretty good job at compressing already. I'm not sure if it's possible to write a preloader with Haxe 2.0 (it wasn't possible last time I checked) so another solution would be to store the art on a server and load them whenever needed.

I hope that helps you somewhat. :)


--
Pieter Witvoet
http://createivity.wordpress.com

--
haXe - an open source web programming language
http://haxe.org