Forums » Help » Scaling - Slower?

When i use scaling of 2* the original sprite/graphics, it seems to load my game considerably slower than if I use the default 1* scaling... the delay is REALLY noticeable if i increase scaling to 3 or 4*... like Chrome thinks its crashing, but if I choose to wait it out, i eventually get the game.

Am i doing something wrong or is this expected behaviour? If expected, could you educate me on the reasoning? Is it possible to avoid?

I'd say that's expected behavior. The images are scaled on load... so the more you ask from it the longer it's going to take. If its getting to the point that it is timing out the browser then you must have a lot of graphics being scaled.

1* scaling, aka... no scaling, is a lot less work for the loader so it'll always be the fastest.

I would think that the engine runs about the same in 1* vs 2* or whatever after the load so in theory couldn't you pre-render all your graphics scaled 2* with nearest neighbor and then just run it at 1*? Then you'd get the look you want without the load time issues.

All images are scaled by pre-loading to an offscreen buffer, and then by having their pixel arrays transformed via a nearest neighbor algorithm. The greater the scale, the longer the algorithm takes.

Yep, the scaling is done by Impact in JavaScript, because there still is no cross-browser way to specify a scaling algorithm. If you have a lot or very large graphics, it can take some time to scale them up.

Instead of using Impact's internal scaling, you could scale up all graphics beforehand in Photoshop or scale the Canvas element itself, using CSS. E.g. if your game is 320x240 and you want it scaled up 2x:

#canvas {
	width: 640px;
	height: 480px;

	/* force nearest neighbor scaling */
	image-rendering: -moz-crisp-edges; /* firefox */
	image-rendering: -webkit-optimize-contrast; /* chrome/safari */
	-ms-interpolation-mode: nearest-neighbor; /* ie */
}

IE9, Safari5 and Chrome14 still ignore the image-rendering / -ms-interpolation-mode property for the canvas element and scale it with a blurry bicubic(?) scaling that looks awful for pixel games.

More info: https://developer.mozilla.org/en/css/image-rendering

Sweet like candy, thanks for the info guys. Actually Im borderline on truly digging the blurry scaling that chrome & safari output when upscaling the canvas. :) Bottom line is its faster, so im good to go for now.

I believe this was asked but I cant find the thread. Is there a benefit to not just having upscaled graphics right out of photoshop then? It seems like if doing the impact scaling it is slowing down loading, would having 2x larger graphics have any implications other than longer loading? Id be truly interested to see which method produces a quicker load overall...? (especially with lots of sprites & large levels)..

Many thanks!

The benefit of using Impact's scaling over pre-scaled images from Photoshop is some more flexibility. Biolab Disaster for instance is scaled up 2x for Desktop browsers and the iPhone3 (and older), but scaled up 4x for the iPhone4.

Also, if you use Impact&039;s scaling, all values for entity movement and positions are still in unscaled pixels - which may be easier to work with. E.g. an entity with a #.pos.x of 32 when using Impact&039;s scaling, must have a #.pos.x of 64 when using 2x pre-scaled images, (128 when using 4x etc.) to appear at the same position.

ahhh yes. no that makes perfect sense. thank you for the great explanation. This forum is school for me. ;)