Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Animation workflow — Gideros Forum

Animation workflow

boriskeyboriskey Member
edited June 2013 in Game & application design
Hi, I am going to ask very generic questions as I am new to animation.

First off, If I am to hire an animation artist to create sprite sheets for my app, does it matter what tool he uses? My main concern, that she should be able to "tag" animation with sprite sheets like "man, running left", "man, jumping" etc. So I get metadata to work with. Or it is something I would have to do myself?

Second, once I get the sprite sheet, what is the best way to load it, again make it easier to work with metadata? I saw example like Texture Pack, I do not like that I have to init every single sprite and "hardcode" frames sequence.

What I was thinking, is an easy way to take the sprite sheet and have another file on a side that would automate this process. So that file would describe which sprites belong to a "man, running left", "man, jumping" etc.

I also looks at TNT animation studio, but I cannot find any posts with people actually using it. Will it give me this ability I described above? is it ready for production use?

If you can also any best practices regarding animation workflow or point me to some other resources, it would be great.

My fear after looking at Gideros examples, it takes too much work to init sprites and describe their behavior so I am looking for a way to minimize this work since in my app there will be hundreds of animated objects.

Thanks!

Comments

  • ar2rsawseenar2rsawseen Maintainer
    edited June 2013
    Hello @boriskey
    TNT Animation studio would be one of the best solutions for Gideros, because it not only provides you the way, to combine different frames in multiple animations and set the meta information for each animation which frame in which order, etc (just as you described), but it also provides Gideros classes to both read and handle the animations, which is quite easy to use and saves you a lot of time. :)

    I would suggest you to take any existing animation and try the whole process with the TNT Animation Studio, to get the feel of the workflow, but basicaly designer should provide you with images (or better image sources, like PSD files for photoshop), and you most probably would have to define animations your self.
  • Hi ar2rsawseen , this helps! I will give it a try tonight. Does designer normally give you a set of images for every frame rather than a sheet?

    Also can you give me an idea how to handle multiple resolutions in this case? so I will get images for iphone and iPad, would I have to process them differently and basically double my work or there are some shortcuts?
  • ar2rsawseenar2rsawseen Maintainer
    @boriskey I think you may request in what format you want to have the images, but most probably it would be easier for you to have separate images, rather then ready spreadsheets, so you could input them in the TNT Animator and define all the animations and combinations of animations you might want.

    About handling multiple resolutions, then it is a matter of taste.
    I would go with letterbox as automatic screenscaling,
    http://docs.giderosmobile.com/automatic_screen_scaling.html

    and create two image resolutions, for iphone and ipad and use automatic image resolution in Gideros, which would choose the best image based on the device resolution.
    http://docs.giderosmobile.com/automatic_image_resolution.html

    Here is a great discussion about handling multiple resolutions:
    http://www.giderosmobile.com/forum/discussion/1929/understanding-scaling-and-resolution-on-different-devices-/p1

  • @ar2rsawseen, I just downloaded TNT Animation studio and looks like it can only accept texture pack as an input format. It is not a huge deal since but I guess I am bit confused because you recommended to work with separate images.

    Thanks for the links, I saw some of them and actually bookmarked your post before - I really liked your approach described there. I was not very clean on my question though - I was more interested to see how multiple resolutions are handled by TNT Animation studio - like do I need to create animations there for each resolution I want to support?
  • Please correct me If I am missing something, but it seems that the workflow looks like this:
    1. Get separate images for each frame of the sprite.
    2. Use Gideros Texture Packer to create a texture pack for all animated objects, loading images from step 1
    3. Use TNT Animation Studio and texture pack from step 2 to define animations (i.e. PLAYER_UP, PLAYER_DOWN etc.). I really like that you can reuse/flip orientation of the frames and change speed and preview the animation. As a result of this step, we will create TAN file for each animated object (i.e. player.tan)
    4. Use TNT Animation Studio Gideros classes to load TAN file and point to texture pack from step 2.
    The question I have – what I need to do here to support more than one resolution. Looks like all I need to do is to repeat step 2 only and create @2x version of texture pack and then do something like this:

    local boyTexturePack = TexturePack.new("player.txt@2x", "boyPack.png")
    boyLoader:loadAnimations("player.tan", boyTexturePack, true)

    Is that right?
  • ar2rsawseenar2rsawseen Maintainer
    @boriskey yes that is exactly like that. :)

    Also in lua:
    --load texture pack
    local boyTexturePack = TexturePack.new("player.txt@2x", "boyPack.png")
     
    --create animation instance
    boyLoader = CTNTAnimatorLoader.new()
     
    --load animation loader
    boyLoader:loadAnimations("player.tan", boyTexturePack, true)
    After that for each animation you can use:
    --create animation isntance
    local boyAnimation = CTNTAnimator.new(boyLoader)
    --set what animation to use
    boyAnimation:setAnimation("RUNLEFT")
    boyAnimation:setSpeed(100)
    boyAnimation:setLoop(false)
    boyAnimation:addChildAnimation(parentObject)
    boyAnimation:addEventListener("ANIM_STOP", function()
    	boyAnimation:free()
    end) 
    boyAnimation:playAnimation()
  • great and thanks for the example! quick question - I see you free up memory once animation ends, is there a reason for this? maybe it is a subject for another post though :) Not sure how crazy I should be about memory management with Gideros
  • ar2rsawseenar2rsawseen Maintainer
    @boriskey well it all depends on the size of animation, if you are ok of it sitting there till the end of scope or scene, then it is ok. I like to free up the memory anytime I can :)
  • Hey i have a question.
    I dont know if i got it right, but im reading that if you want to handle your animation to work in different resolution you need to do something about it?
    Ive been using just the tablet resolution on gideros and it stretch automatically to use it on phones and tablets so ive never had to handle different resolution on images....
  • If you are using scaling mode, then there probably nothing much else to do on other resolutions.

    Stretching mode you should of course check if your app is not too stretched on different resolutions in Gideros desktop player
    Letterbox you should probably provide larger backgrounds positioned to center of the screen using anchropoints to cover the whitespaces
    And Crop you need to make sure that different resolutions does not cut out the important parts of your app

    But while coding, there should be no difference for Bitmaps or animations
Sign In or Register to comment.