6

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.

justanotherhobbyist
  • 1,086
  • 2
  • 14
  • 31
  • 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 Jun 28 '12 at 03:50
  • Allright, might go with that, looks good in my browser but if someone has some mobile device statistics would be awesome. – justanotherhobbyist Jun 28 '12 at 04:07
  • 1
    There is a Golden Ratio – John McDonald Jun 28 '12 at 04:40
  • Might share how you resize your assets, @hustlerinc? – jcora 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 then with css make it stretch, and the image drawn will keep the ratio. But I'll find a more fitting solution later.

     – justanotherhobbyist Jun 28 '12 at 22:24
  • in terms of ratio, isn't the golden ratio the most beautiful one in the universe ? – zinking Jun 29 '12 at 09:56
  • @zinking, it sure is. If you're all talking about that (mathematical) golden ratio, it's naturally appealing to humans. We did a test in our school, told a class to pick one of the rectangles they saw on a paper, and almost everyone picked the one that was in the golden ratio! – jcora Jun 29 '12 at 15:38
  • ("Almost everyone" means that statistically, it was safe to conclude that the result wasn't random. I picked it myself.) – jcora Jun 29 '12 at 15:39

2 Answers2

4

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.

AaA
  • 156
  • 2
  • 6
  • 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.

     – justanotherhobbyist Jun 28 '12 at 08: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. – AaA Jun 28 '12 at 08: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. – justanotherhobbyist Jun 28 '12 at 22:15
3

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

vgonisanz
  • 232
  • 2
  • 13