What is the best resolution for a HTML5 game

[NokFrt]

Hi,

I'm wondering what resolution should I use for a HTML5 mobile game. It looks like the most common is 320x480. But how can I display an 320x480 image on a device with 320x480 display? I think it's not possible without scaling or am I mistaken? I can hide the address bar but this is not enough. How do you solve this? Do you use smaller resolution or do you scale your game according to the available space with keeping aspect ratio (so the real resolution is in the end something like 306x460)?

 

Tomas

[mentuat]

If you are making a game that's dependant on smooth frame update then 480x320 is a safe target to aim for, it'll look pretty crappy on a tablet but at least you're giving it the best chance to run well. If you're making a turn based game that is not reliant on a constant frame update then higher resolutions are possible and will look better on retina or larger screens.

You can scale the canvas with CSS to make your game fit the various devices screen sizes

[remvst]

I use only iPhone 4 resolutions atm : 320x460 and 480x300. (and then, I resize while keeping the same ratio)

 

Why? Simply because the iPhone has a good share of the traffic, and therefore I know that many people will have the perfect resolution for their screen (+ not too much to load).

 

I might change for 320x480 in the future, but it's not something I really worry about.

[benny!]

For portrait mode games I used 320 x 420 px so far. Hiding the browsers navigation bar is not always possible.

[alex_h]

This is all quite interesting to hear. My last game 'Bug Match' I built at 1136 x 640. Since the set of images for the game was quite small it all fitted into one 2048 square texture atlas so the download was still not excessive. Additionally the background is static so the whole screen is not constantly updating so this also was not a problem. But my next game is a side scrolling platformer so I'm already finding myself wondering whether I should be targeting a smaller display area, and this thread seems to be confirming that notion! My main fear though is that the only reason most of you get away with working to 480 x 320 is that you all seem to use pixel art style graphics which look fine when scaled up. I'm not currently planning to use that design style for my platform game since I have no experience in designing that type of art, and I have a horrible suspicion that if my original designs are done at 480 x 320 scale this will mean that they look like shite when running on tablets or retina devices.

[Gio]

I generally do it in a different way: I choose a minimum resolution (480x320 for example, but often higher), and make sure that the game can be played at that resolution. Then if the resolution is higher I show more of the game world. In the case of a game like your Bug Match, you could show more of the background. If it's a side scrolling game, you could zoom out a bit when there are more pixels available. So it looks nice and sharp on both low-res and high-res devices. I do this up to a maximum resolution, then apply some CSS scaling if the resolution on the target device is even higher than my maximum resolution.

 

Regarding the minimum/maximum resolution, that depends on which devices you're targeting. Even with a small screen with a 480x320 resolution, the actual number of pixels can be much higher on a modern phone, which also has enough processing power to handle the increased resolution. If you're targeting older devices obviously go lower with the minimum resolution, but I like to keep my maximum resolution at 1920x1080 so it looks good on PC's too.

[alex_h]

OK, cool. I think I'll try halving the scale of my game to see what it looks like on a few different devices. Hopefully it will run more smoothly like that on some of the lower spec devices too.

[TheHermit]

I've been using 300x500 or 500x300. I'm not exactly sure yet if thats a wise choice though, so don't read too much into it. For Travelogue we're doing 800x480 since it has tons and tons of text, and if the device can't display that resolution I think its just not meant to be. Its kind of embarassing, but we didn't know what the heck we were doing when we started travelogue and so we were using 640x480; we had to go back and redo most of the graphics for the higher resolution. I am so grateful for seam-carving and Liquid Rescale for making that job easier.

[silentimp]

What about usage of responsive design in games?

Or at list scaling?

[alex_h]

I just tried downscaling my game from 1136 x 640 to 568 x 320 using photoshop and tested it in fullscreen on an iPod 5. I have to confirm what you said True Valhalla, even though my designs are vectors made in flash with gradients, etc I was really pleasantly surprised with the results - it didn't look shite after all 

 

Incidentally, the game will allow being cropped down to 480 x 320 according to the window size, similar to what others mentioned above.

[Paul-Andre]

Does setting the canvas to the size of the screen while keeping a fixed ratio and then scaling everything with ctx.scale(w,h) seem like a good idea? I saw a few games (made in Game Maker, I think) that used this technique. GM probably handles that automatically though. I suppose that scaling like this would be more efficient than scaling with css once everything is rendered, and it'll probably look better.

[rich]

