What is the best resolution for a HTML5 game

[yurezz]

I've choosed 640x720 for the first game, works well on most devices

[away168]

Excuse my ignorance but how do you deal with the WebGL warning about graphics that are not scaled to a 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.

You are either have the texture (image) not loaded yet after the WebGL runs or you have your texture not in resolution with power of 2 (16 x 16, 256 x 256, 256 x 512, 1024 x 1024, etc.)

 

--

 

I use more or less 960x640. Good for mobile, good enough for tablets, enough for desktop.

[BaronWilhelm]

If delivering via the web, scaling down seems preferable.  The graphics will stay crisp and you don't have to worry about the app's download size as much like you do for mobile games.

[MarkW]

I am still stubbornly sticking with 320x480. In the main this is because I can still litter the screen with sprites and maintain a rapid frame rate.
I enjoy making arcade games where lots of things need animation in a single tick.
My sprites are always drawn on 8s. That is they are a factor of 8. My main playerSprite is usually around 32x32 as are the monsters / aliens. I also find that this helps with my (admittedly crude) collision detection.
Special effects (explosions, particles etc) can be anything from 8x8 to 64x64.

CSS scaling and Math.round() of sprite co-ordinates at draw time ensure that the games scale and draw in a crisp fashion even on iPad Air. In fact especially on iOS devices.

 

I rarely licence content any more but when I do the key requirement appears to be for the game to fill the screen of every device.

 

Another consideration I have is that although the game canvas is set to 320 x 480 I reserve the top 64px for UI (score, lives etc) and essentially write off the bottom 128px. This is mainly due to iOS7 and its crappy chrome but is also to accomodate the majority of devices.
So the actual "play" in terms of touch interaction is 320 x 288 !

[BdR]

If delivering via the web, scaling down seems preferable.  The graphics will stay crisp and you don't have to worry about the app's download size as much like you do for mobile games.

 

I agree, I develop for the highest resolution and then scale it down automatically. I took the idea from these example games. They scale in real-time when you open it in your desktop browser and then resize the browser window (  looks pretty cool):

http://www.baptistebrunet.com/games/fruit_salad/

http://www.baptistebrunet.com/games/minefield/

 

In my own game I only use the css spritesheets and don't use the canvas element (yet) so then I only have to change the css at runtime using jQuery. Also I make sure it looks good on some of the key resolutions; 320x480 (small phones), 480x800 (comon), 640x960 (iPhone4)

 

I rarely licence content any more but when I do the key requirement appears to be for the game to fill the screen of every device.

 

You have licenced your html5 games? How did you find the publishers?

[MarkW]

You have licenced your html5 games? How did you find the publishers?

It varied really.

I've found those in mainland Europe the best to deal with. Realistic, reasonably relaxed and happy to pay the asking price. Better still they generally paid promptly.

 

I've had similar experiences elsewhere but UK based publishers were by contrast pretty terrible. Late payers, hagglers, new to the market, no budget and worst of all predominantly salesmen as opposed to friendly account managers.

 

I've been lucky enough to have established some firm relationships with some very good portal operators. Not least Boostermedia, Kimia, Pakap and Cloudgames. But I monetise differently these days so probably not the best person to ask for an up to date view on the licencing game

I imagine Matt's your man

[Victor]

I see that many of you choose a 3:2 Aspect ratio for your games (480x320 or 960x640) but I think that it's wrong. I'll try to explain it.

 

There are five mayor aspect ratios in the screen world. From most square to most rectangular:

• 4:3
• 3:2
• 16:10
• 5:3
• 16:9

 If you choose a 3:2 aspect ratio resolution, when you enlarge or shrink it to the device real screen, you get this:

• 4:3 -> 4:2,66     wasted space: 11%
• 3:2 -> 3:2          wasted space: 0%
• 16:10 -> 15:10  wasted space: 6,25%
• 5:3 -> 4,5:3       wasted space: 10%
• 16:9 -> 13,5:9   wasted space: 15,625%

 

But if you choose the center aspect ratio (16:10) you wasted less space in widescreen devices at the cost of wasting a little more with the 4:3 ones:

