Question

这是我使用AS3所做的：

var BGround1:Background=new Background();
var BGround2:Background= Background();
stage.addChild(BGround1);
stage.addChild(BGround2);
addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void
{

     BGround1.x -= scrollSpeed; 
     BGround2.x -= scrollSpeed; 
     if(BGround1.x <= -BGround1.width)
     {
           BGround1.x =BGround2.x + BGround2.width;
     }
     else if(BGround2.x <= -BGround2.width)
     {
           BGround2.x = BGround1.x + BGround1.width;
     }

}

但是，如果我将scrollSpeed设置得太高，则移动不顺畅。有没有办法制作流畅的动画？提前谢谢。

Answer 1

Hungry Hero游戏具有流畅的无限滚动背景，并且不是框架式的。游戏是开源的，作者有video tutorial解释他是如何实现你所需要的。

基本上，每个背景图层都有一个滚动速度 parallaxDepth （以实现视差效果）并且有一个变量来控制整体滚动速度 _speed （因为英雄喝咖啡，滚动速度增加。）

以下是代码的一部分，但我建议观看他的视频教程并在Github上浏览源代码。

// overall speed
var _speed = 1;

bgLayer1 = new BgLayer(1);
bgLayer1.parallaxDepth = 0.02;
this.addChild(bgLayer1);

bgLayer3 = new BgLayer(3);
bgLayer3.parallaxDepth = 0.5;
this.addChild(bgLayer3);

private function onEnterFrame(event:Event):void
{
    // Background 1 - Sky
    bgLayer1.x -= Math.ceil(_speed * bgLayer1.parallaxDepth);
    // Hero flying left
    if (bgLayer1.x > 0) bgLayer1.x = -stage.stageWidth;
    // Hero flying right
    if (bgLayer1.x < -stage.stageWidth ) bgLayer1.x = 0;


    // Background 3 - Buildings
    bgLayer3.x -= Math.ceil(_speed * bgLayer3.parallaxDepth);
    // Hero flying left
    if (bgLayer3.x > 0) bgLayer3.x = -stage.stageWidth;
    // Hero flying right
    if (bgLayer3.x < -stage.stageWidth ) bgLayer3.x = 0;    
}

Answer 2

如果您需要在更短的时间内进一步移动背景（这是您的scrollSpeed正在改变的那个），那么您只有2个选择：

1）将背景区域移动到更大的块中（这将获得您描述的生涩效果） 2）更频繁地移动较小的块。

鉴于您的代码是framebound，更频繁地移动的唯一方法是增加帧速率（这只能达到一个点）。如果您的应用程序已经低于设置的帧速率运行，那么您需要查看原因，以及您可以采取哪些措施来改进它（位图缓存？Stage3D？）

之后你进入了运动效果领域（例如运动模糊），这超出了这个问题的范围。

如何在Flash中创建无限的SMOOTH滚动背景？

2 个答案: