Tutorials, Videos

AIR and the Accelerometer

25 Comments 21 April 2010

AIR and the Accelerometer

Doodle Jump is definitely my favorite game on the Apple’s phone. The game play is only based on the accelerometer of the phone. The good news is that flash Player 10.1 and AIR 2.0 can access the accelerometer thanks to a new API. Traveling back from Germany, I got two hours in the train to test this new API and develop a little Flash game: Icare (“Icarius”). As the character in Greek mythology, Icare tries to escape Crete by flight… but he can only fall to his death at the end of the game.

It’s amazing to see that less than 180 lines of code are necessary to run this game. This is the beauty of Flash and ActionScript 3. The new Accelerometer API is quite simple:

var myAcc:Accelerometer = new Accelerometer();
myAcc.addEventListener(AccelerometerEvent.UPDATE, onAccUpdate);

function onAccUpdate(evt:AccelerometerEvent):void{
    accX = evt.accelerationX;
}

In this game, I just need to get the acceleration on the X-axis. It will control Icare to make him fly to the left, or to the right. I’ve used an easing function to give a natural move to my character on every frame (ENTER_FRAME event):

MyIcare.x -= (MyIcare.x - (MyIcare.x + accX * 10))*0.6;

To generate the clouds (the sticks in the original Doodle Jump game and in my code), I’m using the Object pooling technic detailed in the Flash Optimization guide for mobile devices. First I create a Vector object that will store my five clouds:

var myVect:Vector.<MovieClip> = new Vector.<MovieClip>(5,true);

Then I loop on the MovieClips to create them once and store them in the Vector object:

for (var i:int=0; i< 5; i++){
   tempStick = new stick;
   tempStick.x = Math.random()*stage.stageWidth;
   tempStick.y = 0 + i*stage.stageHeight/6;
   myVect[i] = tempStick;
   addChild(tempStick);
   tempStick.cacheAsBitmap = true;
}

Storing the clouds/sticks optimizes your code, as you don’t need to re-instantiate the objects. When they are out of the screen, just move them.

for (var k:int=0; k< 5; k++){
     tmpMc = myVect[k];

     if(tmpMc.y > stage.stageHeight){
        tmpMc.y = -5;
        tmpMc.x =  Math.random()*stage.stageWidth;
     }
}

Now, here’s the fun part. Using Device Central CS5, I’m able to debug my application simulating the accelerometer! A new tab displays a 3D view of my phone, and I can play with it to emulate the orientation of my phone in the space. Then, I ‘m able thanks to Flash C5 to package and run my game on my Apple’s phone. Thanks to the private beta of AIR on Android, I’m also able to run my game on my Google’s phone. One code, several screens. I like that, don’t you?

Here is the source code of my application (I’ve packaged a classic Flash FLA file so that you can easily test my game using Device Central CS5): http://www.riagora.com/pvt_content/icare/accelerometer_icare_debug.fla

To get notified when the AIR beta for Android will be publicly available, click on this link.

Here is a video of my game running on my PC with Device Central CS5 for testing purposes, on my Apple’s phone, and on my Google’s phone.

Post to Twitter

Your Comments

