Sign in to follow this  
dferasmus

"Screen resolution"

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :ph34r:

 

Thanks

dferasmus

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.