Tag Archives: spriteloq

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

Spriteloq Physics Test

Continuing to test my 30 Day Free Trial of Spriteloq, I wanted to see how well the physics properties work.

My first step was to export my movie clips in Flash as individual .swf files.

Flash Movie Clips
Flash Movie Clips

I then imported the .swf files into Spriteloq and created paths around each object.

Spriteloq Shape
Spriteloq Shape

I published out the spritesheet and implemented it into my main.lua file, which I created in TextMate and opened in CoronaSDK.

main.lua
main.lua

I included the ‘loq_profile’ tag, which allows you to monitor performance. I thought this was a nice feature of Spriteloq to include.

Loq Profiler
Loq Profiler

I then ran the app in normal mode and debug mode so you could see the shapes that I drew in Spriteloq.

Debug Mode
Debug Mode
Normal Mode
Normal Mode

Overall, it was a very easy way to get from Flash movie clip phase to CoronaSDK with physic properties added. I’m liking what I’ve seen so far.

Spriteloq Review and Demo

As a Corona Ambassador, I try to keep up with as many third-party tools for CoronaSDK as my time allows. Some of my favorite tools are Kwik, Zwoptex, TextMate, PhysicsEditor and TexturePacker. Last night, I figured it was time to give a look at Spriteloq.

So you may be thinking to yourself, “Great, another third-party tool for creating spritesheets, I already own three spritesheet creator tools, how many do I need?” Well, the great thing about Spriteloq is that it’s integrated with Adobe Flash, so it’s perfect for animators. Just as Kwik is great for Photoshop heroes who want to create eBooks without learning how to write Lua coding, Spriteloq is great for Flash animators who want to easily embed their movieclips into apps.

Here I’ll show an example of how Spriteloq works with Flash and CoronaSDK.

After installing Spriteloq and the Flash extensions and downloading the API Library Code, the first step I did was to draw some simple animations in Flash CS6 and save them as movieclips.

Flash Animations

Then clicked Commands > Export Library as SWFs and saved them to my work folder.

Command Line

I opened Spriteloq and loaded the two SWFs that were created by Flash. I was then able to adjust the frame rate, loop options, etc. for each animation, all while getting a live preview.

Spriteloq

Next, I packed both animations into a spritesheet using the “Pack” button then exported them to my work folder. This created a .PNG spritesheet as well as the accompanying Lua file.

Export

I copied over the Lua files from the API Library Code folder to my work folder and in TextMate, created a new main.lua file. In the main.lua file, I hid the status bar, created a white background, imported “myAnimations” spritesheet and then referenced each animation by the name they were given in Flash. If you’re already interested in Lua coding and reading this, I’m assuming you can pretty easily decipher my code.

main.lua file

I also set the screen for landscape mode in the build.settings file and then opened it in CoronaSDK. Now when you tap the apple, a worm pops out and when you tap the background, a fish jumps.

Final Product

I imagine you can make much more complicated scenes with Spriteloq, but this was my first 10 minute adventure in my 30 day trial. So far I’m pretty impressed with how easily you can transfer a Flash animation to a CoronaSDK animation. Previously, you had to export the animations as a PNG sequence, then import all of the images into a spritesheet creator. Spriteloq saves the user a couple steps and also makes it easier to focus on the animations and the app, not have to learn complex tools to get there..