Starling Forum

The Starling Framework Community

Register or log in - lost password?

Starling Forum » General Discussion

Dynamic Texture Atlas Generator - Starling extension

(89 posts) (23 voices)
  • Started 7 months ago by emibap
  • Latest reply from emibap

Tags:

  • Adobe MAX
  • Benchmarking
  • Big Texture
  • collision
  • collision detection
  • dynamic atlas
  • Dynamic Bitmap Fonts
  • Dynamic Texture Altas
  • Dynamic Texture Altas Generator
  • Dynamic Texture Atlas Generator
  • DynamicTextureAtlasGenerator
  • GridCanvas
  • hit zone
  • hype framework
  • MovieCLip
  • ND2D Comparison
  • performance
  • scaling
  • tutorial
  • UNLICENSE
123Next »
  1. emibap
    Member

    Hi boys and girls,

    This is my first contribution to the community: a class that can convert your vector assets to a TextureAtlas.
    Update!!!
    Now it can also register Bitmap Fonts
    Update 2!!!!
    CustomFontId and bounds detection improvements

    Check it out at github:
    https://github.com/emibap/Dynamic-Texture-Atlas-Generator

    Dynamic Texture Atlas and Bitmap Font Generator (Starling framework Extension)
    ========

    This tool will convert any MovieClip containing Other MovieClips, Sprites or Graphics into a starling Texture Atlas, all in runtime.
    It can also register bitmap Fonts from system or embedded regular fonts.
    By using it, you won't have to statically create your spritesheets or fonts. For instance, you can just take a regular MovieClip containing all the display objects you wish to put into your Altas, and convert everything from vectors to bitmap textures.
    Or you can select which font (specifying characters) you'd like to register as a Bitmap Font, using a string or passing a Regular TextField as a parameter.
    This extension could save you a lot of time specially if you'll be coding mobile apps with the [starling framework](http://www.starling-framework.org/).

    # version 1.0 #
    - Added the checkBounds parameter to scan the clip prior the rasterization in order to get the bounds of the entire MovieClip (prevent scaling in some cases). Thank you Aymeric Lamboley.
    - Added the fontCustomID parameter to the Bitmap font creation. Thank you Regan.

    ### Features ###

    * Dynamic creation of a Texture Atlas from a MovieClip (flash.display.MovieClip) container that could act as a sprite sheet, or from a Vector of Classes
    * Filters made to the objects are captured
    * Color transforms (tint, alpha) are optionally captured
    * Scales the objects (and also the filters) to a specified value
    * Automatically detects the objects bounds so you don't necessarily have to set the registration points to TOP LEFT
    * Registers Bitmap Fonts based on system or embedded fonts from strings or from good old Flash TextFields

    ### TODO List ###

    * Further code optimization
    * A better implementation of the Bitmap Font creation process
    * Documentation (?)

    ### Whish List ###
    * Optional division of the process into small intervals (for smooth performance of the app)
    * fromClassVector function. // DynamicAtlas.fromClassVector(Vector.<Class>([SymbolOne, SymbolTwo])); Thank you Thomas Haselwanter

    ### Usage ###
    You can use the following static methods (examples at the gitHub Repo):

    [Texture Atlas creation]
    - DynamicAtlas.fromMovieClipContainer(swf:flash.display.MovieClip, scaleFactor:Number = 1, margin:uint=0, preserveColor:Boolean = true):starling.textures.TextureAtlas
    - DynamicAtlas.fromClassVector(assets:Vector.<Class>, scaleFactor:Number = 1, margin:uint=0, preserveColor:Boolean = true):starling.textures.TextureAtlas

    [Bitmap Font registration]
    - DynamicAtlas.bitmapFontFromString(chars:String, fontFamily:String, fontSize:Number = 12, bold:Boolean = false, italic:Boolean = false, charMarginX:int=0):void
    - DynamicAtlas.bitmapFontFromTextField(tf:flash.text.TextField, charMarginX:int=0):void

    Enclose inside a try/catch for error handling:

    try {
    	var atlas:TextureAtlas = DynamicAtlas.fromMovieClipContainer(mc);
    } catch (e:Error) {
    	trace("There was an error in the creation of the texture Atlas. Please check if the dimensions of your clip exceeded the maximun allowed texture size. -", e.message);
    }

    History:
    -------
    # version 0.9.5 #
    - Added the fromClassVector static function. Thank you Thomas Haselwanter

    # version 0.9 #
    - Added Bitmap Font creation support
    - Scaling also applies to filters.
    - Added Margin and PreserveColor Properties

    # version 0.8 #
    - Added the scaleFactor constructor parameter. Now you can define a custom scale to the final result.
    - Scaling also applies to filters.
    - Added Margin and PreserveColor Properties

    # version 0.7 #
    First Public version

    ### Steps to make your own Dynamic Texture Atlas ###
    #### Base Sprite sheet creation (Inside Flash IDE) ####
    Create a new fla and make sure it is minimum flash 9 using as3.
    Start creating MovieClips that you want to be written to a sprite sheet. Be sure to avoid using actionscript, and if you have sub clips use graphics as opposed to MovieClip so that they get picked up.
    Drag all the MovieClips you want rendered to the main stage and name them.
    Export the swf.

    You can also drag all the MovieClips inside another Clip and assign a class to it if you prefer not to load an external swf.
    Dynamically creating the MovieClip container and every one of its children is also possible.

    #### TextureAtlas conversion ####
    Load the sprite sheet swf or create an instance of it as a MovieClip
    Use the DynamicAtlas.fromMovieClipContainer() static method to convert your flash.display.MovieClip to a starling.textures.TextureAtlas.
    (don't forget to destroy your now useless MovieClip)

    ### Steps for making your own Dynamic Bitmap Font ###
    You can use an embedded font and call the DynamicAtlas.bitmapFontFromString method, passing the chars to be rasterized as well as your font.
    Also, you can create a TextField, assign filters, color transforms and setting the chars to be rasterized into its text and then call the DynamicAtlas.bitmapFontFromTextField function.
    The selected font will be dynamically converted to a Starling Bitmap Font.

    ### Using the sample included in the package ###
    The sample included is a simple FlashDevelop project which uses a library item as base MovieClip to create a TextureAtlas and some Bitmap Fonts at runtime.
    If you plan to use it, you need to add the Classpaths of your copy of the starling framework and of this extension (dynamicTextureAtlasGenerator).
    You should also link the sample swc to your project to be able to use the assets inside of it.
    For the Dynamic Bitmap Fonts to work, you need to have the following fonts installed and embedded into a swc or directly into the project (Class names are defined inside the sample_for_atlas.fla file):
    * - Verdana
    * - Comic Sans
    #### Requirements ####
    Please refer to the [starling documentation](http://doc.starling-framework.org/core/) or to the [starling tutorial](http://www.bytearray.org/?p=3371) for requirements and setup.

    This project began as a fork of the [Texture Atlas Generator](https://github.com/pixelrevision/texture_atlas_generator) by pixelrevision
    Most of this comes thanks to the inspiration (and code) of [Thibault Imbert](http://www.bytearray.org) and [Nicolas Gans](http://www.flashxpress.net/)

    Hope you find it useful

    Posted 7 months ago #
  2. thibault.imbert
    Member

    Great extension! Very useful.

    Thibault

    Posted 7 months ago #
  3. maru
    Member

    Great job !
    And I'm very happy to see that you have reused my AnimatedBitmapData class...

    I'll test this as soon as I can

    Posted 7 months ago #
  4. emibap
    Member

    Thanks Maru and Thibault, I owe you all the credits for this one. I forked the Texture Atlas Generator (by pixelrevision), but Maru's implementation was great at capturing filters and taking the clip real bounds. Also I loved the elegance of your code. Worry not, I'll make justice to that and add a reference to your project as soon as I've organized the code and polished a bit more.

    Having both of you in the thread, I have one thing I'd like to ask you about:

    Do you think that i could make a difference in terms of performance if I remove the calls to Math (for instance replacing Math.floor(num) with int(num)) and not calling internal functions inside the frame capturing loop?
    I'll make some benchmarking but perhaps you know in advance if it's worth the effort.

    Thanks

    Posted 7 months ago #
  5. Daniel
    Primary Feather

    Wow, that's a fantastic job!!! Awesome ...! Thanks a lot for all of your efforts!
    And thansk for adding it to the user-contributions-thread already. As soon as the Starling wiki is up, this will be prominently featured =)

    Posted 7 months ago #
  6. smithmj5
    Member

    I'm really interested in using this, but cannot figure out how you've created your .swc? Also, I tried using this by using the swf instead of the swc, and it crashes when trying to do swf.getChildAt(i) because the child at i of the swf is actually a Loader, not a MovieClip. Have you tried this with a swf? Is there any special settings I need to be using when creating the swc?

    And does anyone know how to get a named class out of a swf, not a swc, such as "SheetMC" that is used in the sample? I cannot figure out how to attempt to use SheetMC from a swf.

    Thanks!

    Posted 7 months ago #
  7. Diego
    Member

    I am a beginner in action script 3 and was watching the draft hype framework [ http://www.hypeframework.org/blog/content/hype-gets-a-new-domain/ ]. I was reading the minibook Thibault, and recall a this very useful class for this project hype.framework.canvas.GridCanvas
    described as. . / **
    * Captures a target specifed DisplayObject to a series of bitmaps.
    * Supports Flash Larger Than dog images by splitting the image support Into a grid.
    * /
    it may valuable to check the project to see what the guys of HYPE are doing.
    I love to go more to the project but my as3 proficiency is limited.

    Posted 7 months ago #
  8. emibap
    Member

    Hi smithmj5,

    I created the swc using Flash CS5 and then added to my Flash Develop Library so I can create instances of the SheetMC class whenever I want.
    I you'd like to load a swf instead of using this approach, you should put all your assets (MovieClips and Sprites) directly in the root (not using a container like SheetMC), then publish the swf and load it at runtime, using the loader content as the first parameter.
    Please contact me if you can't use it.

    Emi.

    Posted 7 months ago #
  9. emibap
    Member

    Hi Diego,
    I'll take a look at it, thanks!
    Emi

    Posted 7 months ago #
  10. emibap
    Member

    Hi everyone,
    I've uploaded a new version.
    Now you can apply scaling to the objects (and to the filters) using a parameter.
    Use the code from the first post or download from github.

    Cheers,

    Emi

    Posted 7 months ago #
  11. rybram
    Member

    Good work bro! I was literary just about to start building the same thing when I stumbled onto this! You just saved me a buncha time! Thanks man.

    Posted 7 months ago #
  12. emibap
    Member

    Hi rybram. I'm really glad it helped. If you have any feedback it would be really nice to hear

    Posted 7 months ago #
  13. rybram
    Member

    Yeah I'll be sure to post some results once I get it into my current project. I just started looking into air3 and fp11 yesterday so I haven't really played with starling yet.

    I have a game on the android market called "Super Ninja Skydiving Plus Zombies" build in air. I'm able to get ok performance in it but I've had to scale all the generated bitmaps down and render everything to one big bitmap.

    Hopefully with this and starling I'll be able to update my AnimationManager and Camera classes to use it without too much work.

    I'll be sure to post something here with the results

    Posted 7 months ago #
  14. humulus
    Member

    Hi and Great job!

    I used the example and when I used movieclip "mario", scalFactory=1 it throws error "max size of texture 2048x2048". But "mario" animation shouldn't be so large. You have an idea what's wrong?

    SLOVED: TextureAtlas render all movieclip to one Texture if movieclips are to much it will throws error.

    Posted 7 months ago #
  15. emibap
    Member

    Hi humulus. I was about to tell you that same thing. If you're only using one MovieClip you should remove the rest from the container.

    @rybram, best of luck with Super Ninja Skydiving Plus Zombies! Just be aware that until AIR 3.1 we won´t be able to publish mobile Apps. Stage3D isn´t supported for mobile on AIR 3

    Posted 7 months ago #
  16. Thomas Haselwanter
    Member

    I gave it a ride and I worked pretty good. Nice work emibap!

    I played with it for 15 minutes and was able to get Starling and the DynamicAtlas to work. Here are three things that are on top of my list of things that I'd want when working with Starling and DynamicAltas:

    • avoid the work associated with creating container movieclips, pulling in instances and giving them instance names. I have thousands of assets already exported to SWCs.
    • make it possible to decide during runtime in code which textures get created, instead of deciding that during the design time (eg when pulling instance into the container movie clip)
    • have an atlas that works with type-safe classes instead of strings to avoid typos, avoid name-collisions, kill the need to remember instance names and take advantage of IDE auto-completion for class/texture names

    Here's what I imagine would be an interface for this, which is most in line with the existing TextureAtlas/DynamicAtlas API contract:

    var atlas:TextureAtlas = DynamicAtlas.fromClassVector(Vector.<Class>([SymbolOne, SymbolTwo]));
    var s1:MovieClip = new MovieClip(atlas.getTexturesByClass(SymbolOne));
    var s2:MovieClip = new MovieClip(atlas.getTexturesByClass(SymbolTwo));

    I have a very simple, working implementation of this, that adds a method to TextureAtlas and one to DynamicAtlas. To keep it as a pure extension to Starling the getTexturesByClass() could also be moved to DynamicAtlas, if we accept to make it a little more cumbersome and ugly.

    In the mid-term I'd really like to see Starling integrate DynamicAtlas officially and make the user feel like pushing vector graphics to the GPU is as natural in Flash as doing so with raster graphics.

    Posted 7 months ago #
  17. emibap
    Member

    Hi Thomas, and thaks a lot for the feedback!
    I've added DynamicAtlas.fromClassVector to the wishlist and will implement it as soon as possible.
    Meanwhile I'm uploading a new version which supports the creation of dynamic Bitmap Fonts.

    Cheers,

    Emi

    Posted 7 months ago #
  18. lokhy
    Member

    Hi Emi,

    Ty for the extension.

    You didnt mention under what kind of license ur shareing it. Do you mind if someone modify this code for own usage?

    Posted 7 months ago #
  19. emibap
    Member

    Hi lokhy,
    Thanks for asking.

    You can modify what you want. This extension has been released into the public domain.
    So you don't even have to add my name if you don't like to
    I've just added an UNLICENSE file to the gitHub Repo.

    Cheers!

    Emi

    Posted 7 months ago #
  20. emibap
    Member

    Oh, and I almost forgot to mention that this extension had its 30 seconds of glory at a MAX conference.
    Check out this video - Developing 2D GPU games on top of Stage3D (Molehill):
    http://tv.adobe.com/watch/max-2011-develop/developing-2d-games-on-top-of-stage-3d-molehill-in-flash-player/
    At minute 51:30 the Dynamic Texture Atlas Generator is being mentioned in a slide!
    Thanks Thibault Imbert, that was really unexpected.

    Posted 7 months ago #
  21. thibault.imbert
    Member

    You are very welcome, this is a sweet extension

    Thibault

    Posted 7 months ago #
  22. Thomas Haselwanter
    Member

    I've pushed my modification for dynamic atlas and for Starling's TextureAtlas into my github forks of emibaps extension and Starling.

    It's a very simple and certainly sub-optimal implementation, but it appears to work and can serve to validate the usefulness of the interface extension. So far it feels ok to me.

    The bit in the extension can function without the modification in Starling, so I've opened a pull request for emibap's extension only as the added function in Starling's TextureAtlas doesn't have real value as long as the extension isn't part of Starling.
    I still do hope that the extension will be absorbed into Starling (hint hint), as it will allow us to get rid of all these static functions.

    Posted 7 months ago #
  23. emibap
    Member

    I´ve pulled Thomas´s contribution.
    Now it´s possible to create a Dynamic Atlas out of a Vector of MovieClip Classes
    Thank you Thomas
    For the sake of simplicity I'm removing the Class code from this thread. You´ll always find it on the gitHub repo
    https://github.com/emibap/Dynamic-Texture-Atlas-Generator

    Posted 7 months ago #
  24. hacker
    Member

    Great job

    Posted 7 months ago #
  25. Hajimeku
    Member

    Hey, great class m8. this is very good!

    problem though is that if you put a lot of items in a holder it will trow errors cause you will be trying to create a Texture with a bigger height and width of 2024x2024.

    this topic might help you i wrote it. would be easy for you to implement this right?

    http://forum.starling-framework.org/topic/bigtextureatlas-free-for-everyone

    again great class!

    Posted 7 months ago #
  26. emibap
    Member

    Hi hacker, thanks!

    Posted 7 months ago #
  27. emibap
    Member

    Hi Hajimeku, that's a clever way to solve the Texture size problem! The bad thing is that if I implement that kind of solution I'd be forcing the developers to actually use another class (BigTextreAtlas or DynamicAtlas) instead of the regular TextureAtlas. I'll meditate about it and perhaps I'll do it.
    Thanks!

    Posted 7 months ago #
  28. Hajimeku
    Member

    Hey, so i rewrote it bit and i came up with this.

    http://www.apollomeijer.com/extensions/BigTextureAtlas.as
    http://www.apollomeijer.com/extensions/BigTextureAtlas.zip

    now people can cast it as a normal TextureAtlas only problem is that they can't add regionFrames themselves cause the function has 1 more parameter (can't override).

    but who wants to do that right? hehe.

    Posted 7 months ago #
  29. emibap
    Member

    Nice!
    I'll see to add this briefly.
    Thanks!

    Posted 7 months ago #
  30. Astroboy
    Member

    @emibap thnaks for this extension.

    Out of luck with MC inside my character animation. It cannot create the exact copy of the movie clip if you got a mc plays inside. In your example file BoyNDog; the dog is still. I think there is no chance to get them correctly with movieclips plays inside movie clip which we use to create TextureAtlas.

    One more thing, I put all the character animations in a movie clip. I can change character's skin color, adding weapon to its hand, put on some clothes, etc... So I need to get TextureAtlas from that 1 mc. Can you suggest a way to create a texture atlas dynamicly? May be I can use framelabels inside the characters mc to add them to a starling movieclip, soon to use for run,walk,hit actions?

    Posted 6 months ago #

RSS feed for this topic

123Next »

Reply »

You must log in to post.

Starling Forum is proudly powered by bbPress.