Forums » Help » "Zoom" feature by changing scale while keeping canvas size constant

My game has a top-down 2D view (RPG-style). I'd like to implement a "zoom" feature but it looks like ig.system.resize does not resize all of the background layers. Here's my code:

var zoomFactor = (localStorage.getItem("zoom") || 100) / 100;
ig.system.resize(Math.round($(window).width() / zoomFactor),Math.round($(window).height() / zoomFactor),zoomFactor);

That keeps the canvas a constant size but changes the zoom level so a wider area of the map can be viewed. The problem is, only the background map that is tiled gets resized. Everything else is displayed full-size.

I just noticed that if I turn off preRender for the non-repeating map, this problem is fixed, but then the other map layers don't pull the right tiles out of the tileset (e.g. something seems screwed up with the way the tiles are sliced out of the sprited image).

Am I using the right approach here or am I missing something? Impact has been a joy to work with so I assume it's a problem on my end!

Well, the short answer is: Impact wasn't built for that.

In order to have crisp nearest neighbor scaling, Impact scales up all images during load in JavaScript. If it didn't do that, you'd get a blurry mess when scaling up pixel graphics.

Of course for high-res games this blurry scaling wouldn't matter - in fact, it's probably what you want when scaling down images. But as I said, Impact's primary focus lies on games that display graphics in exactly the size that they were saved as, or scaled up by an integer factor (2,3,4,5...) with nearest neighbor, to see nice an crisp pixels.


So it now really depends on what style your game has to decide for the right approach to scale it.

If you have a game with pixel graphics and your normal view has a scaling of 2, while your zoomed-in view has a scaling of 4, you could re-scale all images with Impact's scaling algorithm when the zoom level changes. If you want to do this, have a look at lib/impact/image.js: I'd suggest you hijack the onload() function to scale the image for each zoom factor during load time and then switch out the .data of the ig.Image with the appropriately scaled version each time the zoom level changes.

If you don't have pixel graphics, and you want interpolated ("blurry") scaling and progressive zoom levels, have a look at the canvas APIs .scale() function, instead of using Impact's scaling algorithm.

Both approaches will require a fair amount of hacking; there currently is no easy way to do this in Impact.

thanks! that's super helpful. This is not an absolute critical feature so I am going to skip it for now. It sounds like it might be easier to add some other "radar" type feature to communicate the information I'm thinking of (finding stuff that's offscreen quickly).