TexturePacker support?

[alamboley]

Hey, why doesn't Flambe support a TexturePacker format?

I know there is Flump (which is great for animations btw), but its workflow is complicated for images:

• need Flash Pro.
• need to change images into Sprite. Ok with some JSFL we can do that easily/quickly.

Also it seems that Flump doesn't provide trim support.

Would love to see a TexturePacker compatibility! And for an extra add TP's animations support ;)

[markknol]

This is not an answer, but are you aware of https://aduros.com/flambe/api/flambe/swf/Library.html#fromFlipbooks ? That should simplify working with flipbook animations.

edit: I think you want to use TexturePacker for non-animating images, right?

[alamboley]

I wasn't at all, thanks Mark! I suppose that it just use a png (without an xml/json), but I'm not sure about the spriteSheet thing.

Unfortunately (in the second case) here we've different files. We don't benefit of having a TextureAtlas with trim, rotation, PoT...

[markknol]

Ah now I understand you want to use TexturePacker for non-animation but multiple sprites in one image, right? Then it could be a good idea. Is there an example output of how a typical TexturePacker file looks?

@aduros its it possible to draw a rotated (Sub)Texture without setting Sprite.rotation?

[alamboley]

Yes, right. Doing both would be cool too!

Well there are lots of Data Format: Starling/Sparrow, Cocos2D, Unity, LibGDX, EaselJS... pure JSON Array/Hash.

For exemple the Starling format with rotation, trim, auto alias:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with TexturePacker http://www.codeandweb.com/texturepacker-->
<!-- $TexturePacker:SmartUpdate:6791974a09f53a148c3078d18a5aeed1:61900041923df01526c1169c052edc88:8d7009bfb86f93ee70620e49231b7302$ -->
<TextureAtlas imagePath="corps.png">
    <SubTexture name="corps0001" x="674" y="2" width="1" height="1" frameX="0" frameY="0" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0002" x="946" y="1740" width="204" height="90" frameX="-42" frameY="-235" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0003" x="1886" y="650" rotated="true" width="100" height="208" frameX="-41" frameY="-232" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0004" x="990" y="1832" rotated="true" width="92" height="212" frameX="-38" frameY="-232" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0005" x="1592" y="1536" rotated="true" width="86" height="200" frameX="-50" frameY="-240" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0006" x="1504" y="1536" rotated="true" width="86" height="200" frameX="-47" frameY="-239" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0007" x="1292" y="1830" rotated="true" width="92" height="210" frameX="-44" frameY="-233" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0008" x="550" y="208" rotated="true" width="112" height="208" frameX="-39" frameY="-234" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0009" x="1152" y="1740" width="204" height="88" frameX="-50" frameY="-236" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0010" x="1304" y="1338" rotated="true" width="88" height="196" frameX="-55" frameY="-234" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0011" x="738" y="1740" width="206" height="90" frameX="-42" frameY="-232" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0012" x="1308" y="1536" rotated="true" width="100" height="202" frameX="-47" frameY="-235" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0013" x="1118" y="1338" rotated="true" width="90" height="198" frameX="-49" frameY="-240" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0014" x="1152" y="1740" width="204" height="88" frameX="-50" frameY="-236" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0015" x="526" y="418" rotated="true" width="104" height="214" frameX="-45" frameY="-237" frameWidth="300" frameHeight="400"/>
    <SubTexture name="corps0016" x="1348" y="1162" rotated="true" width="96" height="164" frameX="-71" frameY="-235" frameWidth="300" frameHeight="400"/>
</TextureAtlas>

[volkipp]

I think this would be pretty easy. I had to do something very similar to support Spine atlases which allow for rotation. https://github.com/volkipp/spinehx/blob/master/src/spinehx/platform/flambe/renderers/RegionSprite.hx

[aduros]

It should be especially easy now with Texture.subTexture(). Rotation could be tricky, but if you create a custom Sprite subclass that calls graphics.rotate() in draw(), it should work? Setting the rotation property on the sprite itself seems problematic if you can't guarantee it won't be overwritten.

[alamboley]

At the moment we could remove this rotation feature. Starling takes two years to include it ;)

[markknol]

I started to create a very basic support that already seems to work, even with rotated sprites (not applied on Sprite, but on Graphics like Aduros suggested). I don't know why it took two years for Starling, took me an hour. It does not have trimming support, because I don't know what it does/means (I see that it adds some extra data if enabled, I skip that atm)

Check the Main.hx to see how to use it. https://gist.github.com/markknol/88893e41f3bb0200452f

I used the free-version of TexturePacker, and used the "generic XML" as data format (why do they have so much export-formats?? Would it be "cooler" to define our own format for this?).

[alamboley]

Sounds good!

Trim removes transparent pixels from a sprite's border. Basically it adds some "offset" informations.

Yes, all those data formats are crazy. The advantage of having its own format is offering preset options: rotation, trim... and doesn't depend of Starling evolution etc. But a data format couldn't evoluate a lot.

[markknol]

So "generic XML" is a safe choice then, right? What do I need to do with the offset information to support that trimming? Add it to the texture source x / y?

[alamboley]

I think it would be ok.

Yes, here are the same png with no trimming and then trimming:

<sprite n="corps0002.png" x="706" y="404" w="300" h="400"/>
<sprite n="corps0002.png" x="638" y="2" w="204" h="90" oX="42" oY="235" oW="300" oH="400"/>

AFAIU: oW && oH the width & height (including transparent pixel). I'm not sure for the w, h, oX, oY. It should become obvious with a simple test.

[markknol]

I've updated the gist. https://gist.github.com/markknol/88893e41f3bb0200452f

Now also supports: :new:

• multipacked spritesheets
• trimming

I think its pretty much complete now.

I found out for some features you need the PRO version. If you don't have that, red sprites appear at random spots :-1:

[alamboley]

That's awesome Mark!

[markknol]

Please test it if you want, then I can make a solid pullrequest.

[alamboley]

Hey Mark, done!

No trim and trim works fine, but the rotation only work if the trim isn't selected!

The latest feature would be to be able to have some animations with texture having the same base name (but numbers changing). For example: library.createMovie("heads"); and it would loop with all my heads0001, heads0002... ;)

A link to the zip: http://davikingcode.com/works/TestTexturePacker.zip