Blitting tileset on each frame manually without Sprites


#1

I’m porting a game from JS/HTML5 canvas to Haxe to be able to add Android and iOS targets. My game only has sprites and text, and I draw them in a main loop, unlike OpenFL’s concept of Sprite that persists through multiple frames.

Lime has everything I’d ever want, except a unified render method. OpenFL has this, but there doesn’t really seem to be a way to do the following psuedocode.

onRender(ctx) {
	ctx.save()
	ctx.transform(x, y)
	ctx.draw(image, 0, 0, sizeX, sizeY)
	ctx.restore()
}

However, I’ve gotten pretty close, but it feels like an unusual way of doing it.

private function onEnterFrame(event: Event) {
	graphics.clear();
	var m = new Matrix();
	m.translate(-Math.random() * 100, -Math.random() * 100);
	graphics.beginBitmapFill(tileset, m, true, false);
	graphics.drawRect(0, 0, 100, 100);
	graphics.endFill();
}

Is there a proper way to render my preferred method of “immediate mode sprites” rather than persisting sprites with OpenFL? Is there a library built on lime that basically just adds a unified rendering API, avoiding manual OpenGL/WebGL code? Thanks!


#2

Perhaps the drawQuads API would be a good match:

private function onEnterFrame (event:Event):Void {
    
    graphics.clear ();
    graphics.beginBitmapFill (bitmapData);
    graphics.drawQuads (new Vector<Float> ([ 0, 0, sizeX, sizeY ]), null, new Vector<Float> ([ x, y ]));
    
}

The first parameter takes a Vector<Float> with [ x, y, width, height, ... ] values for source rectangles to be drawn. This can be any number of rectangles, though it will perform better if you keep the same vector around each frame, and don’t recreate it.

The second (optional) parameter allows you to use indices for which rectangle you want to draw. If you use the Tileset object (for example) it has a rectData property you could pass to the first argument, then you could use the second argument to do a Vector<Int> list of indices to draw.

The third takes the transform data, which is [ tx, ty, ... ], [ a, b, c, d, ... ] or [ a, b, c, d, tx, ty, ... ], depending on the number of values you use. There’s also a way to use this API with a custom shader, which allows the use of additional attributes on hardware rendering

Here’s one of our samples, which uses it: