Android : AS3/Flash/AIR/TweenLite/ Big performance issues AIR using Tweenlite scale animations

on Thursday, October 9, 2014


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);
}




}


}

0 comments:

Post a Comment