Html5 games, what is the standard dimension to use?

Question

I am trying to make html5 games to be played on the browser(not offline apps), and I am trying to support the maximum number of platforms, hence I need to know what dimension should I use for the game canvas so that it works in the most number of places.

Also is there anyway to "scale" a large game to fit in the tiny size of iphone(around 320x356px I think). By "scale" I don't mean to actually resize just the canvas, as because that can mess up the coordinate based calculations, and for a large number of objects, re-positioning based on canvas size can be a real hassle.

Answer 1

Google collects data on the average size of the browser window people use when visiting their website:

http://browsersize.googlelabs.com/

As you can see 98% of the people browsing have a window size of at least 800x400 so I suppose that is a good start. Of course if you think your game will be played mostly on phones the statistics may be slightly different since these statistics are desktop+mobile.

Answer 2

I think this question cannot be answered with a number for the and for the height. There are just too much different display formats. I think that the discussion of the games dimensions should be based on the game. What I mean is: Tetris in landscape format might not be that cool as in portrait. I prefer setting an fix aspect ratio, which always can be scaled safely into the available space.

Answer 3

iPhones (and most smartphones I believe) automatically scale web pages to fit the width of the device, thus you can actually make your game in a different scale and as long as the page isn't too tall relative to its width it will automatically fit on the screen.

As far as I have quickly read you can also use a viewport tag to get more precise control of this process. It's not something I have experience with, but it seems worth looking into.

Answer 4

check this awesome tutorial for scaling:

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

EDIT: an idea for object placement and scaling, not sure if its correct / practically doable. I am yet to try this:

• have some base dimension like (960 x 640)
• while writing game logic, handle positions / scale as if you are developing only for 960x640.
• at the time of rendering, multiply the position and scales with these factors screenWidth / 960 for x-axis and screenHeight / 640 for y-axis, where screenWidth and screenHeight are actual screen dimenstions.

Answer 5

i used ImpactJS, a game engine that automatically resizes a game to a required dimension, taking into account retina displays from the iPhone4. The coordinate systems are not screwed this way.