Big performance issues AIR using Tweenlite scale animations

[matthy]

Hey, i have created a little game that i want to release as an app.

All went well until i stumbled on some performance issues regarding the my menu.

I use tweenlite's libary for scaling and moving animations of my menu.

 

When i first tried it on my Galaxy S2 it was a bit laggy (framedrops) but no big deal as it is an old phone.

However now i have the oneplus one (the fastest phone currently) and it is still dropping frames and consuming a hell lot of CPU

 

Now i have thougth about trying the blitmask buffer: (https://greensock.com/blitmask) but as this is not about a big picture only showing part of it, but scaling a movieclip i was wondering if this would even help.

A demo of the SWF output: http://websitekeuken.nl/demo/bloktris-app.swf

 

The most laggy is the starting animation or press the "uitleg" tab and then drag the item down completely to replicate that animation.

 

Does anyone have an idea to make this not dropping frames or at least a lot smoother?

I mean phones can currently run whole 3d games with no trouble a simple menu animation should be no problem rigth?

 

Things i already tried:

- lowering the FPS;

- setting render to Direct and GPU.

- covert everything to bitmap what seems to work sligthly but still not a lot of succes.

- newest compiler of the Flash CC demo

 

I really hope someone can help me out with this one i am stuck working 10 hours on this problem.

Thanks in advance.

 

 

I really hope someone can help me out with this one i am stuck working 10 hours on this problem.

Thanks in advance.

 

The Base Menu class:

 

package com.eigen.menu

{

/**

* ...

* @author matthijs

*/



// http://www.polymer-project.org/apps/topeka/



import com.greensock.BlitMask;

import com.greensock.easing.Bounce;

import com.greensock.easing.BounceIn;

import com.greensock.easing.Elastic;

import com.greensock.TimelineLite;

import fl.transitions.easing.Regular;

import flash.display.DisplayObject;

import flash.display.DisplayObjectContainer;

import flash.display.MovieClip;

    import flash.display.Shape;

import flash.display.Stage;

import flash.errors.IllegalOperationError;

    import flash.events.MouseEvent;

    import flash.events.Event;

    import flash.utils.getTimer;

    import com.greensock.TweenLite;

    import com.greensock.easing.Strong;

    import com.greensock.plugins.TweenPlugin;

    import flash.geom.Rectangle;



// todo save inbouwen

// http://stackoverflow.com/questions/24074092/flash-as3-save-and-load-data-for-ios-and-android-games

public class DragMenu extends MovieClip 

{

private var bounds : Rectangle;

        private var mc : MovieClip;

var startX:Number, startY:Number;

var border:MovieClip;

var menuObjects:MenuObjects;

var lockSwipe:Boolean = false;



var isTransitioningOut = false;



public function DragMenu() 

{

startX = this.x;

startY = this.y; 

        }



public function reboot()

{ 

TweenLite.killTweensOf(this);

isTransitioningOut = false;



visible = true;

alpha = 1;



this.addEventListener(Event.ENTER_FRAME, handleCollision)

this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

}



public function init(menuObjects:MenuObjects)

{

this.visible = false;

this.border = menuObjects.border;

this.menuObjects = menuObjects;

}



public function show(type:String = ""):void

{

debug("show");

reboot();



if (type == "slide")

animateInSlide();

else

animateInElastic();

}







function animateInElastic()

{

debug("animateInElastic");



x = startX

y = startY;



scaleX=0;

scaleY=0;



//var bm:BlitMask = new BlitMask(this, 300, 300, this.width, this.height, true);

//TweenLite.to(content, 30, {x:-3000, onUpdate:bm.update});



//TweenLite.to(this, 4, { scaleX:1, scaleY:1, ease:Elastic.easeOut, onUpdate:bm.update } );

TweenLite.to(this, 4, { scaleX:1, scaleY:1, ease:Elastic.easeOut } );

}



function animateOutElastic()

{

debug("animateOutElastic");



var myTimeline:TimelineLite = new TimelineLite();

var duration:Number = 1;



myTimeline.add(TweenLite.to(this, duration, { x:startX, y:1024 + 1024/2, alpha:0 } ),

0,

"start",

0);



myTimeline.add(transitioningOutDone, duration);



}



function animateInSlide()

{

debug("animateInSlide");



scaleX = 1;

scaleY = 1;

y = -1024 + 1024/2;

TweenLite.to(this, 2, { y:1024/2, ease:Bounce.easeOut } );

}



function animateOutSlide()

{

debug("animateOutSlide");

isTransitioningOut = true;



var myTimeline:TimelineLite = new TimelineLite();



var duration:Number = 2;



myTimeline.add([new TweenLite(this, 0.3, { scaleX:1, scaleY:1, ease:Regular.easeOut }),

new TweenLite(this, duration, { y:1024 + 1024 / 2, ease:Bounce.easeOut } )],

0,

"start",

0);



myTimeline.add(transitioningOutDone, duration);



}



protected function transitioningOutDone()

{

if (isTransitioningOut == false)

return;



x = startX;

y = startY;

visible = false;



isTransitioningOut = false;

}

         

        private function mouseDownHandler(event:MouseEvent):void {





if (lockSwipe)

return;



this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);



TweenLite.killTweensOf(this);

            scaleX=1;

scaleY = 1;

alpha = 1;



var rec:Rectangle =  new Rectangle(this.width/2,this.height/2-200,0,2000);

this.startDrag(false, rec);

        }





        private function mouseUpHandler(event:MouseEvent):void {



this.stopDrag();



TweenLite.killTweensOf(this);

scaleX=1;

scaleY = 1;



TweenLite.to(this, 4, { x:startX, y:startY, ease:Elastic.easeOut } );

        }



      function handleCollision( e:Event ):void

{

if (lockSwipe || isTransitioningOut)

return;



if(border != null && this.hitTestObject(border))

{

trace (this.name + "handleCollision");



trace("x = " + x);

trace("y = " + y);

trace("scaleX = " + scaleX);



this.stopDrag();



this.removeEventListener(Event.ENTER_FRAME, handleCollision)

this.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

this.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);



TweenLite.killTweensOf(this);

animateOutElastic();



switchTo();

}

}



public function switchTo():void

{

throw new IllegalOperationError("Must override Concreate Class"); 

}



protected function debug(message:String)

{

trace(this.name + " " + message);

}





  }



}