25 Comments so far

  1. mapetek@gmail.com says:

    Hi, I’ve told you about a little problem about Accelerometer. Everything looks right… I wonder what is wrong? I appreciate if you take a look.
    http://android.developerscrew.com/example.zip
    Thanks!

  2. admin says:

    oh that’s funny. I made exactly the same mistake the first time I tried to play with the accelerometer API.
    Move your accelerometer definition out of the constructor and it will work. You should obtain something like this:
    private var accX:Number = 0;
    private var accY:Number = 0;
    private var acc:Accelerometer = new Accelerometer();

  3. mapetek@gmail.com says:

    oh, that’s really funny but isn’t it weird :)
    btw thanks a lot!

  4. Adam says:

    Hi!
    My Flash CS3 cannot open your example source code. What progam should I use to open it ?
    Please help.

  5. John says:

    Hi!
    Can you tell me the code part, that not allows Icare to escape the upper part of screen ? :)
    I made a similar game, but i cannot code that part.

  6. Tell me please says:

    Just please tell me, why all my comments always deleted? -.-

    Please answer me here the reason:
    joying@citromail.hu

  7. admin says:

    I guess you need Flash CS5. You can get the trial version on adobe.com

  8. admin says:

    The link to the source code is available. Basically, the trick consists in detecting if the character is in the middle of the screen. If it’s the case, then everything else must move except him

  9. admin says:

    Sorry… I have to login in my admin console to approve the comments. Now you’ll automatically be approved, don’t worry :)

  10. Kevin says:

    Hello, i have test the game on iPhone4, its really slow i think. Is there a workaround to make it faster.

  11. admin says:

    It should be super fast. Have you activated the GPU mode ?

  12. Kevin says:

    yes i have enabled GPU mode. With resolution standard the fps are 30 with resolution high the fps are about 13-15. Is there an other way to export to ipa.

    http://imageshack.us/photo/my-images/838/icare.png/

  13. ochko says:

    first of all, it’s so helpful tut for me. And i want to ask you some questions.
    i wanted to create accelerometer maze. But i have one problem. i don’t know how to make maze walls which are stoping acceleration of ball. Hope you can help me. :)

  14. gerry says:

    Hi. I have been looking for you for ages for the doodle jump/Icarius code. Now I have found the page – the download link has expired or at least doesn’t work. Is it possible to provide another link for the source code PLEASE!
    Thanks in advance.

  15. Gerry says:

    Thank you very much. I have just downloaded it and it’s great. Can I use the same graphics in my game?
    I am going to add quiz screens every time you get to a certain level. ie: It’s going to be for teaching English.
    Is this the right place to ask questions like how to add keyboard controls instead of being a mobile game etc… or shall I post in other forums?
    Thank you very much in any case.

  16. Sachin Bhatt says:

    Hello Michael, I just created a simple accelerometer based app (FB4.6/Air3.7). App ran fine on most iOS devices but gave worst result (even no result at times) on android device. Sometimes the device nearly chocked until I had to hard boot it. I can submit the code if you ask but may you just please give an idea if you ever faced such problem with any android device ? I read the comments by mapetek@gmail.com and your reply to him but could not download code from the link he gave; So I am not sure if we faced similar problem (though I already modified code lines as you suggested). It will be great if you could guide me further on this. Thanks and Regards, Sachin.


Trackbacks/Pingbacks

  1. uberVU - social comments - April 22, 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by mchaize: Blogged on riagora.com: “#AIR 2.0 and the Accelerometer API” Discover my #Flash game on mobile devices. http://bit.ly/9IoJwp #adobe…

  2. Ateliers Flex en France « Code moi un mouton - April 26, 2010

    […] Ateliers Flex en France 26 04 2010 BaaO et Adobe organisent des ateliers de découverte de la technologie Flex 4 en province. Ce sont des journées gratuites sous forme d’atelier pour prendre en main Flash Builder 4. Voici les dates: – Jeudi 6 Mai 2010 à STRASBOURG – Mercredi 26 Mai 2010 à LILLE – Vendredi 27 Mai 2010 à LYON – Lundi 31 Mai 2010 à TOULOUSE – Lundi 14 Juin 2010 à MARSEILLE – Mardi 15 Juin 2010 à RENNES – Mardi 22 Juin 2010 à GRENOBLE L’idée est de venir avec son laptop, et de suivre une formation avec un expert Flex. PLus de détails ici: http://baao.com/BaaO/Formation_et_accompagnement_flex.html Sinon, je vous présente ici le résultat de mes tests de l’API Accelerometer du Flash Player 10.1 sur smartphones. Je voulais recoder un mini doodle jump. J’explique ici comment j’ai réalisé l’application. […]

  3. PIA Blog / Productivity by Design » Notre revue de presse (21/04/2010) - April 26, 2010

    […] : d’ailleurs, une vidéo montre comment simuler l’accéléromètre sous Flash CS5. Consulter l’article  Nouvelles versions pour LiveCycle Ds et BlazeDsCes deux produits reçoivent de nombreuses […]

  4. AIR, Android and the microphone | RIAgora - August 19, 2010

    […] I also used the “Nintendo DS trick” for gaming interactions. If you blow on your phone, then you’ll see Mary Poppins fly. Using the accelerometer, you can make her move from left to right on your screen. I’ve already detailed how to use the accelerometer in this article: http://www.riagora.com/2010/04/air-and-the-accelerometer/ […]

  5. Air Android – Utilisation de l'Accelerometer dans une application Air - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3 - September 5, 2010

    […] AIR and the Accelerometer […]

  6. AIR 2.5 is live | RIAgora - October 11, 2010

    […] Play with the Accelerometer API. Read my technical tutorial: http://www.riagora.com/2010/04/air-and-the-accelerometer/ […]

  7. swf.com.tw » 《Adobe AIR行動裝置跨界開發》簡報 - December 29, 2010

    […] AIR and the Accelerometer(包含一個類似Doodle Jump遊戲的原始碼) […]

  8. Air 2.5 et stratégie multi-terminal | Blog MTI - June 17, 2012

    […] Accéléromètre […]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes