Question

我创建了一款我想作为应用发布的小游戏。一切顺利，直到我偶然发现有关我的菜单的一些性能问题。我使用tweenlite的库来缩放和移动菜单的动画。

当我第一次尝试使用我的Galaxy S2时，它有点滞后（framedrops），但没什么大不了的，因为它是一部旧手机。但是现在我有oneplus（目前最快的手机），它仍在丢帧，耗费了大量的CPU

现在我想尝试一下blitmask缓冲区:( https://greensock.com/blitmask）但是因为这不是一张只展示其中一部分的大图片，而是缩放一个动画片段我想知道这是否会有所帮助。 SWF输出的演示：http://websitekeuken.nl/demo/bloktris-app.swf

最滞后的是开始动画或按“uitleg”标签，然后完全拖动项目以复制该动画。

有没有人有想法让这不丢帧或至少更顺畅？我的意思是手机目前可以运行整个3D游戏，没有问题简单的菜单动画应该没有问题吗？

我已经尝试过的事情： - 降低FPS; - 将渲染设置为Direct和GPU。 - 将所有内容隐藏到位图似乎工作的东西，但仍然没有很多成功。 - Flash CC演示的最新编译器

我真的希望有人可以帮我解决这个问题，我在这个问题上工作了10个小时。提前谢谢。

基本菜单类：

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




  }


}

Answer 1

首先，没有办法重新缩放位图既不是矢量img，也不是廉价的处理量。事实上，我总是避免我的应用程序中的所有rescale和淡入淡出补间。设置cacheAsBitmap它不会有帮助，事实上，我会更加有害，因为你在设置cacheAsBitmap = true时所做的就是告诉flash这个位图不会改变它的形式既不是它的旋转，然后，Tween Lite去提前更改它的每一帧，导致绘图算法“解锁”“cachedAsBitmap img”，编辑它，然后再次捕获它的位图，并将其上传到gpu ....每个该死的帧。

我的建议：删除所有rescale补间，并添加补间灯所提供的其他很酷的补间，让你有一些很棒的外观和感觉！

AS3 / Flash / AIR / TweenLite / Big性能问题AIR使用Tweenlite缩放动画

1 个答案: