Forums » Help » Zoom out to see wider map area

In Weltmeister map editor, when scrolling mouse wheel, the whole map will zoom in or out and the zoom factor(1x, 0.5x, 0.25x) is shown on the top-left corner. Is there an API to change the whole map scale so I can see wider area when zooming out?

I have used ig.system.resize(480, 320, 0.5); but it does not provide the same result like Weltmeister has. I am new to Impact.js, so can anyone help?

The Zoom feature in Weltmeister is implemented in a pretty hack-ish way, because of pixel scaling issues with certain browsers. Getting this to work in your game would be quite difficult.

A "quick and dirty" solution is to change the Canvas' transformation before drawing your game. I.e. in your main.js:

draw: function() {
	ig.system.context.save();
	ig.system.context.scale( 0.5, 0.5 );

	this.parent();

	ig.system.context.restore();
}

You will also have to set the screen size accordingly, or only a portion of the background maps and entities will get drawn when zoomed out:

// assuming you started your game with a scale factor of 1,
// otherwise ig.system.realWidth/Height will be off.
ig.system.width = ig.system.realWidth / 0.5;
ig.system.height = ig.system.realHeight / 0.5;

Sorry to revive a dead thread, but how would I implement the Zoom feature without it affecting the size of the font on the screen?

Quote from mahgo
Sorry to revive a dead thread, but how would I implement the Zoom feature without it affecting the size of the font on the screen?

Assuming you've already done what Dominic suggested, maybe overload the font draw functions such that they are drawn at regular size, while everything else is draw with the zoom effect. It would basically be the reverse of what he suggested, but only for fonts.