SpriteSheet atlas for OpenFl

#1

Hi,

was checking how to migrate my starling + feather app to openfl version of a feather. One point that I need to convert is texture atlas support for feather element skins.

I checked for some existing libs but got a bit lost as they were using different APIs like Tileset. So I come up with my own trivial implementation (exported from TexturePacker with standard json template)

private function getSprite(source:BitmapData, x:Float, y:Float, width:Float, height:Float, scale:Float):BitmapData {
	var img = new BitmapData(Math.round(width / scale), Math.round(height / scale));
	var matrix = new Matrix();
	matrix.scale(1 / scale, 1 / scale);
	img.draw(source, matrix, null, null, new Rectangle(x, y, width, height), true);
	return img;
}

Basically, I create BitmapData out of passed texture atlas (I pass x, y, width, height of sprite from json) also I pass scale to scale High-density atlases down to neede size (1x, 2x, 3x).

Was testing in Html target and was working partly, sometimes got my sprite cut of (corners e.c), or there was white padding on it.

Is this the way to do or there are more performant ways to implement TexturePacker spritesheet for openfl ? (need for iOS, Android and html targets). Feather UI is still in development but judging from comments in code it will use Bitmap for skin texture so would suppose it will require BitmapData.

Thank you

1 Like
#2

Tileset is BitmapData + rectangles

var tileset = new Tileset(bitmapData);
var id = tileset.addRect(new Rectangle(x, y, width, height));

…every time you add a rectangle it is assigned a rectangle ID. You can usually use the Tileset + the ID of the rectangle you want with code that’s designed for the API

1 Like
#3

This is something I’ve been wondering about for a while so I appreciate the question and the official clarifying response.

The way Starling’s AssetManager handles spritesheets is brilliant, with the whole process being handled. I’ve been wondering of a way to implement a similar thing in OpenFL leveraging it’s Asset system. Something on my list of things to look into.

#4

@singmajesty thank you for answer, but I saw this comment in feather ui code

button.backgroundSkin = new Bitmap(myButtonSprite);

is it possible to get cut out sprite part from spritesheet to add to component ? :slight_smile:

#5

Ok, while I agree that tileset is better for this, that problem you are having is probably the “color fill” flag on the bitmapdata constructor. (api reference)

new BitmapData (width:Int, height:Int, transparent:Bool = true, fillColor:UInt = 0xFFFFFFFF)

See all those Fs? You want them to be Zeros. Try this:

var img = new BitmapData(Math.round(width / scale), Math.round(height / scale), true, 0x0);

#6

I had suspected that having spritesheet parsing code in OpenFL would perhaps be excessive (as spritesheets can vary based on what tool is being used) however I am open to feedback (or contribution) on built-in Tileset.from... methods.

I don’t think we could type this automatically since bitmaps + XML are two separate asset types. I think it would be wrong to somehow blend these together without the user having a choice?

#7

How do you use tile ID and tileset to get bitmapData?

#8

Tileset wraps BitmapData and allows you to create rectangles, each of which are assigned an ID in numeric order.

If you have a Tileset you can check the tileset.bitmapData to get a reference to the parent BitmapData instance, and if you want to cut and create a new BitmapData you can use your rectangle and the bitmapData.copyPixels or bitmapData.draw or other API to do so