"Screen resolution"

[dferasmus]

Dear Panda

 

I created a small game and noticed that a default screen size was set.

 

Is the size set in pixels? Is the size 640 x 480? Why was this default chosen? Is it for the aspect ratio 4:3 or is it legacy VGA?

 

I tested the game on a friend's Galaxy S4 mini and it appeared similar as on my desktop (both having had space to the sides not dedicated to the game). Is it recommended to remain on this resolution? What benefit would 16:9 have?

 

Are modifications to the screen resolution recommended to be made in config.js in the game folder?

 

The reason I ask is because I wish to upgrade my graphics and plan the layout and size of the sprites.

 

Thanks

dferasmus

 

PS: Why is there a dev.html and index.html. And what is "game.min.js" used for?

[Ninjadoodle]

Hi @dferasmus

 

Welcome to Panda

 

I did a lot of research on resolution etc. before starting on my games and believe that I have a really good system going now.

 

One of the reasons I've picked Panda, is it's ease of use and inclusion of Hires assets for powerful devices.

 

Here is what I do ...

 

1. Design your game for the base resolution of 480x320(landscape) or 320x480(portrait) -> this resolution is pretty much a standard when designing games for mobiles.

2. Make @2x and @4x assets of your graphics.

3. Setup your config file and let it know that you have these assets and to load them, when on an HD device.

4. Design you background a little wider and taller so that when you game is on a widescreen device ( I do mine at 640x480), you see more background instead of just black/white space. (Think of the 480x320 as your safe zone - this is where all the important elements go).

 

This way you will never overload an old weak device and at the same time you will provide crisp graphics for let's say iPad 2 Air (Retina).

 

Here is my sample config. The stuff in the 'system' brackets, sets up retina etc.

pandaConfig = {    sitelock: 'website.com',    name: 'gamename',    version: '1.0.0',    disableCache: true,    loader: {        barWidth: 100,        barHeight: 10    },    audio: {        stopOnSceneChange: false    },    system: {    	idtkScale: 'scaleAspectFit', // COCOON JS	hires: 4, // ALLOW UP TO @4x ASSETS (THIS NUMBER CAN BE HIGHER)        retina: true, // ENABLE RETINA MODE        scaleToFit: true, // DESKTOP BROWSERS	resizeToFill: true, // MOBILE BROWSERS	width: 480,	height: 320    },    storage: {        id: 'com.website.gamename'    },}

Hope this helps!

[PixelPicoSean]

The dev.html should be used during developing. If you installed pandatools, it start your game from dev.html too. After calling `panda build`, a game.min.js appears and it should be used with the index.html for production.

[enpu]

As PixelPicoSean said, the idea of two separate html files is that dev.html is for development and index.html is for production.

 

dev.html uses your unminified javascript files from src folder.

index.html uses minified game.min.js file.

[dferasmus]

Ninja, that is awesome and answers my questions well. Ill process the info this eve. Thanks!

 

Pixel / enpu, minimise! That makes SO much sense! In going to a platform I totally forgot about whitespace, etc. Something I used to be very pedantic about; I grew up on 9600 dialup! Ill investigate "panda build" this eve too. Thanks

 

dferasmus

[Ninjadoodle]

Hi @dferasmus - No problem, happy I could help!

 

@PixelPicoSean and @enpu - Thanks for explaining the use for the dev.html, I never knew that's what it was for haha. I will start doing this now

[dferasmus]

@Ninjadoodle!

 

Nice, it works great, I can even emulate it on the PC by resizing the browser.

 

@4x is huge! I assume you included scaling the background too, which ends up at 2560 x 1920; better than I have at home. You suggest larger?! Can any device handle this kind of resolution?

 

I think Im having trouble with the white/black space. I designed a pic at 640x480 and set the viewport to 480 to 320, but cant convince myself that the background is larger than the viewport. Could this be a PC problem?

 

I left "idtkScale:'scaleAspectFit',// COCOON JS" out. I guess that wasnt directly related? Ill investigate it later.

 

Thanks!

 

What is sitelock, version and name for? Is this purely text or do they have a function beyond indicating intellectual property?

 

I pretty much copied "game.System.orientation = game.System.LANDSCAPE;" from elsewhere as it is self explanatory and I thought it was needed. Now that Ive been thinking about layout I realise that some games should only be playable in 'landscape' while others should utilise two formats of layout, for horizontal and vertical. Is it possible to detect alignment? Should I just enforce landscape, Is it a standard?

 

I noticed a comma after "storage", are there any other tidbits your hiding

 

Thanks

dferasmus

[Ninjadoodle]

Hi @dferasmus

 

I've tested my game @4x on an iPad Air 2 (2048x1536) and it handles the @4x assets perfectly!

 

The resolution of devices is only gonna get bigger, so might as well be prepared. If your HTML5 game is played on an Ultra HD TV, it will look great if you have @4x assets included.

 

For now on PC, the 'scaleToFit' desktop option will only show the viewport, but @enpu mentioned that he will be looking into adding a 'resizeToFill' style scaling method, that shows the area outside the viewport, like in the mobile browser.

 

Yup, the site lock will stop your game being played from any other domain, than the one you enter. This is pretty easy to change, but at least some measure of protection. The others (name & version no.) are just info, I think? - someone please correct me if I'm wrong

 

There are not really any standards haha! It's really annoying and I feel that everybody is just experimenting with everything. The way I look at it - If you want your game to be TRULY cross platform (TV's, PCs, Wii U, devices etc.), then 'Landscape' is the way to go. Many people say that Portrait is a better mode for phones, but then how do you display your game if you want to make a Steam version for PC/MAC for example. Also - Angry Birds is 'Landscape' and no ones really complaining ... so yeah

 

PS. I accidentally added that comma and should delete it!

[enpu]

Yeah name & version is just for you.

Version can be handy when using git (version control), and you can use it together with pandatool.

 

For example if your version is 1.0.0, command 'panda version minor' changes your version into 1.1.0, creates new git tag, makes new commit and updates your config.js with new version number.

[dferasmus]

Ninja / enpu

 

Thanks