Moods, Videos

Tetris, Touch API and Android

18 Comments 04 May 2010

Tetris, Touch API and Android

Last weekend, I wanted to launch a Tetris game on my Android phone. After having tried some of them on the internet, I’ve decided to develop my own Tetris game, interacting with Touch and Gesture Events. The new Multitouch API introduced few months ago in Flash Player 10.1 can help developers to handle this new generation of events very easily. Classic approach: don’t reinvent the weel. A quick search on google: “open source as3 tetris”, and TADAAA!, I discovered this open source project: http://code.google.com/p/bigroom/wiki/TetrisGameEngine

This Tetris engine written in AS3 provides a sample. It took me few minutes to understand the basic behaviors of the engine. I compiled it using flash CS5, and was able to play with my keyboard (using the arrow keys). But, on my Android phone, I don’t want to display and use the native keyboard… I want to play with my fingers! Does it mean that I need to code a new project from scratch or switch to another langage ? Of course not. After having identified the Controler AS3 class, I’ve just added these lines of code to handle Touch Events:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
root.stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
private function onSwipe(evt:TransformGestureEvent):void{
   // MOVE TO THE RIGHT
   if(evt.offsetX > 0) _tetris.shiftRight();
   // MOVE TO THE LEFT
   if(evt.offsetX < 0) _tetris.shiftLeft(); 
   // MOVE TO THE BOTTOM OF THE SCREEN
   if(evt.offsetY > 0) _tetris.drop(); 
   // ROTATION
   if(evt.offsetY < 0) _tetris.rotateLeft();
}
Less than 10 lines of code!.. and my Tetris game is ready for Multitouch devices. The swipe event is a fast move to a direction. On my Android phone, I can use one finger to dispatch such an event (on other devices, I may use two or three fingers at the same time).
Key takeaways:
- Thanks to the Flash community, I was able to find in a minute an open source project and run a complete Tetris game on my laptop.
- Thanks to the new Flash Player API, it took me two minutes to add 6 lines of code and handle Touch events.
- I’m using the SAME PROJECT to handle keyboard events and Touch events. Depending on his device, the user can choose to use his keyboard or his fingers.
This video will show you the Tetris game running on my laptop (with keyboard inputs) and on my Android phone (with Touch events):

Flash Tetris game on Android phones from michael chaize on Vimeo.

Post to Twitter

Your Comments

18 Comments so far

  1. Paul Ferrie says:

    June is a long time away…
    Can’t wait :)

  2. Dhaya says:

    I did the same, a few weeks ago. I stumbled upon this code http://wonderfl.net/c/f2Xu/ and I wanted to see how it would behave on a mobile device. I added less than 10 lines of Accelerometer handling code, and less than five minutes later, i played with it on my mobile phone.
    As easy as pie!

  3. abavisg says:

    Xaxa maybe we should email this to Mr Jobs…

    Really nice post!

  4. Loved the simple and sweet presentation.

  5. Kobe C says:

    Love it. I love Android and flash.

  6. James says:

    How exactly do you take a .fla file and export it to AIR 2.0 then create a .apk file from that? Do you need the AIR 2.0 Beta?

  7. admin says:

    You’ll get an answer in the coming weeks, and I’ll post how I made it. You’ll see how easy it is.

  8. mey says:

    On what version of androids does AIR2 run on?

  9. admin says:

    You’ll get the answer next week at the Google I/O event.

  10. mey says:

    Thanks :)

  11. Sandro says:

    I am trying to recreate your steps as a tutorial, but I don’t understand how you imported the .fla, modified the .as and exported the .apk with Flash CS5. Thanks!

  12. Andy says:

    Hi, did you have any problems getting the TransformGestureEvent to work on the emulator. Doesn’t seem to want to accept gesture events for me for some reason…

  13. admin says:

    I don’t think it can work on the emulator. You can try Device Central CS5 to get a Multi-touch emulator for Flash.


Trackbacks/Pingbacks

  1. Ako rozšíriť Tetris o multi-touch? - May 5, 2010

    [...] verziu článku nájdete na blogu Michaël Chaize. A pokiaľ chcete vedieť, niečo viac o histórii Tetrisu, určite si pozrite film Tetris – [...]

  2. Scott Kelby's Photoshop Insider Blog » Photoshop & Digital Photography Techniques, Tutorials, Books, Reviews & More » Blog Archive » The State of Flash – “Im not dead yet.. “ - May 12, 2010

    [...] another cool example. Click on this link to see Michael Chaize from Adobe updates his keyboard based inputs in Flash to touch based events in about [...]

  3. Top Flash Misperceptions : Flash cannot run on touch devices at Mike Chambers - May 12, 2010

    [...] TETRIS, TOUCH API AND ANDROID [...]

  4. Photography Techniques - May 13, 2010

    [...] another cool example. Click on this link to see Michael Chaize from Adobe update his keyboard based inputs in Flash to touch based events in about [...]

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

    [...] Android Tetris [...]

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

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes