Using bitmap data to draw massive image

I am making a snow boarding game in AS3. The problem I am having is that I want to leave a trail in the snow behind the board.

I have had a think and feel that the best way of achieving this would be to use the lineTo() method to draw a line form the snowboards previous position to its current position. If I do this all of the w开发者_高级运维ay down the slope I would end up with a line almost 23000 pixels long which seems extremely large and will have a major impact on performance.

If I were to convert the trail movieclip to a bitmap would it improve performance? I am targeting a minimum of flash player 9 which I have found to have issues when handling bmp's over 2880 pixels so I think this method might not work.

Can anyone think of a clean and fast solution?

Thanks in advance

You could store a few values in a fixed length Vector/Array and keep updating a single value while shifting the others (so they are a bit 'out of date'):

var ptsNum:int = 25;
var pts:Vector.<Point> = new Vector.<Point>(ptsNum,true);
for(var i:int = 0 ; i < ptsNum ; i++) pts[i] = new Point(mouseX,mouseY);
this.addEventListener(Event.ENTER_FRAME, update);

function update(event:Event):void{
    //update
    for(var i:int = 0 ; i < ptsNum-1 ; i++) pts[i] = pts[i+1];
    pts[ptsNum-1] = new Point(mouseX,mouseY);
    //draw
    graphics.clear();
    graphics.moveTo(pts[0].x,pts[0].y);
    for(i = 0 ; i < ptsNum ; i++){
        graphics.lineStyle(i,0,i/ptsNum);
        graphics.lineTo(pts[i].x,pts[i].y);
    }
}

I'm using two for loops in the update just to split the updating from the drawing, so it's easy to understand. Of course, you can use a single for loop if you wish, or use something like forEach() for the shift, up to you.

If you want to draw a trail with a BitmapData, you can redraw a rectangle(or shape of your boarder) into a BitmapData, and use a ColorMatrix for the fade:

var sw:int = stage.stageWidth,sh:int = stage.stageHeight;
var bd:BitmapData = new BitmapData(sw,sh,false,0);
var pMouse:Point = new Point();//previous mouse position
var zero:Point = new Point();
var fade:ColorMatrixFilter = new ColorMatrixFilter([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.95,0]);//alpha 0.95
var r:Shape = new Shape();r.graphics.beginFill(0x009900,0.9);r.graphics.drawRect(-10,-15,20,30);//a tall rect
addChild(new Bitmap(bd));
addEventListener(Event.ENTER_FRAME, update);

function update(event:Event):void{
    r.x = mouseX;
    r.y = mouseY;
    r.rotation = Math.atan2(mouseY-pMouse.y,mouseX-pMouse.x) * 57.2957795;//rotate to mouse
    pMouse.x = mouseX;
    pMouse.y = mouseY;
    bd.draw(r,r.transform.matrix);//draw the rect at it's current position
    bd.applyFilter(bd, bd.rect, zero, fade);//apply the alpha colorMatrix
}

HTH

In general, moving and scaling bitmaps should be faster than vector graphics. However, if you use filters and pixel modification methods (like bitmap.draw()) a lot, this will degrade performance. In any case, you should always separate large bitmaps like that into smaller chunks and set everything outside of the visible screen area to visible = false;.