Scale large image

[TheBuffer]

Hello devs,

 

I'm working on a pixel art map editor - I draw the generated map directly into a canvas.

However this operation gets extremly slow if the map size goes above 3-4k.

Such a large size needs to get rendered if the user zoomes into the map and drags it around for example.

 

I implemented PIXI into my project and render the existing map canvas scaled by it.

 

This way it runs pretty fast + on large maps too, but the rendered map gets cropped from right to left.

The more i scale it up, the more it gets cropped, performed from the right and bottom side.

It perfectly fits into the window, but dragging it around shows its cropped.

 

I can't post the whole code here (above 5k lines  ):

var map = null;var sprite = null;var texture = null;sprite = new PIXI.Sprite(this.PIXI.rt);sprite.x = 0;sprite.y = 0;// Passing in the canvas holding the pixel art tile maptexture = PIXI.Texture.fromCanvas(ctx.canvas);map = new PIXI.Sprite(texture);this.PIXI.stage.children[0] = sprite;this.PIXI.container.children[0] = map;// Scale itthis.PIXI.stage.scale.x = scale;this.PIXI.stage.scale.y = scale;this.PIXI.rt.render(this.PIXI.container);this.PIXI.renderer.render(this.PIXI.stage);

What am I missing?

 

Thanks for your time

[ivan.popelyshev]

WebGL has limit on texture size. You have to separate your map into a number of smaller canvases (chunks) and add culling so they even wont be rendered. That's the way how gameofbombs.com works.