AS3 Wrapped-Around BitmapData Scrolling? - actionscript-3

Question

Does anyone have a good solution for creating a BitmapData-based scroller in AS3 that can wrap around an image while scrolling to the left and to the right (and also supports arbitrary speed, not just one pixel per loop)? I'm trying to write a fast and lightweight scroller that may only use BitmapData.copyPixels() and BitmapData.scroll().
So far I came up with this code:
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.ui.Keyboard;
[SWF(width="800", height="480", frameRate="60", backgroundColor="#000000")]
public class Main extends Sprite
{
private var _source:BitmapData;
private var _sourceWidth:int;
private var _buffer:BitmapData;
private var _canvas:BitmapData;
private var _rect:Rectangle = new Rectangle();
private var _point:Point = new Point();
private var _xOffset:int = 0;
public function Main()
{
_source = new Picture();
_sourceWidth = _source.width;
_rect.width = _source.width;
_rect.height = _source.height;
_canvas = new BitmapData(_source.width, _source.height, false, 0x000000);
_canvas.copyPixels(_source, _rect, _point);
_buffer = _canvas.clone();
var b:Bitmap = new Bitmap(_canvas);
b.x = stage.stageWidth / 2 - _canvas.width / 2;
b.y = 10;
addChild(b);
stage.addEventListener(KeyboardEvent.KEY_DOWN, function(e:KeyboardEvent):void
{
if (e.keyCode == Keyboard.RIGHT) scroll(10);
else if (e.keyCode == Keyboard.LEFT) scroll(-10);
});
}
private function scroll(speed:int):void
{
/* Update offset. */
_xOffset -= speed;
/* Reset rect & point. */
_rect.width = _sourceWidth;
_rect.x = 0;
_point.x = 0;
/* Reached the end of the source image width. Copy full source onto buffer. */
if (_xOffset == (speed > -1 ? -(_sourceWidth + speed) : _sourceWidth - speed))
{
_xOffset = -speed;
_buffer.copyPixels(_source, _rect, _point);
}
/* Scroll the buffer by <speed> pixels. */
_buffer.scroll(-speed, 0);
/* Draw the scroll buffer onto the canvas. */
_canvas.copyPixels(_buffer, _rect, _point);
/* Update rect and point for copying scroll-in part. */
_rect.width = Math.abs(_xOffset);
/* Scrolls to left. */
if (speed > -1)
{
_rect.x = 0;
_point.x = _sourceWidth + _xOffset;
}
/* Scrolls to right. */
else
{
_rect.x = _sourceWidth - _xOffset;
_point.x = 0;
}
trace("rect.x: " + _rect.x + " point.x: " + _point.x);
/* Copy the scrolling-in part from source to the canvas. */
_canvas.copyPixels(_source, _rect, _point);
}
}
}
You can scroll left/right with cursor keys. The scrolling works fine only if the image wraps around once. If deciding to scroll in the opposite direction somewhere in between it will mess up the coordinates to copy the region from the scroll buffer. Basically this block here needs work:
/* Update rect and point for copying scroll-in part. */
_rect.width = Math.abs(_xOffset);
/* Scrolls to left. */
if (speed > -1)
{
_rect.x = 0;
_point.x = _sourceWidth + _xOffset;
}
/* Scrolls to right. */
else
{
_rect.x = _sourceWidth - _xOffset;
_point.x = 0;
}
... The rect.x and point.x need to be set differently here depending on the scroll direction but I don't know how without completely over-complicating the whole loop. Any hints or ideas for a better implementation would be welcome!

Answer 1

This question was asked a while ago, but since it has remained unanswered I'll add my two cents.
I just had to figure this out for a project I'm working on and came up with the following solution. The general idea is to draw the bitmap into the graphics of a display object and to use a matrix transform to control the x and y coords of a viewport over the bitmap data.
public class Example extends Sprite
{
private var vx:Number;
private var vy:Number;
private var coords:Point;
private var shape:Shape;
private var bitmap:Bitmap;
private var bmd:BitmapData;
public function Example()
{
vx = 1.5;
vy = -3.0;
coords = new Point();
shape = new Shape();
bitmap = new Image(); // image, in my case is an embedded image
bmd = bitmap.bitmapData;
addChild(shape);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
coords.x += vx;
coords.y += vy;
// this is important!
// without it, bitmap size constraints are reached and scrolling stops
coords.x %= bitmap.width;
coords.y %= bitmap.height;
shape.graphics.clear();
shape.graphics.beginBitmapFill(bmd, new Matrix(1, 0, 0, 1, coords.x, coords.y), true, true);
shape.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
shape.graphics.endFill();
}
}
Now you can just update the x & y values of the Point object to scroll around the bitmap. You can easily add velocity, acceleration and friction to the equation to make the scrolling more dynamic.