StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAS3 Wrapped-Around BitmapData Scrolling?
text
Body
copied!<p>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().</p> <p>So far I came up with this code:</p> <pre><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); } } } </code></pre> <p>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:</p> <pre><code> /* 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; } </code></pre> <p>... 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!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload