Tilemap implementation is laggy

[holywyvern]

Tilemaps just plain don't work at the moment

[holywyvern]

It's laggy, but it works, even at 50-40 fps on my pc with hardware acceleration.
So it's fine if this works... but still open.

[holywyvern]

The implementation lags a lot event at small maps, but it works.

[ivanpopelyshev]

Look at that

Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    dw = dw || sw;
    dh = dh || sh;
    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
            sx + sw <= source.width && sy + sh <= source.height) {
        this._context.globalCompositeOperation = 'source-over';
        this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
        this._setDirty();
    }
};

aaaand lets change source._canvas to source._image || source._canvas:

Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {
    dw = dw || sw;
    dh = dh || sh;
    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
            sx + sw <= source.width && sy + sh <= source.height) {
        this._context.globalCompositeOperation = 'source-over';
        this._context.drawImage(source._image || source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
        this._setDirty();
    }
};

Chrome v46: 5-10x performance boost in Tilemap._drawAutoTile.
Didnt test in other browsers, but that's optimization that I use in gameofbombs.com for 2 years.

[ivanpopelyshev]

Ok, in this test its only 2.5x in chrome: http://jsperf.com/tilemap-optimization . I saw 5x-10x in chrome profiler.

[ivanpopelyshev]

The next step is migrate to pixi.js tilemap.

[ivanpopelyshev]

Ok, now I see that rpgmaker uses very specific tilemaps, which are more close to gameofbombs.com model than tiled. Im going to port my implementation :)

[holywyvern]

The problem may be that if you edit the bitmap after loading (almost nobody does that anyway) The blt won't reflect changes if I'm not mistaken.
This may not be the problem about tilemap, because tilemap right now only draw the tileset once inside a bigger texture

[ivanpopelyshev]

Yep. I used that approach too, I changed some canvases just after loading the image. Now I use pre-generated stuff :)

[ivanpopelyshev]

I looked at other performance problems, and I dont like it at all. They actually do things like "traits.filter(...).filter(...)" directly in the rendering loop, its awful :(

[ivanpopelyshev]

Ok, it is fixed. We have "ShaderTilemap" plugin. For performance reasons I use vanilla implementation for canvas fallback.