Rendering a Tilesheet to a Sprite in Haxe/NME

One of the downsides to using the Tilesheet class in NME is that it can’t receive events.  Just as earlier on we created a sprite object to hold our bitmap when we wanted it to receive events, how exactly do you handle this when working with the Tilesheet class?  In the Haxe/NME Input tutorial, I got asked exactly this question:

 

I tired to wrap the animation of previous tutorial before into this one.

but since the animation is an tileSheet object it doesn’t want to be wrapped into a Sprite
it said

nme.display.Tilesheet should be flash.display.DisplayObject
for:
sprite.addChild(sprites); // sprite is my tileSheet and sprites is a sprite

any idea to solve the problem or it’s going to come in a next tutorial

 

Hmmm… good question…  short answer is, I didn’t know.  Slightly longer answer is, when you call drawTiles, you can specify where to draw.  In the earlier example we simply drew to the stage.  So, we simply create a Sprite around an empty Bitmap add it to the scene and add the sprite to the scene.

Let’s look at some code:

package gfs;    import nme.Assets;  import nme.display.Bitmap;  import nme.display.DisplayObject;  import nme.display.Graphics;  import nme.display.SpreadMethod;  import nme.display.Sprite;  import nme.display.Tilesheet;  import nme.events.Event;  import nme.geom.Rectangle;  import nme.Lib;  import nme.ui.Keyboard;  import nme.events.KeyboardEvent;      class Main extends Sprite  {  	private var currentFrame: Int = 5;  	private  var sprites: Tilesheet;  	var sprite:nme.display.Sprite;  	  	public function new()  	{  		super();  		sprites = new Tilesheet(Assets.getBitmapData("img/mechwarrior.png"));  		var tileData = new Array<Float>();  		  		for (i in 0...11)  		{  			sprites.addTileRect(new Rectangle(0, i * 80, 90, 80));  		}  		  		sprite = new Sprite();  		var bmp = new Bitmap();  		bmp.width = 90;  		bmp.height = 80;    		sprite.addChild(new Bitmap());  		  		sprite.x = 0;  		sprite.y = 0;  		  		sprites.drawTiles(sprite.graphics, [0, 0, currentFrame,4],false,Tilesheet.TILE_SCALE);  		  		Lib.current.stage.focus = sprite;  		sprite.addEventListener(KeyboardEvent.KEY_DOWN, function(e) {  			graphics.clear();  			sprite.graphics.clear();  			if (e.keyCode == Keyboard.DOWN)  			{  				if (++currentFrame == 11) currentFrame = 0;  			}  			else if (e.keyCode == Keyboard.UP)  			{  				if (--currentFrame == 0) currentFrame = 10;  			}  			sprites.drawTiles(sprite.graphics, [0,0, currentFrame,4], false, Tilesheet.TILE_SCALE);  		});  		Lib.current.stage.addChild(sprite);  	}  }  

 

You can run this application by clicking here. Press up and down to animate.

 

And there you go.  If you are working with a sprite animation populated by a Tilesheet that you want to receive events directly, this is one option.  A couple of things though…  handling keyboard events in this case works really really really poorly… it only works in Flash…  generally you will want to handle keyboard events at the stage level.  This code was more a proof of concept than anything else.  Simply put, it’s probably a really stupid way to do this.


Scroll to Top