1

左右にスクロールしながら画像をラップできる（ループごとに1ピクセルだけでなく、任意の速度もサポートする）AS3でBitmapDataベースのスクローラーを作成するための優れたソリューションはありますか？BitmapData.copyPixels（）とBitmapData.scroll（）のみを使用できる高速で軽量のスクローラーを作成しようとしています。

これまでのところ、私はこのコードを思いついた：

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);
        }
    }
}

カーソルキーで左右にスクロールできます。スクロールは、画像が1回折り返される場合にのみ正常に機能します。反対方向にスクロールすることを決定した場合、その間のどこかで座標が混乱し、スクロールバッファから領域がコピーされます。基本的に、ここでのこのブロックには作業が必要です。

            /* 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;
            }

... rect.xとpoint.xは、スクロール方向に応じてここで異なる設定をする必要がありますが、ループ全体を完全に複雑にしなければ、その方法がわかりません。より良い実装のためのヒントやアイデアは大歓迎です！

4

1 に答える 1

0

この質問は少し前に出されたものですが、回答がないままなので、2 セント追加します。

私が取り組んでいるプロジェクトのためにこれを理解しなければならず、次の解決策を思いつきました。一般的な考え方は、ビットマップを表示オブジェクトのグラフィックスに描画し、マトリックス変換を使用してビットマップ データのビューポートの x 座標と y 座標を制御することです。

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();
     }
}

Point オブジェクトの x と y の値を更新するだけで、ビットマップをスクロールできます。方程式に速度、加速度、摩擦を簡単に追加して、スクロールをより動的にすることができます。

于 2013-04-29T23:18:17.450 に答える