3 ms·

How to handle different screen sizes. HTML5 Mobile Game Tutorial

18 points by muellerwolfram 14y ago

Kilimanjaro 14y 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 http://georgenava.appspot.com/demo/poker/poker.html
- olsn 14y 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 14y 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.

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 http://georgenava.appspot.com/demo/poker/poker.html

olsn 14y 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 14y 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.