how to deal with multiple screen sizes

[sombriks]

Hello all,

 

previously i asked about how to change screen size dinamically, but even if i do that a few parts of the screen will be unused.

 

Example: ipad's have 768x1024 res, but some phones has 1280x720, so even if i use the scale capabilities from phaser i'll get some screen unused.

 

How you people deal with this?

 

Move camera?

 

Better outer decorations?

 

Looking for ideas, and any comment is welcome.

[Ninjadoodle]

Hi @sombriks

 

I design my games with a 'safe zone', where all the important / interactive elements go. I then make my backgrounds bigger than the 'safe zone', just like you mentioned.

 

This means that you game will fill the whole screen and look cool on all devices.

 

The only other options you have ...

 

- Dynamically positioning your objects, which only works for some types of games.

- For scrolling/platform games, you can show more of the level to the player.

- Stretching the game to fill the screen, which will look pretty bad on most devices. 

 

The 'safe zone' option is the best and I found, that things look good across all devices I've tested on.

 

I start with a base resolution of 480x320 (safe zone) and design my backgrounds at 640x480.

 

Hope this helps

[icp]

http://www.emanueleferonato.com/2015/03/25/quick-tip-how-to-scale-your-html5-endless-runner-game-to-play-it-on-mobile-devices/

[sombriks]

Hello you all and thanks for the answers!

 

I have not my problems completely solved, but i did some 'bruxaria' that might be enough to me (and maybe for the others!) in order to solve the nasty empty spaces on screen.

 

Some notes:

 

- kind of use the safezone idea, centering the camera to the center

- just "solve" landscape

- barely tested on chrome screen device emulator

function adjust() {	var divgame = document.getElementById("game");	divgame.style.width = window.innerWidth + "px";	//	divgame.style.height = window.innerHeight + "px";}function applyresizeRules(game) {	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;	game.scale.setResizeCallback(function () {		var divgame = document.getElementById("game");		this.camera.y = this.height * ((1 - (window.innerHeight / divgame.clientHeight)) / 2);	}, game);	game.scale.pageAlignHorizontally = true;	game.scale.pageAlignVertically = true;	game.scale.setScreenSize(true);    game.scale.refresh();    adjust();}window.addEventListener("resize", adjust);window.addEventListener("onload", adjust);var game = new Phaser.Game(1280, 960, Phaser.AUTO, "game");game.state.add("Boot", function () {	this.preload = function () {		game.load.image("bg", "img/safezone.png");	};	this.create = function () {		applyresizeRules(game);		game.world.setBounds(0, 0, 1280, 1280);		game.add.sprite(0, 0, "bg");	};});game.state.start("Boot");

the image used for this test follows: http://imgur.com/KWN97Dr

 

any suggestion is welcome.

 

hope it helps someone else.

[alagatar]

Hi,
About my way handle multiple screen sizes, I design game in one size (native) next i calc what additional graphics collection needed for most screens, usualy I have 3 collection, sd, native, hd. sd 320x480, native 1280x720, hd 2560x1440.
Than during game initialization you handle what nearest graphics collection now better, than calculate scale needed and scale scene with it. On game scene you calculate object position using difference in scale native and current.
Thats all)

[LutharVaughn]

I agree with Ninjadoodle about using a 'safe zone'. All of the main action would take place in a section that would work for any minimum screen size. Then any additional part of the screen will just be added as padding to the sides. One thing I do like to usually do though is set my menu/info at fixed locations from the edges of the screen. So then the additional part of the screen is in between the menu/information and the main action of the game that is taking place. 

[Abhishek Bharti]

..

[bubamara]

@Abhishek Bharti: as far as I know he's using his own framework, but you can get basic idea of how that works here : http://www.williammalone.com/articles/html5-game-scaling/

[NegativeIQ]

I have read that many people are creating game on half of screen size and than stretching it to full screen with CSS. I think you could do the same, create game on one resolution and just stretch it with CSS...Maybe its not best solution but i think its fast and elegant...

[AlexanderV]

We work with background.

There is a "game window" that includes "game field" and "interface".

Game window is about 1920x1080 (full hd). It streches fixed, approx. 7.8.

Everything that causes "empty space" then filled up by background that made the way to be smoothly linked to the game window gfx.

Thats the example how it can be while working with just framework having no possibilities to work with game elements outside the game window.

 

Sure, if you are able to work with game elements outside the game window space, so you can separate interface elements from game field elements, and put place them linked to "active screen position" - will it be game window or background - doesnt matter. That`s the best way I think.