8bitrocket.com
7Nov/110

Texture Packer Makes Sprites Easy to Export From Flash. For Corona, as well as Cocos2d, and more.

I have a huge new gig that includes taking 100's of pre-existing Flash animations and using them  to create a cross platform mobile application for a kids television network. The goal is to take the current Flash site (luckily in as3) and create a mobile version that will work on almost any mobile (iOS and Android only for now) device. We are using the iPad2 (1024x768) as our target platform and then creating a  "bleed area" that will allow us to fit the app landscape onto every iOS and Android device we can find without doing any image swapping.   We chose Corona for this development because it has the best combination of power and rapid application development.   The Corona simulator and and scale = "zoomEven" build property makes this a dream to complete (so far).

Since Corona is so good at letting us target and test on 6 or 7 of the most popular devices, the cross-platform scaling issues I originally thought would take the most time upfront were handled in about 1 day. This gave me extra time ahead of schedule to test out both SpriteLoq (look for a future examination of this Corona-only targeted tool) and Texture Packer.   My goal was to find a relatively simple method to create animations from all of the individual .fla and swf files and use them to populate mobile application .  My goal was to then use Lua script to control them where necessary. An NDA stops me from showing the actual content that I am using for the app, but I have created a suitable (read ugly but functional) demo .fla that I can use to demonstrate a small portion of the power of Texture Packer.

I started with Texture Packer because it is cross-dev environment, so it can create data and tile sheets for use in Corona, Cocos2D, JSON (so I assume HTML5 but I have not had a chance to test it yet), Unity, CSS, AppGameKit and about 7 or 8 others.  Texture packer is very powerful and can create data and tile sets from more than just swf files. You simply feed it a series of png, jpg or BMP files and it will be able to use them in the same manner as a .swf animation.

First let's take look at the .fla I used:

I created a very modest animation on the time line that simply changes the color of the Red Ball using a classic tween across 20 frames.

I then opened up Texture Packer and selected Corona TM SDK from the left-hand  Data Format Drop Down and then dragged my texture_test2.swf into the Sprite area where it reads the time-line and attempts to pack my 20 frame time-line animation onto as small a space as possible.

The next step is to choose a data file name and then click the "publish" button in the center of the top button bar. This will create both a packed PNG file and a lua data file that describes the animation frames.  I chose "jeff_fules.lua", but that was just me being cheeky. I should called it TexturePacker_rules.

To use the sprite, you must next fire up Corona, create a new main.lua in the same folder as the jeff_rules.lua and the jeff_rules.png.

The the main.lua file the we are about to create just be in the same folder as the jeff_rules.lua and jeff_rules.png (for it to work on all of the various build platforms).

 

--[[    main.lua      
Texture Packert test
Jeff Fulton 2011    --]]       
require "sprite"
display.setStatusBar(display.HiddenStatusBar)
local sheetData = require "jeff_rules"
local spriteData =sheetData.getSpriteSheetData()
local spriteSheet = sprite.newSpriteSheetFromData( "jeff_rules.png", spriteData )
local spriteSet = sprite.newSpriteSet(spriteSheet, 1, 15)
local jeffSprite = sprite.newSprite(spriteSet)
jeffSprite.x=200
jeffSprite.y=200
jeffSprite:play()
print ("jeff sprite");

Here is the small main.lua showing our sprite (you cannot see the color shift animation of course).

TexturePack makes it very easy to take Flash timeline or png series animations and turn turn them into cross-platform packed tile sheets for use in mobile and other applications.

Saving texture memory is a HUGE deal when building mobile applications and just this simple example was able to demonstrate that Texture Packer can cut the file size in less 1/2 when compared using the individual png files that are exported directly from Flash. Each of those files for my test were 1K, while the Texture Packer png file was 8K. That was a total savingis on 12K, which might seem in significant, but a 50%+ texture pack rate across 100's of animations will certainly give you a leg up when trying to target some of the older platforms (I'm looking straight at you iPhone 3).

If you are doing any type of mobile development I suggest you take a look at Texture Packer. It certainly is going to save me a lot of time and headaches on my current projects.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

No trackbacks yet.

This site is protected by Comment SPAM Wiper.