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