• 4:3 -> 4:2,5      wasted space: 16.6%
• 3:2 -> 3:1,875  wasted space: 6,25%
• 16:10 -> 16:10  wasted space: 0%
• 5:3 -> 4,8:3       wasted space: 4%
• 16:9 -> 14,4:9   wasted space: 10%

I attached the most common devices and real resolutions so you can see it with pixels.

The only 4:3 devices that we must care are Ipads, but I believe that 42 or 81 more pixels are acceptable if 16:10 looks much better in every other device.

I don't have any Apple device yet, so I can't test the Safari bar issues, but 960x600 looks fine in my 16:9 android cellular and 16:10 Tablet.

 

The new devices have 16:9 (Galaxy and Iphone5) or 16:10 (Android Tablets) screens so I think that it's a good choice to adapt the games too.

[tackle]

*lots of info*

 

Curious - have you taken into account the screen estate lost to browser GUI, or is this assuming 100% 'full screen' of the width/height given?

[ifritgames]

I always felt that HTML5 games should break free of static screen sizes. My games dinamically rescale to the screen they are played on, in real time. I understand that you might have performance considerations about this, or image scaling issues, but I think this is where HTML5 games should be heading.

[Sigmag]

I feel I have something of value to offer in regards to this. I'm still very new at indie development, but have been making strides on the graphics side of things, especially regarding dynamic scaling.

 

I built a resolution utility that shows how games with common aspect ratios (4:3, 3:2, 16:9) will display on any given resolution, it also shows how they can scale to match any screen size! I really want to get it out in the open and have others see it because I feel the enigma of game resolution and scaling comes up all the time and having a visual aid proved critical when planning my UI.

 

It gives approximate information about how much pixel bleed you will see for each aspect ratio at any given resolution, as well as just general scaling info, etc. 

 

In any case, just take a look at the following URL. You can stretch the window and it will update so that you can set your browser window to whatever your target resolution is easily and note how those aspect ratios appear.

 

HTML5 ResUtil 2.0

[Mobilepundits]

in my oeinion 480x320 is ideal.

[ptotheaul]

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.

 

I'm trying to develop a canvas game that uses this technique.  The game is going to be set to play in landscape mode so I want to the background to be wider then the gameplay area.  Since elements come in from off screen I want to make the canvas wider too but also center it so no matter how wide the screen the game still appears to be full screen.  Any ideas of the best way to do this?

[astoria0128]

You can use any resolution for a HTML5 game..

Facbook                           -   760* any

Chrome  Web Store         -   any

iPad                                  -   1024*768

Motorola Atrix                 -   960* 540

HTC Droid                       -   480*800

Droid2                              -   480*854

HTC Aria                         -    320*480

Nexus One                       -   480*800      

iPhone3g                          -   480*320

iPhone4                            -   960*640

[tmifx]

I now use 800x450 and stretched to full screen but keeping the aspect ratio.

[jogosgratispro]

For me I prefer to use 405x720 now. It works perfect for both desktop and mobile

[Ninjadoodle]

Panda Js has a brilliant option which let's you use hires assets and loads them depending on device.

 

If you use the base of 320x480 or 480x320 and provide @2x and @4x assets those assets will only be used if the device has a resolution high enough.

 

You can make backgrounds slightly larger (wider or taller) if the device doesn't quiet match the ratio, then use the appropriate scaling mode to show more of the background.

 

I love this solution as your game will look great on every device and no performance is lost.

[Ousaf]

I think If we use 320 x 480 as standard and if in this resolution we have HD graphics which are scaled down to fit in that resolution then if screen size changes even then at higher resolution graphics quality not drops much I tested it on my game

[b10b]

As of early 2015, all of our HTML5 games to date were 320x480 (with CSS scaling on master canvas to fill screen).  Will likely shift to 420x720 for upcoming canvas games.

Some degree of dynamic margins should be incorporated, but always easier said than done

[sivric.marijan]

So...should I use 480x320 or 960x600 or what? I am planning to publish my game to Facebook, Kongregate, Chrome store, Windows store, iOS and Android...

[delete this account!]

Now that it's 2018 do you use a different screen size?

I was thinking 1920x1440 for a match 3 kind of game. Is that too much?