Recommended Game Dimension

[hyude]

Hello.

 

What is the recommended Game Dimension (Width & Height).

Most tutorial use 600x400 dimension, which I think is very small.

 

I tried using a high-res assets for my game, and use 2.000 x 1.600 dimension, I tested it in my browser (Google Chrome), and it starts to cause my laptop to lag by a a lot.

 

So, what is the recommended size for phaser (which you usually use), so game can run smoothly, while delivering high-res assets?

 

Thank you.

[Sam]

I think that depends on more than only the resolution itself.

what platform are you targeting?
Which type of game are you going to produce?
Some techniques cause more performance than others.

2.000 x 1.600 is still very large - since even the retina macbooks downscale webcontent to 1920.

please provide more information so maybe I can help you there

[hustlerinc]

Unfortunately there is no magic number that will work for all scenarios.  Decide on a decent aspect ratio (1.5:1 seems common) then make your game and assets as small as you can get away with and scale up as needed (instead of the other way around). What size you go with in the end depends on what type of devices you are targeting and how much cross device compatibility you need.

[hyude]

I am making games which targeted toward several platform
 

• Android Device
• Windows Phone Device
• Web Browser (as HTML5 game)

 

What dimension should I aim for my game in this case?

 

I am planning to wrap Phaser with CocoonJS for those platform target.

 

Any suggestion?

[hustlerinc]

I am making games which targeted toward several platform

 

• Android Device
• Windows Phone Device
• Web Browser (as HTML5 game)

 

What dimension should I aim for my game in this case?

 

I am planning to wrap Phaser with CocoonJS for those platform target.

 

Any suggestion?

If you intend to use the same code for all devices you really have to go much smaller than what you currently have. If the performance is bad on a laptop imagine what it will be on a low-end smartphone. Start small and optimize for the worst performing device (in your case low-end smartphones) and scale up, but the exact dimensions you choose depends on the game and how demanding the rendering is (e.g. how many objects are drawn? are there several layers? etc...). The only way to know really is to test it and see, but you should always aim for the smallest size possible.

 

While the difference between 600x400 and 900x600 might not sound like much, think of it this way: In the first example you're drawing 240.000 pixels, and in the second 540.000 (with your current dimensions 3.200.000). And if you change the size of the sprites on top of the increased pixel count the exponential growth of the resources used gets out of hand very fast.

 

Just to give you a number try 800x640 but depending on the game it's possible even that might be a little big for smartphones. If the graphics scale badly on high resolutions you could always load different sizes depending on the browser window size but that requires more work.

[Sam]

I'm developing for iOS, there it is much easier. But the way is nearly the same:

I only define if it is retina or not and then I load different images (high res or low res).

If you are using cocoonJS (which is the same as I'm using) you can do it by:

var deviceWidth = navigator.isCocoonJS ? window.innerWidth : 1024,    deviceHeight = navigator.isCocoonJS ? window.innerHeight : 768;

deviceWidth & Height are my Phaser Game width and Height -> If CocoonJS is NOT used, it sets the game to 1024x768 (Desktop testing)

then to work with spaces I define:
 

var pixelratio;

so if it is a retina model which offers 2x Pixels the pixelratio is 2, if not it is 1.
So my distances for example ( game.width + 200 ) are getting always a * pixelratio
 

game.width / 2 + 400 * pixelratio

and for loading images etc you can cheack in your preload for:
 

i

f(!navigator.isCocoonJS){//Desktop Testing            preloadNormal();            pixelratio = 1;        }else if(deviceWidth >= 2208){//iPhone 6            preloadRetina();            pixelratio = 2;        }else if(deviceWidth >= 2048){

So CocoonJS gets always the Device dimensions and you can set your game to this by: (in the create function)

game.scale.setupScale(deviceWidth, deviceHeight);game.scale.refresh();

So do not hardcode the dimensions into your phaser game, let the wrapper set it for you.
And load the images that fit the resolution.


Hope that helps,

regards
 

[hyude]

Thank you very much hustlerinc and sam, that was exactly what I needed to know.

 

So 1024 x 768 should be my default dimension, I get it.

 

Another related question then. In your explanation, you have 2 method for loading, either loadNormal or with retina.

Does that means the assets in retina are always double resolution of normal assets?

 

And if that so, is it better to load all asset once, (during preloader), or load it when it needed (e.g when about to start the level, it loads assets needed for that level)?

[Sam]

Resolution Retina / Normal

depends on your targeting devices. you do not have a "work for all" set. But you have to provide your game to run smooth and a file size that is acceptable.

So I would recommend that you use "normal" for devices >= 1024 and a double resolution for devices with higher resolution. Because you can assume that devices with high resolutions always are a bit faster. so the extra kb of the images should not matter so much.

load all images during the preload, that's the function for it.
- As I described above use > if is above NumberOfPixels < to decide when to load normal or retina.

Hope that helps

regards

[spencerTL]

I haven't looked at the implementation, but as Phaser uses PIXI and the latest PIXI has provision for a screen size independent of the pixel size and a way of specifying @2x graphics you should be able to utilise this for working across retina and non retina devices.

[Sam]

that's a good point.
Can you please provide a link to the pixi related @2x implementation?

[spencerTL]

My only knowledge of it is from their blog entry when new PIXI was released. Looking at it though it does give a brief demo of how to use:

http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/

[Sam]

Thanks, so many things ongoing I missed the PIXI displayresolution.