All of our recent games have been built at 1024 x 672 and scale down from there. That resolution fills the iPad taking into account the Safari UI (although iOS7 changes this) but scales proportionally really well for things like the Nexus 7 and Kindle. The game canvas is fixed at that size and is scaled to the display dimensions using CSS. For some games we run at 480x320 but only if they've got high requirements in terms of animation and scrolling speed, and even then we detect which resolution the device supports and only run in 'low res' if you're not on a tablet/desktop. We used to build in 480x320 and scale-up, but our stats show most people are using tablets these days, so we'd rather they look great at higher resolutions (and clients are demanding it actually). It's only if the game literally can't cope re: performance that we up-scale.

[Paul-Andre]

Hey, there is this weird thing. On some browsers, SVGs loaded as images actually "scale" when drawn on a canvas. On chrome, it scales as an SVG, on Firefox, it scales an an image.

Here's an example of what I mean:

http://rnd.atspace.tv/svgOnCanvas/

Maybe it can be used to make better "scalable" games? Not sure about mobile performance. ;/

[mrwut4]

We currently use a resolution of 960x640px for our HTML5 games. On newer Tablets, games can achive decent performance in that size, plus, the graphics are crisp and future proof.

If the display size ist smaller than 960 in width or 640 in height we half the graphic size and deliver the game in 480x320px.

We did this in our endless runner "Pilot School" (try changing the window size and reload):

http://pritt2013.eoa.de/Games/PilotSchool/

The game runs smoothly at full resolution on the first iPad.

[enpu]

I also use 1024 x 672 for landscape and 768 x 928 for portrait, and then scale down.

[werefox]

Are there any published requirements from portals or sponsors that anyone knows of, or will they take anything as long as it fits?

[OkijinGames]

The requirement publishers seem to care most is that the game runs full screen - for the resolution I never heard about specifics.

 

For my games I work at 1366x768 but only use this resolution with Windows 8 Store. Otherwise I prepare 2 or 3 sets of assets at different size and load them accordingly to the device screen size. Internally I set the logical canvas size to the dimensions I want to use for my assets then use CSS to scale to screen size. (This is the method described in this article)

 

To abstract the size of the assets in the code I use a further scaling operation on the context so the code works with an abstracted unit and never needs to change regardless of the size of the assets.

 

context.scale(scaleUnit, scaleUnit);

// further code and drawing goes here...

[ResCraft Nemega]

For mobile in portrait mode I use 320x356 as a base. It fits exactly on iPhone 4 with ios6 (showing both upper and down bars). I also run a responsive design so in fullscreen mode everything is centered/scaled and the background is tiled accordingly.

[sashastg]

i am using  640x960

[-AAG-]

I use 320x480 with the actual playable area being 320x416. From here I scale up to anything keeping the aspect ratio. The games sure look pixelated when scaled up but mighty crisp too. It really doesn't look that bad. I never had a complaint about it and have sold games to rather demanding sponsors (like SoftGames) so this is working for me.

 

BTW: I use the Mobility Engine for scaling removing the default 175% scale limit with pixel interpolation off (a GM: Studio thing?) no matter the graphics style. It works great if your game is designed correctly.

[Shockblast Apps]

I use as my virtual resolution 640x854 where I put the game, UI elements etc in it. The background that I use with that resolution is 640x1140. This way I can cover all mobile devices from iPad aspect ratio to iPhone 5 aspect ratio. The game automatically shows more of the background if an iPhone 5 is used compared to the iPad. So in a sense, the game scales with the resolution as well as the aspect ratio of the mobile device.

 

Also, I use 2 types of asset ratios. Devices that have a lower resolution than 960x640, thus lower than iPhone retina, will use a low resolution graphics while devices with a resolution from iPhone retina and up will use high resolution graphics. If the game is played on a PC, it will of course always load the high resolution graphics.

[VaragtP]

For most games I develop at 700x460. Not sure this is an optimal resolution though..

[keybol]

320x480 isn't that too small? I use generic 480x720 so it fits mobile and is good to play on browser as well

[vinch]

My base resolution 640x712 (the resolution of Safari’s window with address bar in iPhone 4s), but game will look good in other resolutions because of large background (960 pixels) and game scaling.

[MichaelD]

Excuse my ignorance but how do you deal with the WebGL warning about graphics that are not scaled to a power of 2

 

 

 

WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2

 

I'm sorry if this is out-of-topic. However I would really like to learn how to cope with this issue.

 

Thanks.