Forums » Help » How to scale down game size?

I have made one ImpactJS game, the resolution is 480x320. I am wondering if I want to make it as a widget which is 64x96 in resolution (or 5 times scaling down.) How could I acheive that? I have done it in ig.main specifying 0.2 as a scale and it is not working.

Ha, interesting. Never thought about scaling a game down :)

I just tried it with the Jump'n'Run' Demo and it almost worked. The one problem I saw, is that when you have an image that is 9 pixels wide, and you scale it with 0.5, the engine tries to draw an image with a width of 4.5pixels - which produces an error, as the canvas API expects only integers, not floats for the image size.

You can fix this by changing line 144 and 145 of lib/impact/image.js to the following:

var tileWidthScaled = Math.floor(tileWidth * scale);
var tileHeightScaled = Math.floor(tileHeight * scale);

Rendering fonts has a similar problem - you should just disable the fonts for your scaled down version, as you probably can't read them anyway at this size.

Another approach you could try, is to render the game with a scaling of 1 as normal, but then scale the canvas element via CSS to the desired size:

#canvas {
	width: 120px;
	height: 80px;
}

A quick note for anyone else with this problem: the css approach is the easiest way to do this, but you'll need to add an additional scaling factor based on the ratio of the canvas pixels to the css pixels.

Change the last two lines of input.js/mousemove to:

this.mouse.x = (tx - pos.left) / ig.system.scale * ig.system.realWidth/parseFloat(ig.system.canvas.style.width);
this.mouse.y = (ty - pos.top) / ig.system.scale * ig.system.realHeight/parseFloat(ig.system.canvas.style.height);