How to handle different screen sizes. HTML5 Mobile Game Tutorial

http://indiegamr.com/retro-style-platform-runner-game-for-mobile-with-easeljs-part-4-adjusting-to-mobile-displays/

by muellerwolfram • 14 years ago

18 3 14 years ago

This is what I use:

    var ratio = Math.min(window.innerWidth/BASE_WIDTH,window.innerHeight/BASE_HEIGHT)

    document.body.style.zoom = ratio

    or

    document.body.style.WebkitTransform='scale('+ratio+')'

Resize the whole board instead of scaling every object.

* Half-baked example of what I do (Webkit only as usual)

http://georgenava.appspot.com/demo/poker/poker.html

olsn• 14 years ago

that's true! and there are cases, where your way is applicable, however there are a couple issues with it when working with canvas apps(I'm not completely up to date with all the details about style.zoom, so correct me, if i'm wrong): - the css3 'zoom' is not very well implemented, for example in FF you would have to use: -moz-transform: scale(XX); (which is a hassle, but okay - it works) , but afaik in IE9 the whole method was marked deprecated - i don't know about IE10 - maybe we have some luck there, wouldn't rely on it though :-)

- when zooming via style.zoom, everything will be zoomed according to a base-width&height, so if the target-device has a different aspect ratio than your base-sizes, you will have to reposition certain objects by hand anyways, also you will have to set the width&height of the canvas manually - as there might be overlapping parts

- when it comes to targeting mobile devices with canvas, you quite often want to use tools like Ludei's cocoonJS or AppMobi's directCanvas, that render html-canvas as a native WebGL-stage on mobile, and css-values like zoom or any other markup will just be ignored on those platforms

- however when you are working with DOM-elements style.zoom can come pretty handy!

I really like your Poker-Demo btw.! Love how the animations are super-smooth! Keep it up! cheers

endemic• 14 years ago

Not applicable to most games, but I did a puzzle game that uses HTML/CSS for layout, then enforced a fixed 2:3 ratio for the "content" area of the game, with each UI element using a percentage-based width/height. The great thing about this method is that the "graphics" are always crisp, regardless of screen resolution or pixel density.

How to handle different screen sizes. HTML5 Mobile Game Tutorial

Related Stories