无尽重复滚动背景

我遇到了 AS3 和 AIR 的问题。我正在为带有飞机的智能手机开发一款横向卷轴游戏，我使用不同的背景作为图层。

首先：我使用 GPU 并且仅使用位图，质量设置为低。因此，性能设置均适合智能手机使用。

我使用绘图 API 将它们放入一个矩形中，并使用矩阵移动背景：

protected var scrollingBitmap:BitmapData;
protected var canvas:Graphics;
protected var matrix:Matrix;

public function move(dx:Number, dy:Number):void {
    matrix.translate(dx, dy);
    if(dx != 0) matrix.tx %= scrollingBitmap.width;
    if(dy != 0) matrix.ty %= scrollingBitmap.height;
    drawCanvas();
}

protected function drawCanvas():void {
    canvas.clear();
    canvas.beginBitmapFill(scrollingBitmap, matrix, true, true);
    canvas.drawRect(0, -scrollingBitmap.height, 1404, scrollingBitmap.height);
}

更新2（

看看这个：http:// Plasticsturgeon.com/2010/06/infinite-scrolling-bitmap-backgrounds-in-as3/ http://plasticsturgeon.com/2010/06/infinite-scrolling-bitmap-backgrounds-in-as3/

我用它来创建我的背景。

有了这个，我可以模拟我的飞机向右飞行，而不移动整个背景，并且我可以使用每次重复的小单个图形（对于前景层）。

对于背景层，我也使用这种方法，但是对于更大的图形，我仅以较小的飞机速度移动它来模拟远背景。

我的移动方法是在 Enterframe 事件上。所以我可以用飞机的“运动”来更新每一帧的背景。

)

该平面可以超过位图的高度。每次位图返回到窗口/屏幕时，都会出现很长的延迟。当飞机飞得非常快时，游戏也会开始滞后。

我的第一个方法是使用 .PNG 文件（但它们非常大：1-3MB 大小）。 我的下一个方法是使用 .GIF 文件（大小要小得多）。

两者都是一样的。所以不可能是这样的。

我读到了有关 draw() 和 copyPixels() 的内容，但我不知道如何使用它们来重复图像。

UPDATE1:

protected var scrollingBitmap:BitmapData;
protected var canvas:Bitmap;

protected function init(e:Event):void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    canvas = new Bitmap(new BitmapData(1404, scrollingBitmap.height, true), "auto", true);
    this.addChild(canvas);
    drawCanvas();
}

public function move(dx:Number, dy:Number):void {
    if(dx != 0) dx %= scrollingBitmap.width;
    if(dy != 0) dy %= scrollingBitmap.height;
    drawCanvas(dx, dy);
}

protected function drawCanvas(xPos:Number = 0, yPos:Number =  0):void {
    canvas.bitmapData.copyPixels(scrollingBitmap, new Rectangle(0, 0, 1404, scrollingBitmap.height), new Point(xPos, yPos), scrollingBitmap);
}

我认为你最好使用位图而不是使用带有填充的图形对象。 copyPixels 速度非常快。因此，您要做的就是简单地将像素复制到之前存在的任何内容之上，假设所有内容都是不透明的。如果一切都不是不透明的，您需要使用源位图作为其自己的 Alpha 数据，这样以前绘制的像素就不会显示出来。

让我们重新构建画布，使其成为位图而不是 MC。你的新代码将如下所示：

protected function drawCanvas():void {
   canvas.bitmapData.copyPixels(scrollingBitmap, new Rectangle(0, 0, scrollingBitmap.width, scrollingBitmap.height), new Point(0,0), scrollingBitmap);
}

哦，看看那个！这段代码不仅速度更快，而且只有一行代码！

编辑：添加工作代码

package  {
    import flash.display.MovieClip;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.Event;
    import flash.geom.Rectangle;
    import flash.geom.Point;


    public class EndlessBG extends MovieClip{
        //this one stays stationary, we're getting the pixels for the right side of the pic from here
        private var _source:BitmapData;
        //this is the one moving to the left (the pixels for the right side are not visible except for once a cycle);
        private var _movingPixels:BitmapData;
        private var _canvas:Bitmap;
        private var _xOffset:int = 0;
        private var _rect:Rectangle = new Rectangle();;
        private var _point:Point = new Point();

        public function EndlessBG() {
            super();
            _source = new BathroomStillLife();
            _canvas = new Bitmap(new BitmapData(_source.width, _source.height));
            _canvas.bitmapData.draw(_source);
            _canvas.x = stage.stageWidth/2 - _canvas.width/2;
            _canvas.y = 5;
            addChild(_canvas);
            addEventListener(Event.ENTER_FRAME, gameLoop);
            setGeometryDefaults();
            _movingPixels = new BitmapData(_source.width, _source.height);
            _movingPixels.copyPixels(_source, _rect, _point);
            //turn this on to watch red pixels be drawn where the source pixels are coming in
            //_source = new BitmapData(_source.width, _source.height, false, 0xFF0000);
        }

        private function gameLoop(e:Event):void {
            _xOffset--;//where the background is moving to
            if (_xOffset < -_source.width) {
                _xOffset = 0;
                //this doesn't seem to work correctly:
                //_movingPixels.scroll(_source.width, 0);
                _movingPixels = new BitmapData(_source.width, _source.height);
                _movingPixels.copyPixels(_source, _rect, _point);
            }
            trace(_xOffset);
            setGeometryDefaults();
            _movingPixels.scroll(-1, 0);
            //draw the moved part of the canvas
            _canvas.bitmapData.copyPixels(_movingPixels, _rect, _point);
            //If we stop here, we get a smear to the right
            //so, get the remaining pixels directly from the source
            //1) reset our rect and point to be to the right side
            _rect.x = 0;
            _rect.width = -_xOffset;
            _point.x = _source.width + _xOffset;
            //2) copy from the source
            _canvas.bitmapData.copyPixels(_source, _rect, _point);
        }
        private function setGeometryDefaults():void {
            _rect.x=0;
            _rect.y=0;
            _rect.width = _source.width;
            _rect.height = _source.height;
            _point.x = 0;
            _point.y = 0;
        }

    }

}

不太理想，对于博客文章来说还不够完善，但应该可以帮助您入门。

Edit:最终我确实写了博客文章 http://flexdiary.blogspot.com/2012/06/endless-scrolling-bathroom.html.