Flash游戏背景的循环滚动实现

Flash游戏背景的循环滚动实现    by：童年

我们在做flash游戏的时候有时候要用到背景滚屏技术，今天在天地会看到一个兄弟问这方面的问题，咱们就来探讨下怎么循环滚动背景图片吧。

• 首先我们需要一张宽度比舞台Stage宽的一张位图，在这里，我在FlashIDE里面做了个元件，没有用位图。导出链接为Background，如下图所示。

设置文档类：BgLoop

package
{
    import flash.display.Sprite;
    import flash.events.Event;
                                                         
    /**
     * ...
     * @author Childhood
     */
    public class BgLoop extends Sprite
    {
        private var bg:Sprite;
        private var bgClone:Sprite;
        private var speed:Number;
        private var offSet:Number;
        public function BgLoop():void {
            speed = -5.0;
            bg = new Background();
            bgClone = new Background();
            offSet = bg.width - stage.stageWidth;
            addChild(bg);
            addChild(bgClone);
            initPos();
            addEventListener(Event.ENTER_FRAME, loopBg);
        }

private function initPos(dist:Number = 0):void
        {
            bg.x = 0 - dist;
            bgClone.x = bg.width - dist;
            bg.y = bgClone.y = 120;
        }
                                                          
        private function loopBg(e:Event):void
        {
            bg.x += speed;
            bgClone.x += speed;
            if (bgClone.x + bgClone.width <= stage.stageWidth) {
                initPos(offSet);
            }
        }
    }
}

• 关键代码在29、30、39、40行，为方便说明，我用3幅图来解释下。

• 图1：bg和bgClone的初始位置，他们的y坐标我是随便给的。但x坐标可不是随意的哦。

图1

• 图2：当bg和bgClone往左运动到bgClone的右边界在舞台右边界这个临界时，我们需要将bg和bgClone的位置重置为图3画面的中第二行图形，他们的舞台显示是一样的。

图2

• 图3：我们在舞台范围内看到的图形在图2中是属于bgClone的，但为了循环，现在需要将舞台上的图形重置为bg的，条件就是bg在舞台上的显示需要和bgClone的显示位置一摸一样，不能有偏差。可以看到图2的舞台显示和图3的第二行图形的舞台显示是一样的，其实就是图1的bg和bgClone整体往左移动offSet距离。（或者可以认为是图2的2张图整体往右移动bg.width长度）

图3

当然我们也可以把2个图合成一个图，当这个合成图的右边界往左运动到达舞台的右边界这个界限时，需要把此时大图的x坐标设置为（x+大图.width/2）。