I love FlashDevelop, I do.

I love it so much that I even installed a Windows virtual machine just to be able to use it on my macbook pro. It seems insane, but none of the other IDEs that I tried (free or commercial, though there are great ones out there) made me feel as comfortable at coding as FlashDevelop does.

So when I started using it for mobile development, I found out that by using project templates I could save a lot of time setting up new projects, testing and publishing. All you need to do is copy a project template into your FlashDevelop installation folder and then you are almost ready to start coding.

The coolest thing is that you can modify those templates to fit your needs. For instance, I took a template for AIR 2.7 for iPhone and adapted it for AIR 3.0. Later I created a new template that enables you to publish your mobile App to both iOS and Android.

I created a gitHub repository for all my FlashDevelop templates (created or modified by myself), so not only you can download or fork them but also suggest modifications or improvements.

What you will need

In order to have this templates running, you’ll need to have the following:

If you need some guidance on how to install the SDKs and to understand how the templates work, I highly recommend this series of tutorials by codeandvisual.com. Everything there points to AIR 2.7, but almost everything applies for AIR 3. In fact, I adapted my templates from the one that I found there, so thank you codeandvisual ;)

Happy publishing!

Or should I say: My first contribution to the Open Source Flash community? Both are true.

In case you don’t know what Starling is, it’s a open source 2D GPU Hardware accelerated Framework for Flash that may allow you to take advantage of the benefits that come with the Stage3D class, but for making 2D content.

Enough with the Starling introduction, what I did was to add a little extension that I think will be greatly appreciated, specially by mobile developers.

As you know, GPU acceleration is possible only if you upload textures (bitmaps) to the GPU, so no vectorized content is allowed (no traditional flash display list here).

Let’s say you are developing a game. You want to publish it as an iOS game for iPhone, iPad, and also as an Android App and as a BlackBerry playbook as well. You’ll have to handle a lot of screen sizes. What you want to do is to have only on version of the code and assets and publish it for every device without having to maintain different versions.

If you develop the game using the most common approach (using Sprite Sheets and Texture Atlasses) you’ll have to make your sprite sheets taking the biggest resolution of your target devices (for instance the iPad) and scale it down on the rest of the devices at runtime. That is a good approach but it would require more memory than it would need for most of the devices that it will be running in. And if in the future a new device with a bigger screen hit the market, you’ll have to make bigger assets recompile the game.

Starling lets you create Texture Atlasses at runtime by using bitmap textures. So why can’t you take advantage of your vectorized assets by having then as vectors (Using regular Sprites and MovieClips), scaling them to the size you really want (including filters), and then creating a Texture Atlas?

Introducing the Dynamic Texture Atlas Generator

This tool will convert any MovieClip containing other MovieClips, Sprites or Graphics into a starling Texture Atlas, all in runtime. By using it, you won’t have to statically create your spritesheets. Just take a regular MovieClip containing all the display objects you wish to put into your Atlas, and convert everything from vectors to bitmap textures. This could save you a lot of time specially if you’ll be coding mobile apps with the starling framework.

I’m planning to add the same functionality for converting system or embedded fonts into bitmap fonts as well.

Where can you find it?

How to use

Use the static method DynamicAtlas.fromMovieClipContainer:

DynamicAtlas.fromMovieClipContainer(swf:flash.display.MovieClip, scaleFactor:Number = 1, margin:uint=0, preserveColor:Boolean = true):starling.textures.TextureAtlas

Parameters:

  • swf:flash.display.MovieClip – The MovieClip sprite sheet you wish to convert into a TextureAtlas. It should contain named instances of all the MovieClips that will become the subtextures of your Atlas.
  • scaleFactor:Number – The scaling factor to apply to every object. Default value is 1 (no scaling).
  • margin:uint – The amount of pixels that should be used as the resulting image margin (for each side of the image). Default value is 0 (no margin).
  • preserveColor:Boolean – A Flag which indicates if the color transforms should be captured or not. Default value is true (capture color transform).

As you can see, the only required parameter is the first one: The sprite sheet Movie Clip. Inside of it (in a single frame) you should put every one of the MovieClips you wish to upload to the GPU, naming every instance. At the end of the process you’ll have a Starling Texture Atlas containing every asset as a texture.

Take a look at this example:

// Assuming that you have a MovieClip Sprite sheet named "mc" with all your assets inside
// 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);
}

Some credits

This little project was only possible thanks to the inspiration (and code) I got from:

I really hope that this tiny contribution may help flash developers to easily enter the GPU accelerated world without having to stop using the display list and the Flash authoring IDE for asset creation. Vector content is still really useful for a lot of things.

Enjoy.

I know It’s a little late to tell the news from here, but Finger Slice is alive and kicking in the Apple App Store!

Finger Slice IconFinger Slice Logo

It’s amazing the fact that it was reviewed in less than 2 hours. But that started 4 days after I submitted the game for review.

This is the first App that I submit to the iOS App Store, and my first paid App as an independent game developer. What a milestone!

So go ahead and slice some figures ;)

I’m really excited because I think that this is the final touch to this game before publishing it.

I’ve added some Objectives to the game in order to make it more difficult/interesting, and thumbnails for each level inside the level selection state.

Here’s a video of this update:

Notice how I achieved Objective 2 :)

In a couple of days it will surely be in the App Store review process…

My first mobile game is almost ready!

I’m talking about Finger Slice, a precision cutting game where you can prove your ability dividing objects in halves.

I plan to release a 1.0 version targeting iOS Devices and then Android, Blackberry, and whatever gadget that allows Adobe AIR applications, which is the technology I’m using right now that will allow me to publish on all those platforms with basically the same code.

More precisely I used AIR 2.5 to build this game because AIR 2.6 and above doesn’t support the device I currently own and love: an iPhone 3G.

Below, some videos worth more than what can I write about the game so far :P (Sorry for the video quality)

This is the game inside my macbook pro:

Here it’s running on a 4th gen iPod touch:

And on this one you can see it inside my iPhone 3G (I had to optimize the code a lot before reaching acceptable results…):

It only needs a little bit of polishing and I’ll send it right away to the Apple App Store.