Tell me more ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
up vote 6 down vote favorite

I would like to know if there is any "ideal" width to height ratio when creating games for the web.

My canvas is fluid, and resizes according to the browser width and height. But with all the devices out there it's difficult to know what ratio to choose.

Right now i have 4:3 (Width:Height), but is there any ratio that would fit well in most devices?

Thank you.

share|improve this question
Not an answer, but with my game I went with a 16:9 ratio. It's the most common, more than 40% of users, on Steam according to their surveys/data. This is only data from desktop computers though. – William 'MindWorX' Mariager Jun 28 '12 at 3:50
Allright, might go with that, looks good in my browser but if someone has some mobile device statistics would be awesome. – hustlerinc Jun 28 '12 at 4:07
1  
There is a Golden Ratio – John McDonald Jun 28 '12 at 4:40
Might share how you resize your assets, @hustlerinc? – Yannbane Jun 28 '12 at 11:52
@Bane, I haven't got that far yet, right now I have placeholder pixel-art that don't resize too well, but because of the low quality actually don't look too bad either. I'm considering vector graphics for later though. But when drawn in a canvas set to 100% width, images resize themself to fit the ratio (with no additional code from my end). You can try it out by putting drawImage to a <canvas width="100" height="100"> then with css make it stretch, and the image drawn will keep the ratio. But I'll find a more fitting solution later. – hustlerinc Jun 28 '12 at 22:24
show 3 more comments

2 Answers

up vote 4 down vote accepted

There is no standard size for screens and it is big problem. Andriod uses some standard screen sizes then stretches one of them for any other size of screen

  • res-long-land-hdpi 800x480
  • res-long-land-ldpi 400x240
  • res-long-port-hdpi 480x800
  • res-long-port-ldpi 240x400
  • res-notlong-land-hdpi 800x480
  • res-notlong-land-ldpi 320x240
  • res-notlong-land-mdpi 480x320
  • res-notlong-port-hdpi 480x800
  • res-notlong-port-ldpi 240x320
  • res-notlong-port-mdpi 320x480

You might like to design your game screen in a way that your GUI scale with any size of screen. for example have your toolbar attach to top of screen and your action buttons stick to bottom of screen, as for background you can scale width or height to fit the smallest screen dimension and the biggest will hide some part of background.

share|improve this answer
The problem is that it's a multiplayer game, so hiding part of screen where it doesn't fit gives an advantage to the users that have big screens. Since they can just stand out of sight of the other players. My current approach calculates if it should fill on Width or Height, and then stretches as big as it can until it reaches the end of either while keeping ratio. – hustlerinc Jun 28 '12 at 8:18
you are totally right, but even in games like World of Warcraft this happens. In my 16:9 monitor I can't see name tags of mobs (height) and in 4:3 my view angle is smaller and I have to rotate my view to see around. – BobSort Jun 28 '12 at 8:35
I'll try to get some good number depending on the resolutions you posted. I guess it's the best I can do, thanks. – hustlerinc Jun 28 '12 at 22:15
up vote 3 down vote

Is not a Standard, but I like the Golden Ratio

With b + a = 480 a = 300.

Its your canvas, you choose the size. You must calculate a according with user's resolution

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.