Creation of a mobile App without the Flash IDE (for all FlashDevelop lovers)

If you read Emanuele Feronato’s blog you’ll know that the title of this post is a play on one of his. He detailed in length the process you need to go through to create an iOS App using the Flash IDE. However you don’t actually need the Flash IDE at all. If anything the process is faster and less painful using the completely free FlashDevelop.

The main reason I’m writing about this however is that with AIR3 officially released, I was keen to test the performance of Flixel code running on mobile. And I was shocked to say the least. The last time I tried creating a game for mobile using Flash was back when CS5.5 was still only in pre-release. The performance then was hideous, easily un-usable for any serious (or even semi-serious) game.

That was over a year ago, and a lot has changed. AIR3 and Flash Player 11 were officially released last night, and although they are lacking Stage3D on mobile for the time being, apparently they still bought significant speed boosts to the table. Time to put that to test with a video of results at the end.

I downloaded FlashDevelop RC1 and installed it, allowing it to download Flex 4.5 and the Android libs as it did. I already had the Android SDK installed from before (which you’ll need for Debugging via USB) but it’s a quick install if you don’t. I created a new “AIR Mobile AS3 App” project:

I copied over Flixel, the Flixel Power Tools and a bit of test code to the project folder. As it’s a native AS3 project all I needed to do was have them in my source tree and they just worked straight away. A quick modification to Main.as was all that was needed to add my test to the display list:

[as]
public function Main():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.DEACTIVATE, deactivate);

// touch or gesture?
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

// entry point
var test:FlixelTest = new FlixelTest();
addChild(test);
}
[/as]

In Landscape mode my test phone gives me a resolution of 800 x 480. So I set-up my Flixel test to use that at a zoom factor of 2 (so it’s rendering at 400 x 240). It then took me about 15 minutes to modify the coordinates and placements of my sprites to fit into this aspect ratio, as before they had been running at 640 x 480. Things needed moving around a little but soon it was time to test.

Read Me

When you create a mobile project in FlashDevelop it helpfully creates 2 text files for you: AIR_Android_readme.txt and AIR_iOS_readme.txt. These contain really useful steps on workflow such as how to debug direct on the device, how to package the final app, create certificates, etc. I followed the instructions. With my Google Nexus One plugged in via USB I then hit F5 to compile. The first thing that happened was that ADB threw a compilation error about a clash between some default icons FlashDevelop had put there. So I removed the icons folder that resides inside bin and tried again. This time success. After a short compilation time my phone kicked into life and displayed a message about AIR being unable to connect to my PC for debugging. Ordinarily I’d try to resolve this, but for the purpose of testing quickly I hit cancel to skip past it.

And then my app burst into life. Performance wasn’t that great though, so I quit and went back to FlashDevelop and tweaked the following settings:

  1. In the AIR App Properties window I made sure that the Initial Window was set to Landscape and rendered with the CPU. Yes, CPU, not GPU. The way Flixel works it doesn’t benefit from the GPU because it’s constantly updating a raw BitmapData, so the GPU has no chance to cache the texture. It’s much better to use CPU instead and stream the pixels over.
  2. In the Project Properties under Compiler options I specified Flash Player 11 with the ”-swf-version=13″ parameter
  3. Updated the namespace in the application.xml file to AIR 3.0 (it defaults to 2.7)
  4. Made sure that no “cache as bitmap” was being used in the code

With the changes in place I hit F5 and this time we were rocking!

Performance was superb, easily holding up at 30 fps while throwing around some big chunky sprites, sine-wave scrolling a bitmap font, plotting 200 stars, bouncing logos, rainbow lines and even an animated mummy. I was shocked at the difference AIR3/FP11 had made. Remember this is on a Google Nexus One – one of the first Android devices and nearly 2 years old. Easily under-powered compared to most modern mobiles, and yet handling this test with ease AND in Debug mode! See for yourself in this very poorly shot video (sorry!):

To say I was happy is an under-statement. I had managed to compile a decent flixel test to Android in the space of an hours work. The results make me believe that I could easily port a game and have it perform well enough to actually play, something that I couldn’t have said a year ago.

Oh iOS

I don’t have an Apple developer account and don’t want to spend $100 on one for the sake of a few blog posts. So I can’t test the same app on my iPhone, which is a shame as it’s a quite old 3GS and I’m curious how it’d perform. If you do perhaps you’d like to drop me a line and we could try it out?

