Hello all!
I have a question about game resizing - how i can do responsive game for mobile browser&
I use this properties in config:
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
On PC - game looks ok, on all screen.
But, if open the game in mobile browser - game have small size, not responsive.
Does it scale to fit if you resize the window?
Yes, on PC if i resize, the game size is responsive
Do you have
<meta name="viewport" content="width=device-width, initial-scale=1">
?
Yes, i use this property/
Screenshot this?
What’s in the HTML?
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #000;
}
</style>
</head>
Tag <body> has only scripts.
This looks right for scale mode FIT.
What do you want it to look like?
It would be OK if background get all screen size on mobile, like css property backround-size: cover;
It exists:
object-fit: cover;
oh but im not sure it’s for img and video inittial
I know this property in css - it uses for video and images, but how this use in Phaser?
Can you show example?
One of the possible options, made by me.
Youtube: https://youtu.be/Q9tEcOsouJk
Live: https://qugurun.github.io/phaser3/scale/index.html
Source: https://github.com/Qugurun/qugurun.github.io/tree/main/phaser3/scale
Thank you!
I will try to use!
Is very similar what i need.
In line 23, the number 400 indicates the minimum height to which the camera zooms.
Ok, thanks!
Qugurun, i tried using your code and this is a great solution if we use simple background (just color) on the game. But if we use some image - this way not save ratio our background:
Original ratio
not original - image is distortion
I changed your code a little - remove upgrade function for bacground and set scale = 5 for background
let bg = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'bg').setScale(5)
// bg.update = function () {
// this.displayWidth = app.width
// this.displayHeight = app.height
// }
result:
And this is the result I was looking for!
Thank you, Qugurun!
I am glad that my decision helped you.
You can play around with this.
let bg = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'bg')
bg.orgWidth = bg.displayWidth
bg.orgHeight = bg.displayHeight
bg.update = function () {
if (app.width * this.orgHeight/this.orgWidth < app.height){
this.displayWidth = app.height * this.orgWidth/this.orgHeight
this.displayHeight = app.height
}else{
this.displayWidth = app.width
this.displayHeight = app.width * this.orgHeight/this.orgWidth
}
}
In the horizontal view, it will always adjust proportionally in width, if the portrait view is proportional in height.
Cool, it’s more correct than using Scaling.
Exactly what is needed,thanks!