Tag Archives: texturepacker

Creating “Floating Fun”: Behind the Scenes

Now that my second children’s eBook app “Floating Fun” has been released for the Samsung Galaxy Tab 7, Amazon Kindle Fire, and Apple iPad, I will discuss some behind the scenes information.

Creating the second installment of the Colin Turtle book series was much easier than creating the first book because I already knew the creative process and this time, I had new software to utilize. I had knowledge of the many tools available to use to create apps and I knew what I wanted to accomplish with the second book.

The Original Title of Floating Fun
The Original Title of Floating Fun

From the beginning, I knew I wanted to use the Kwik Photoshop plugin to create the book and Adobe Flash to draw the animations and illustrations. For the animations, I would use a sprite sheet creator, but I wasn’t sure if I would use Zwoptex, TexturePacker, Spriteloq, or SpriteHelper.

Adobe Flash - Initial Sketches
Adobe Flash – Initial Sketches

The deciding factor was being invited to alpha test Kwiksher’s new software that was being developed called “K2”. Not only was K2 adding a plethora of new features to its Kwik predecessor, but they were also working with Code and Web to create a K2 export function in the beta version TexturePacker Pro 3.0.0b10.

TexturePacker K2 Export
TexturePacker K2 Export

Having two great pieces of software working well together made it much easier to assemble the final project. In K2, you can select a layer, click the “Replace with Sprite Sheet” icon, then select the files TexturePacker created for you, and your animation is inserted in your book. It’s very easy to use and saves a ton of time trying to program sprite sheets in manually.

K2 - Beta 2 Interface
K2 – Beta 2 Interface

A few other features I used in K2 were the navigation menu, physics, external code insertion, and text highlighting. Clicking the Navigation Menu check box auto-generates an interface in which users can navigate your book through a series of thumbnail images. This is a nice addition, especially for users that want to navigate to a specific page without having to flip through the entire book.

(YouTube video showing physics, text highlighting, navigation menu and external bubble popping game code.)

The K2 physics feature allows developers to add gravity to pages of their books or even develop games directly in Photoshop. So if you’re looking for an easy way to create a game app, but don’t know where to get started, you can now use Kwik and Photoshop.

The external code feature can also help you develop games in Kwik. If you know your way around Lua coding and want to add your own code into a K2 project, you can now paste it in using the External Code option and choose where you want it to be inserted in the published file.

Floating Fun was the first eBook published using the K2 beta as well as the beta version of TexturePacker’s K2 exporter, without either of those pieces of software I would not have had the time or energy to create the book through an alternate method. Both K2 and TexturePacker saved me a lot of time and manual coding to create my book.


What is a Sprite Sheet?

If you read this blog on a regular or semi-regular basis, I assume you have some knowledge and interest about mobile app development. However, one golden rule of my 6th grade teacher was “Do Not Assume.” So I will now take the stance that some of you aren’t familiar with mobile app development, and are reading this on how to get started in the business.

If that’s the case, anything I’ve mentioned about sprite sheet generators like TexturePacker, Spriteloq, SpriteHelper, or even my how-to video about Kwik and Zwoptex probably don’t make any sense to you. Even if you know what a sprite sheet is, you might not know everything there is to know about them.

So instead of making you read a three-page report about sprite sheets, I figured I’d show you a humorous, yet informative cartoon instead. This video comes from Andreas Löw, creator of TexturePacker. Enjoy.

SpriteSheets – TheMovie – Part 1 by Code’n’Web

My Favorite Mobile App Software

Let me start by saying there is always a time and a place for good old-fashioned Objective-C in Xcode and Java in Eclipse, that is why they are the standards for creating iOS and Android apps. However, coming from a front-end graphics background and using Macromedia/Adobe Flash for pretty much everything in my life, learning Objective-C was less than fun for me.

That being said, here are my favorite pieces of software that actually made it fun to learn how to make mobile applications (in no particular order).

1.) Adobe Flash CS5/5.5/6 – Initially, this is how I got into mobile app development. Adobe added the ability to export AIR for Android and iOS, and all of a sudden your Flash projects could be native apps on your Android and iPhone. For me, it was an easy way to get my feet wet in the mobile app world. However, Flash is rarely the best software to use if you want to make a serious app, but it’s a great starting point. I still use it to draw a lot of my artwork. Pros – Great for Flash developers or anyone already familiar with AS3.0 ; Cons – Usually not the best choice for large apps or apps that require a lot of data.

