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）。

源码文件：http://115.com/file/benapik7#背景循环滚动.rar，里有效果预览。