Jump to content

Scale large image


Recommended Posts

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 :P ):

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...