Portrait Mode : What's the Good Size?

[scion.miyazaki]

Hello everyone,

I am beginner on Phaser and I am looking for the Good practices to create a Phaser's Application.
Now I am making a Mobile Application, but I still don't know what is the Good Size for a Application on Portrait Mode (I want a High Definition for my application).

Thanks you so much

[in mono]

Depends on whether you want 1:1 resolution or you'd be fine with lower than that. Generally you should aim for the design to be at least a little bit responsive. Most 2-3 year old phones and tablets are 16:9, but the current trend is 18:9 and 18.5:9; and at the opposite end of the spectrum there's Apple tablets which are 4:3.

[scion.miyazaki]

@in mono,

thank you fro your reply ^^

I have big image and this image's size is 1499 x 2667px

So I created my Phaser application with that size : 

var game = new Phaser.Game(1499, 2667, Phaser.CANVAS, "phaser-example", {preload:Onpreload,create:Oncreate,update:Onupdate,render:Onrender});

And I insert the background like that :

bg1 = game.add.tileSprite(0, 0, 1499, 2667, "bg1");

Everything was ok because after that I changed the canvas size by CSS. Exemple :

canvas {
    width: 659px;
    height: 1172px;
}

I didn't have any problem with that method until yesterday. 
Indeed, I create a Button on my Phaser Application and that Button didn't work!
After many test, I found the reason: After Resize the canvas, click and hover stop to work.
You can test that BUG. Example:

1) Get this example : https://phaser.io/examples/v2/buttons/action-on-click

2) And change the zoom of your canvas by CSS like that:

canvas { zoom: 0.5; }

3) Click and Hover stop work ! lol

 

I would like to setGameSize() method like that ...

game.scale.setGameSize(659, 11172); 

... but I doesn't know how resize my background (I think that is impossible).
So I must to recreate my application with Good size. My problem is : I don't know what size I must to use.
Indeed, before that BUG I didn't care of application size because the canvas size was egal to devise size but now I can't do that.
So what's is the good size?

[in mono]

I think a better approach would be to set the game resolution to one of the following

• the native resolution of each device display
• a resolution of your choosing, but of the same aspect ratio of the device's display

I'd avoid changing the canvas via CSS - it might work for the element itself, but it may skew some positioning calculations (like it seems to be happening with that button) - to remedy that, it'd be a better idea to do it from within Phaser. If you're not going to resize and/or rotate the game, your best bet is to use

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

or better yet

game.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;

(I suspect the latter will work only if you've set exact resolution).

As for the background, if it's not going to repeat (if it's big enough to cover the whole screen), you can go with a regular sprite like this:

bg1 = game.add.sprite(0, 0, "bg1");
bg1.anchor.set(0.5, 0.5);
bg1.height = game.height;
bg1.scale.x = bg1.scale.y;
bg1.position.set(game.width * 0.5, game.height * 0.5);

What this does is to set the anchor to the middle of the image (it's by default in the top left corner; the 0.5 is a fraction of the width/height), set the height to the game height, then equalise scale.x and scale.y (so that the image doesn't look skewed), then position it in the middle of the game. If the image has some specifics that you want to be visible, you may have to think of another way. The way in the example should work for 16:9 and taller displays; if you want to accommodate 4:3 displays, you might want to do the opposite:

bg1.width = game.widht;
bg1.scale.y = bg1.scale.x;

so that you don't get top/bottom or left/right bars. You might want to do that in an if according to the aspect ratio. Keep in mind that the scale and the width/height are tied and if you change one of them, the other changes accordingly - i.e. if you have a 1000*1000 image, it will have scale (1, 1) initially if you don't resize it; if you set its width to 500, it will have scale (0.5, 1). Haven't tried that with TileSprite, you may try it yourself.

[scion.miyazaki]

Hello @in mono,

thank you for your reply. I will test it !