Forums » Help » Canvas native resolution

Hi! Can someone explain to me what Canvas native resolution is?

I have for example chunks of background image, which is 720px. I reuse it and it spans for 720px N-number of times. I have Canvas screen set to 1200 in width and 720 in height. Which part is the native resolution here?))

I also got a strange problem with iphone 4G. It downloads and shows game only if I have regular:

ig.main( '#canvas', XClimate, 20, 1200, 720, 1);

As soon as I insert UA checks in my main.js, Safari on iphone 4g tries to download the game and then gives up giving javascript timeout errors in debug console.

Thank you!

I suspect the image scaling times out. If you start your game with a scaling other than 1, Impact will scale up all graphics during load. If you have a lot and large graphics, this can take a while.

Your best bet is to leave Impact's scaling at 1 and then use CSS to scale. See this post and this slide.


How do you set up the screen size and scaling on the 4gs? Maybe we can give you some more specific input.

That slide is really interesting. Where can I read more about how to handle different resolutions for different devices?

I was under the impression that you should always make the game in 320x480 and then it would scale automatically... :S

I guess you already know the Impact on Mobile Platforms article?

Impact, on its own, doesn't react to different devices at all. You have to set the screen sizes yourself, because there are many different "use cases" of how you may want to display your game.

Here's what worked well for Biolab Disaster (the Box2D example from your download page does this as well). The game shows some buttons at the bottom of the screen. It runs in portrait mode, with only the upper portion of the screen (320x320) devoted to the canvas.

On the desktop, the game runs with a resolution of 240x160, scaled up 2x. On Mobile devices it runs with a smaller 160x160 "viewport", but also scaled up 2x. Well, scaled up 2x times the devicePixelRatio. This worked well on the iPhone3GS (devicePixelRatio of 1), the iphone4 (devicePixelRatio of 2) and also Android devices with 1.5.

Here's an example (a bit different than Biolab):

if( ig.ua.iPad ) {
	// The original iPad on iOS4 is too slow to render the game in fullscreen
	// It's rendered in a 480x320 canvas instead
	ig.Sound.enabled = false;
	ig.main('#canvas', MyGame, 60, 240, 160, 2);
}
else if( ig.ua.mobile ) {
	// For iPhone and Android, make sure to always render in the 
	// native resolution
	ig.Sound.enabled = false;
	ig.main('#canvas', MyGame, 60, 160, 160, 2 * ig.ua.pixelRatio);
	
	// Set the CSS size of the canvas to 320 (160, scaled up 2x)
	// "CSS pixels" will be scaled to native screen pixels by 
	// the browser internally through the pixelRatio
	ig.system.canvas.style.width = '320px';
	ig.system.canvas.style.height = '320px';
}
else {
	// Scale up 3x for desktop
	ig.main('#canvas', MyGame, 60, 240, 160, 3);
}

This uses Impact's internal scaling.

As I said before, I guess you're better of always rendering at 1x, ignoring the devicePixelRation, scale the Canvas with CSS and trigger the hw-accelerated scaling:

canvas {
	width: 320px;
	height: 320px;
	-webkit-transform: scale3d(1, 1, 1) ;
}

In this case, your call to ig.main should look like this, rendering at 1x scale with a 320x320 viewport:

ig.main('#canvas', MyGame, 60, 320, 320, 1);

I hear things are way better in iOS5. I will investigate this soon.

Thanks a lot! Really appreciated. :)

Thank you, Dominic, that was a comprehensive answer, indeed. iOS5 is much faster. My game was unplayable in the previous version. I have got another problem though, and I am not sure if it is iOS5 specific.

When I try to prerender backgrounds by setting prerender to true in background-map.js I get an error on iphone 4g running iOS5: index_size_err: dom exception 1: index or size was negative...

It runs fine and with no errors in all major desktop browsers.

When I try to prerender in main.js using:

loadLevel: function( data ) {
		this.parent( data );
		for( var i = 0; i < this.backgroundMaps.length; i++ ) {
			this.backgroundMaps[i].preRender = true;
		}

This function is essentially ignored by both desktop browsers and iOS5. Anybody knows what is wrong?

Thank you!