This small test just goes to show the power of AIR3. And the fact you can now publish direct to Android and iOS with 100% free software is incredible. Of course you can’t sell your game in the App Store without owning a Mac (as the Apple submission app is OS X only), so I’m not going to make claims about doing it all “without a Mac” ;) But it’s still great to have got this far, and makes me value the power of Adobe’s free software more than I ever did.

Posted on October 5th 2011 at 11:30 am by .
View more posts in Experiments. Follow responses via the RSS 2.0 feed.


27 Responses

Leave a comment
  • Philippe
    October 5th 2011 at 11:39 am

    Yeah sorry about the ‘icons’ issue in the template – will be sorted out in next release.

    I think it should run just as fine without adding -swf-version & changing the namespace to 3.0 – what’s important is the installed AIR runtime.

    Apparently OSX runs fine in a VM (VMWare I think) so you can avoid owning a Mac :)

    For debugging, make sure the device is connected to the same LAN as your PC – also when things seem to behave strangely unplugging/replugging the device and/or a PC reboot puts things in order.

  • October 5th 2011 at 12:19 pm

    WOW!
    That’s the best blog post!
    You are officially my god!
    Can’t wait to test my game on some android device, it surely boosts me to work more on my game!
    yay!

  • josu
    October 5th 2011 at 12:24 pm

    Lee Brimelow made a video showing how to deploy iOS apps using only windows.

    I think it is a tricky proccess, but it’s adobes way and it seems to work!

    http://gotoandlearn.com/play.php?id=133

    By the way, I created a iPhone test app in FlashDevelop 4 Beta and test it in a jailbroken iPhone. It worked perfectly.

    I have to admit, I love FlashDevelop

  • Stu
    October 5th 2011 at 12:47 pm

    Great post.

    Might also be worth mentioning the upcoming “captive-runtime” function on Air3. This would mean your Android app can be sent to the Market place without the need or worry that clients need to install Air. (This is also how apps are basically packaged for iOS anyway)

    The only overhead with this is that you have an initial 8meg app size (regardless of content). Something I’ve already protested to Adobe about, and hopefully will be addressed come subsequent final releases.

    In short, it’s exciting times to be a Flash dev for mobile devices, when Adobe and FlashDevelop are releasing such “One-click, one source-code base” tech.

    Also, separate thread have you seen: Unreal running in the Flash player?
    http://www.unrealengine.com/insiderblog/unreal_engine_3_comes_to_flash
    Tag that with captive-runtime and mobile games are set to go nuts!

  • October 5th 2011 at 1:32 pm

    Very great to know AIR 3 works so fast! Thanks for this post, Rich.
    @Philippe, I’ll never get tired to thank you for the FlashDevelop!

  • October 5th 2011 at 2:11 pm

    Thanks for the heads-up Philippe – I think the swf-version was left over from the way we build desktop games here :) But hey it won’t hurt either!

    Josu – You can get your app onto an iOS device easily (not as easy as Android, but still not TOO painful), my comment was just that publishing it for release on App Store does require either a Mac or a VM running. That may work too, but I’d be wary of risking a business model on it (for random little tests like this it’s ok though!)

  • October 6th 2011 at 7:08 am

    I’m sitting next to your partner in crime ilija as I type, but I’d love to test out the performance of your flixel engine on my iPhone for you. Send him the files and I’ll do a compile :D

  • October 6th 2011 at 11:32 am

    Thanks for the feedback everyone – I’ve packaged the source and assets together (along with the FlashDevelop project). So anyone who wants to try it on iOS grab the zip and eat your heart out. Just please send me the results (video ideally): http://sandbox.photonstorm.com/AIR3_Mobile_Flixel_Test.zip

  • October 6th 2011 at 11:47 am

    Richard why did you use FlashDevelop RC1 ?

  • October 6th 2011 at 4:51 pm

    @test84 – Because it’s the latest build! and comes with all these fun toys as standard.

  • Victor Grunn
    October 7th 2011 at 7:26 am

    Just a quick question, since I heard about this forever ago.

    I recalled that at one point Apple was cracking down on flash projects ported to the iPhone? Or did I misread/does that not longer apply?

    Great posts and great site. I’m about finished with my first flash game, and I couldn’t have done it without posts like the ones I’ve found on here.

  • Stu
    October 7th 2011 at 9:16 am

    @Victor, it no longer applies.

    Apple has allowed 3rd party apps for some time now.

    Flash Air is effectively packaged within the app before being deployed through the app store. This is basically the “captive-runtime” I mentioned earlier. It’s not available fro Android releases.

    Only bummer is, it’s not been optimised yet, so the whole 8megs of Air player is packaged up with your app, so your app file-size is automatically 8megs regardless of your content. Hopefully Adobe will be working on this.

  • Stu
    October 7th 2011 at 9:18 am

    Sorry… [ed] of above….

    It’s NOW available for Android releases. (Silly typos!)

  • October 8th 2011 at 2:22 pm

    brilliant post, just made a pure AS3 android test on HTC Desire in 30 mins using FD. will post on my blog shortly with comparison to Flixel. this rocks!

  • Victor Grunn
    October 10th 2011 at 7:43 am

    Thanks, Stu.

  • VarunK
    October 16th 2011 at 2:20 pm

    Nice! I got a game working on my android mobile and performance is pretty good.

    Thanks a lot.

  • Rick
    November 1st 2011 at 12:59 am

    Did you ever get a good performance result from any users on an iPhone 3GS?

  • Erro
    January 16th 2012 at 11:04 am

    “If you read Emanuele Feronato’s blog you’ll know that the title of this post is a play on one of his. He detailed in length the process you need to go through to create an iOS App using the Flash IDE. However you don’t actually need the Flash IDE at all. If anything the process is faster and less painful using the completely free FlashDevelop.”

    Well, actually, the reason it looks so painfull and long on Emanueles blog is because he went over the details for all the applying to the ios dev program and getting a dev certificate. Those steps compose about 95% of the post. Using FlashDevelop doesn’t mean you can skip those steps. They’re still needed to actually get your app for sale on an iDevice.

  • January 16th 2012 at 12:26 pm

    I said the *development* process is faster without the IDE. Getting it onto App Store is a pain in the ass no matter how you do it.

  • February 14th 2012 at 1:51 pm

    Heyo!
    Nice writeup!

    I tried your packaged files on my iPhone 4.
    ( http://sandbox.photonstorm.com/AIR3_Mobile_Flixel_Test.zip )
    The process was quite straightforward, no real problems.

    Not sure if the test is meant to be very taxing.
    I guess I got about 15 fps.
    Does this sound reasonable, or quite low?

    Used setting:
    target=ios-test
    and “set SCREEN_SIZE=iPhoneRetina”

    Didn’t adjust the screen size in the project, so had some white around it.

    Using an iPhone 4 with iOS 4.3.4 and Flex 4.5.1, Air 3.

    /Hannes

  • February 14th 2012 at 1:54 pm

    Hannes – interesting, you should have got more than 15fps (I certainly do on a iPhone 3GS) but that might be down to the retina display and pushing twice as many pixels. Or it might be the way it was packaged! Wasn’t meant to be a stress test btw, just to see if flixel would run at all really. Which it does. Sort of :)

  • February 14th 2012 at 2:52 pm

    Tried a bit more.
    Found out that the ios-test setting actually used the test-interpreter setting.
    “set TARGET=-test” made it a good deal smoother.

    /Hannes

  • Dividend09
    December 7th 2012 at 5:52 am

    Call to a possibly undefined method FlixelTest. error in

    var test:FlixelTest = new FlixelTest();

    how to fix this? :)

  • Dividend09
    December 8th 2012 at 8:08 am

    why my game is lag how to check and change the FPS? :)

  • KIeran
    January 18th 2013 at 7:31 pm

    You could publish to iOS without a MAC by using the macincloud service which is a cloud based MAC server, plus it has some good software and a great pay-as-you-go subscription tariff for money strapped indie gamers. Though i haven’t used it yet and i am not 100% certain it’s suitable.
    Just discovered this site. Some very useful posts. I’d like to know what the owner thinks of drag and drop 2D game engines like Construct 2 and Stencyl?

  • February 25th 2013 at 11:58 am

    Hello I trying to test this project on my samsung galaxy s3 (android 4.04 icecream sandwich) however I only get a black screen then the app becomes unrresponsive. Is it possible to fix this?

Make yourself heard