How to increse performance of raster scrolling on Mac ?

Question

I have a game with a big raster map

Now we are using jpeg (4900x4200)

And durring the game we need to scroll through this map.

We use the following:

Class Map extends mx.containers.Canvas

and mx.controls.Image on it

In constructor we have:

public function Map() {
        super();
        image.source = ResourceManager.interactiveManager.map;//big image
        addChild(image);
......
}

for scrolling we are use:

    if(parentAsCanvas==null){
        parentAsCanvas = (parent as Canvas);
    }

    parentAsCanvas.verticalScrollPosition = newX;
    parentAsCanvas.horizontalScrollPosition = newY;

In windows, we have very good performance. In Linux and Mac in flashplayer we have a good performance too.

But in browsers performance is quite slow! What can we do to resolve it?

Answer 1

It's slow because you're rendering a large image all the time.

Here are a few things that cross my mind:

• Try using the scrollRect property in a Bimtap object holding your image BitmapData to display just the visible area then use the scrollRect x and y to move to a new region
• Try using a BitmapData the size of the viewable area and use copyPixels() to get the right area to display, again using a rectangle
• Try using BitmapData.scroll()

Here are a few snippets:

scrollRect:

//assuming map is BitmapData containing your large image
//100x100 is a test scroll area
var scroll:Rectangle = new Rectangle(0,0,100,100);
var bitmap:Bitmap = new Bitmap(map);
bitmap.scrollRect = scroll;
addChild(bitmap);

this.addEventListener(Event.ENTER_FRAME, update);
function update(event:Event):void{
    scroll.x = mouseX;
    scroll.y = mouseY;
    bitmap.scrollRect = scroll;
}

copyPixels:

var scroll:Rectangle = new Rectangle(0,0,100,100);
var scrollPoint:Point = new Point();
var map:BitmapData = new Map(0,0);
var bitmap:Bitmap = new Bitmap(new BitmapData(100,100,false));
bitmap.bitmapData.copyPixels(map,scroll,scrollPoint);
addChild(bitmap);

this.addEventListener(Event.ENTER_FRAME, update);
function update(event:Event):void{
    scroll.x = mouseX;
    scroll.y = mouseY;
    bitmap.bitmapData.fillRect(scroll,0xFFFFFF);
    bitmap.bitmapData.copyPixels(map,scroll,scrollPoint);
}

Not perfect, but it should give you an idea

HTH, George

Answer 2

I've read the following acrticle http://www.insideria.com/2008/04/flex-ria-performance-considera.html

I and i found the resolve of my problem.

If i open my SWF in browser as "http://host/myswf.swf" I have huge performance lose in browser as the reason work LaoyoutManager, that recalculates positions and sizes of all canvases in the application. And it process eats more than 60% of performance capacity.(Yep, we have a lot of Canvases in our application).

And when i putted my application in contant-size html block in html page, all problems were go away! I've got 80% performance increase!