The solution for scaling to fit game screen in Phaser

[anhma282]

Hello everyone,

 

I am new member in Phaser, I have an issue regarding scaling to fit the game screen on all mobile devices (IPhone, Android, ...). I have searched on Internet but failed to find out the best solution for that, so could you please help me or give me some comments for that?

 

I have tried to use EXACT_FIT, SHOW_ALL as some topics figured out but my issue is: all images in game become stretched. So can we fit the game screen on mobile devices and the images is also resized moothly?

 

Thank you for your time and sorry for my English.

[Chupup Games]

This is a problem for many people, i am still looking for any good solution here too!

The problem is that every version of iOS and Android handles things a bit differently and

also every mobile device can render the screen different..

[adamyall]

I'm new to Phaser myself, so I haven't been able to try any of this out yet.

That said, one of the great things about Phaser compared to a LOT of other HTML5 game engines out there is that it has a concept of a camera. Your sprite positions only correspond to pixel coordinates because that is how Phaser initializes it. What you will have to do it make your game such that it is logically in world space, not pixelspace. You can then move the camera around so that it follows your character etc. Once you have done this, the size of the screen should not matter.

Caveat 1: Because of the different sizes of screens, a character may appear big on a lowgrade android handset and tiny on a retina iPad. You will either have to manage multiple asset versions, or have a big-pixel aesthetic on larger devices.

Caveat 2: Some genre's of games work better as "any-size" games. A platformer will probably not change all that much, but a puzzle game will. For a puzzle game, you may want to have a square "playing-field" with padding surrounding it, so that the aspect ratio of the device does not affect the scale of the game.

[haden]

Basically if you use EXACT_FIT Phaser will try to fill the screen while respecting the aspect ratio of your game, this means your images will be zoomed without being stretched, but some parts of the screen won't be filled and will show the background color. This may not be an issue if your game has actually a uniform background color, so no one would notice that the screen isn't filled.

When using SHOW_ALL Phaser will fill out the whole screen without respecting the aspect ratio of your game, this is why the game images can become stretched. Please note that some sponsors actually require you to fill the whole screen, even if the game gets stretched.

 

The following post "How to scale entire game up" gives other possible solutions, but they require more work.

[rich]

Pretty much as haden said - there's no easy solution for this. My advice would be "don't worry". I.e. pick an aspect ratio that mostly fills the most common device sizes and have a background image / colour that fills the letterbox effect on the rest.

 

You could use "100%" as the width/height parameters, which will then make your game exactly the size of the display, but this has a highly undesirable performance impact and means you need to come up with your own internal game-specific way of aligning characters. It's very game specific however you look at it.

[anhma282]

Thank everybody for your support. I will try your advices. Thanks!