2.) CoronaSDK (http://www.coronalabs.com) – Once I discovered CoronaSDK, I was instantly in love. It uses Lua code, which is very similar to Flash’s ActionScript, but more simplistic. It uses a small fraction of the code that is required in Objective-C/Java and the CoronaSDK simulator will use one set of code to publish out to most devices. So if written properly, your one set of code can be published out for iPhone, iPad, Nook Color, Kindle Fire, and Android devices. Pros – Great for Flash developers, publishes out to most devices without having to code twice, only a basic text editor is required to write Lua code, easy to use ; Cons – The subscription price point might turn some people off to Corona. At $349 a year for the Pro Subscription, the average person might be hesitant to dive in unless they’re sure they can make that back in app sales, but there is a free trial to see if it meets your needs.

3.) Kwik Photoshop Plug-in (http://www.kwiksher.com/) – I created my first children’s iPad book in Xcode using Cocos2D and Objective-C. It took me 4 times as long to learn how to code it than it did to actually write and illustrate the book. Then I discovered Kwik, which works in conjunction with CoronaSDK, and instantly remade my book using that. Using Photoshop, you assemble each page of your book on layers, and then using Kwik, just tell each layer what you want it to do. No coding involved, no looking at thousands of lines of text, just Photoshop and a click of a mouse. Since it publishes out to CoronaSDK, you can publish your book out for multiple devices without having to recode it. Sounds too good to be true, but it’s not. Also, Kwik 2.0, dubbed “K2”, is scheduled to debut in the near future, and it pretty much takes what Kwik did, but makes it even more awesome with a plethora of new features. Pros – Great for people who know how to arrange layers in Photoshop, great for anyone with an idea for an eBook, easy to use, good online support ; Cons – Requires that you already own Photoshop and a CoronaSDK subscription.

4.) TextMate (http://macromates.com/) – At first, I was skeptical about paying for a text editor since I already had TextWrangler, which is free. If you’re a PC user, you can use Notepad, which comes pre-installed with Windows, so why pay for a text editor? TextMate comes pre-programmed with commands most commonly used in coding. It will detect what kind of code you’re writing by what you save your document as, and will adjust accordingly. Plus, you can add your own commands that you use the most. For example, if I save my text document as a .lua file, type “physics”, then press the tab key, it fills in all of the coding required by Corona to enable physics. You can do this for actionScript, HTML, javaScript, C, Java, Lua, blogging, XML, PHP, etc. Pros – Saves you a lot of time if you’re going to be writing a lot of code manually, regardless of the coding language ; Cons – Some people might not want to drop $51 USD on a text editor, but there is a 30 day trial to see if it’s for you.

5.) TexturePacker & PhysicsEditor (http://www.codeandweb.com/) – If only there was an easy way to convert artwork into animated sprites with physics applied to them. That’s where TexturePacker and PhysicsEditor come into play. Import your artwork into TexturePacker and it’ll make a spritesheet for you that is ready to use in Corona, Starling, Cocos2D, JSON, etc. Artwork that you need physics applied to can be rendered in PhysicsEditor and it will even trace the shapes for you, regardless of the complexity. The software is constantly being updated with new betas available to add new features (Kwik 2.0 image sheet anyone?) and it’s easy to use. Pros – Easy to use, exports for many platforms, auto-traces shapes, new updates, option to buy separately or together ; Cons – There are a lot of spritesheet creators on the market so users might be hesitant to try this one, but again there’s a free trial to see if this is the one for you.

6.) Spriteloq (http://www.loqheart.com/spriteloq/index.html) – Spriteloq went right for the soft spot in my heart that I reserve for Flash. Spriteloq targeted people who draw their animations in Flash and then want to their drawings into CoronaSDK apps. With Spriteloq, you use a simple command line to export your library of movie clips as individual .swf files. You can import those .swfs into Spriteloq and adjust the frame rate, single play, loop, reverse, etc. and then compile every animation into a single spritesheet. So within a minute, you have your Flash animations running in native iOS and Android apps. If you’re worried about physics, it supports that as well. As a Flash user, I love this software. Pros – Great for Flash animators, easy to use, saves time, free trial ; Cons – Requires the users to already own Flash and CoronaSDK

So there is a list of my favorite software to use to create mobile apps. If you have any questions on how to get started using them, all of the companies provide great support, plus I have a few tutorials throughout this blog that you can follow. You can also leave a message on here or ask me on Formspring: http://www.formspring.me/GPAnimations

TexturePacker Review

I’ve recently discovered two new pieces of software that make creating mobile applications easier, TexturePacker and PhysicsEditor. Today, I will be reviewing TexturePacker, which turns sprite images into a neatly compiled spritesheet with corresponding files for your platform of choice.

My platform of choice is Corona SDK, so I will be covering how to implement a Flash animation into that, but TexturePacker supports a wide variety of other platforms.

TexturePacker Data Format List

For this example, I drew a very basic animation in Adobe Flash CS6. You can use any animation software you’re comfortable with, but I chose Flash because I’ve been using it since Macromedia Flash 5. In the Flash library, I converted my animated graphic symbol into a .png sequence and named it “guy”. This nine-frame animation was exported by Flash as “guy0001.png,”, “guy0002.png”, etc.

Adobe Flash CS6 Exporting as PNG Sequence
Adobe Flash CS6 Exporting as PNG Sequence

My next step was to open TexturePacker and import my newly-created sprites. I chose Corona TM SDK as my Data Format, decided where I wanted to save my Data File, and clicked Publish. That’s all I had to do on my end, which is the beauty of TexturePacker. It assembled my individual frames into a single spritesheet, and published a “guy.lua” file for me, which contains all of the data needed by Corona.

TexturePacker creating a spritesheet

I then opened TextMate and created a new “main.lua” file. I inserted some very basic Lua coding to import the sprite, position him on screen and play the animation. Just for fun, I later added some physics to him to make him bounce up and down (physics coding not pictured below).

Lua coding to insert and position the spritesheet

The final step was to open the main.lua file in CoronaSDK and there was my little orange guy bouncing up and down, waving, blinking and moving his mouth.

Animated sprite in iPhone4 simulator

Overall, my experience with TexturePacker was great. It’s easy to use, versatile, free to try, and extremely affordable. This is probably going to be my go-to software of choice for compiling spritesheets. Also, when you decide to download TexturePacker, give PhysicsEditor a shot as well. PhysicsEditor really impressed me and I will be reviewing it next.

Here are the source files, feel free to modify them: Texture Packer Source Files