[Carl]

Optimizing Air for mobile performance is quite a fine art. Frankly, its not my area or expertise.

What you are experiencing is a rendering bottle-neck on your device and not really anything related to GSAP.

 

I noticed the text is really jittery when you are scaling, I'd definitely experiment with trying to fix that... maybe change anti-alias settings, use a different font, make sure it is embedded properly etc. 

 

Vectors are great for their clarity and small file size, but when it comes to scaling them it requires all the formulas, curves, paths to be re-calculated and re-drawn which can be a lot of work for under-powered devices and even powerful desktops show some stress here as well. 

 

So like you mentioned, using bitmaps and not scaling is probably the best route for smoothness.

 

From the people still using Flash for mobile development that I follow, it seems that most have adopted using frameworks like Starling for  60fps hardware-accelerated 2D apps. http://gamua.com/starling/ 

 

Amazing Performance, familiar APIStarling is a pure ActionScript 3 library that mimics the conventional Flash display list architecture. In contrast to conventional display objects, however, all content is rendered directly by the GPU — providing a rendering performance unlike anything before. This is made possible by Flash's "Stage3D" technology.

 

 

My feeling is that if you are going to stick to using the regular Flash display list you are going to have to work in realm of some fairly low expectations / limits. 

I regret that I don't have better news for you. I would recommend though that you ask around the Air forums as there are most likely folks with more experience with this stuff. 

[matthy]

Hi Carl, thank you for the reply. I sucks that it works out this way.

 

"I noticed the text is really jittery when you are scaling, I'd definitely experiment with trying to fix that..."

I think i can fix that if only already to just push it all down to bit map.

 

The biggest problem still is the framedrops. Maybe animations with the starling framework can solve that but it sucks to start (partially) over again and learn a whole new framework.

 

do you think the blitmask can be of any help? or does that only do work for scaling of large MC's