Sunday, 23 January 2011

Optimizing Drag and Drop for Mobile Applications

by Lee Brimelow

We have been hearing some reports recently about poor performance when dragging objects around in mobile Flash projects. When I say mobile I’m referring to both AIR and in the browser applications. While we are looking into the issue, I thought it would be good to remind everyone of some optimizations that can help you get the best performance possible. The code below describes a simple FLA with a box MovieClip on the stage.

Use GPU Acceleration
This is more of a general performance enhancement but it will also help with dragging objects. You should only use this if the contents of your clip are not changing often. For this example though it is definitely appropriate. Here is the code:

1
2
box.cacheAsBitmap = true;

box.cacheAsBitmapMatrix = new Matrix();

Using the Correct Events
Choosing the right events to respond to is the single biggest thing you can do to improve performance of dragging. Unlike the desktop, you should NOT use the MOUSE_MOVE event. It fires way more events than you need and can really bog things down. If you are building a game that already has a main game loop (ENTER_FRAME) then you should add the drag logic there. Remember that on mobile you should not have multiple timers or frame events. If you don’t already have a frame event running you can stick with the standard startDrag and stopDrag events. In addition, do not use any of the touch events unless you really need to as they have more overhead than regular mouse events. Here is the code for drag and drop using an existing loop:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var isDragging:Boolean = false;



box.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

box.addEventListener(MouseEvent.MOUSE_UP, onUp);

stage.addEventListener(Event.ENTER_FRAME, loop);



function onDown(e:MouseEvent):void

{

    isDragging = true;

}



function onUp(e:MouseEvent):void

{

    isDragging = false;

}



function loop(e:Event):void

{

    if(isDragging)

    {

        box.x = mouseX;

        box.y = mouseY;

    }

}

Be Careful With Libraries
If you are using game frameworks or tweening libraries, do so cautiously as they may not have optimized for mobile. Creating a single frame event for your game is useless if all the libraries you are using are spawning a bunch of other events as well. This is not to say that you shouldn’t use external libraries. It just means that you need to look a little closer at what they are doing when deploying to a mobile device.

Flatten Your DisplayList
Another important thing to do when deploying to mobile is to try and flatten your display list as much as possible. This means that you should avoid nesting objects wherever possible. You should also stop the propagation of events so that you don’t incur the cost of that event bubbling to the surface unnecessarily. Here is an example of how to do that:


1
2
3
4
5
6
7
8
box.addEventListener(MouseEvent.MOUSE_DOWN, onDown);



function onDown(e:MouseEvent):void

{

    e.stopPropagation();

    // based on comments, this is

    // not a good idea -> e.stopImmediatePropagation()

}

Do you have any other tips that you’ve found? Please leave them in comments.


Optimizing Drag and Drop for Mobile Applications

2 comments:

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    Android app development| Android app developer|

    ReplyDelete
  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    Android apps development| Android app development companies| Android phone app development|

    ReplyDelete

Thank you for your comment.