Hello everyone
I got the following problem, at first when webpage is loaded, I want the screen of the game to take 700px by 400px on the webpage, and when the user press a button in game, I want the screen of the game to be fullscreen.
All goes all right for the fullscreen, when I just write
in the html file. But on the webpage load, the game fit the div, so is bigger than 700px by 400px.
On the other hand, if I define the div so it take exactely 700px by 400px
it makes perfectly what i want for the webpage load, but then the fullscreen is a black screen with the screen game only taken 700px by 400
So by staying with
, instead of Phaser.Scale.Fit in scale.mode, I was thinking of Phaser.Scale.None at fist and change it for Phaser.Scale.Fit later on Game for a good fullscreen.
But i don't know how to change scale.mode during the game ( I have test several things like scene.scale.mode = Phaser.Scale.FIT; but none works).
Does someone have an idea how to do ?
```
var config = {
type: Phaser.AUTO,
scale: {mode: Phaser.Scale.FIT,
//mode: Phaser.Scale.NONE,
parent: "Game",
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 700,
height: 400
},
physics: { default: 'arcade',
arcade: { gravity: { y: 300 },
debug: false
}
},
scene: [sceneA, sceneB]
};
```
As for the html
```
title
<body>
<div id="banner1"> </div>
<div id="menu">
<ul>
</ul>
</div>
<div id="banner2">
</div>
<!--
<div id="Game" style="height: 400px; width: 700px;" ></div>
-->
<div id="Game"></div>
<div id="mainContent">
<p>
</p>
</div>
</body>
```
Hey there,
I suggest you create a codepen with your code and reformat your initial post, so the community gets a better understanding of what you’re trying to achieve.
Best regards
Nick
Hello NickHatBoecker
I simplify it
In the main.js I have
var config = {
type: Phaser.AUTO,
scale: {mode: Phaser.Scale.FIT,
parent: "Game",
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 700,
height: 400
}, .....
Wheras in the html file I have
<div id="Game"></div>
In this configuration, the game fit the div (which depends of the device, but is greater than 700px by 400px), but the switch to fullscreen works well (game fit all the fullscreen).
So I specified more precisely the div
then the game takes exactely 700px by 400px on the screen as i wanted, but in the fullscreen the game stay in 700px by 400px or i wanted it to fit all the fullscreen
So I specified more precisely the div
<div id="Game" style="height: 400px; width: 700px;"></div>
then the game takes exactely 700px by 400px on the screen as i wanted, but in the fullscreen the game stay in 700px by 400px or i wanted it to fit all the fullscreen.
Note : in the code of my game, i have
var buttonfullscreen = this.add.image(game.config.width - 8, 8, 'fullscreen', 0).setOrigin(1, 0).setScale(0.5).setInteractive();
buttonfullscreen.on('pointerdown', function () { if (this.scale.isFullscreen) { buttonfullscreen.setFrame(0);
this.scale.stopFullscreen();
}
else { buttonfullscreen.setFrame(1);
this.scale.startFullscreen();
}
}, this);
for the switch to fullscreen
So my stategy is to let
<div id="Game"></div>
in the html file,
and to change scale mode in the config object in Phaser.Scale.NONE
var config = {
type: Phaser.AUTO,
scale: {mode: Phaser.Scale.NONE,
So the game takes exactely 700px by 400px
and in the code change the scale to Phaser.Scale.FIT when buttonfullscreen.on
but I don’t succes in finding what to write in the code
i tried things like scene.scale.mode = Phaser.Scale.FIT, but game freeze directly at start
Does someone know what to write or if another strategy is require ?
I just try something else, keeping Phaser.Scale.FIT in game config
putting
<div id="Game" style="height: 400px; width: 700px;"></div>
in html file
and add a global function
function change(a){
var elem = document.getElementById("Game");
if (a==1){
elem.style.width = "100%";
elem.style.height = "100%";
}
if (a==0){
elem.style.width = "700px";
elem.style.height = "400px";
}
}
to change the size of div
and put in in the buttonfullscreen.on
buttonfullscreen.on('pointerdown', function () { if (this.scale.isFullscreen) { change(0);
buttonfullscreen.setFrame(0);
this.scale.stopFullscreen();
}
else { change(1);
buttonfullscreen.setFrame(1);
this.scale.startFullscreen();
}
}, this);
The game runs, but now it does nothing, when i push the fullscreen button…
Maybe you should rethink this approach. Why would you choose to stay with a 700x400 canvas even on fullscreen?
If you think it’s reasonable you could try the following:
if (this.scale.isFullscreen) { buttonfullscreen.setFrame(0);
this.scale.stopFullscreen();
document.querySelector('body').classList.remove('fullscreen')
} else {
buttonfullscreen.setFrame(1);
this.scale.startFullscreen();
document.querySelector('body').classList.add('fullscreen')
}
This adds a class “fullscreen” to your body element, everytime the fullscreen is started and removes it when fullscreen stops.
And then you can add in your css:
#Game {
height: 400px;
width: 700px;
}
.fullscreen #Game {
height: 100%; /* Or anything you like */
width: 100%; /* Or anything you like */
}
Thanks NickHatBoecker
I want to be at 700*400 on webpage, so that the visitor can see the whole page without the need to scroll.
After, if he chooses to play the game, he has the option of the fullscreen (the game resolution stay in 700x400 but it stretchs to fit fullscreen.
I have just tried your suggestion having:
in html file
<div id="Game"></div>
in css file
#Game {
height: 400px;
width: 700px;
}
.fullscreen #Game {
height: 100%;
width: 100%;
}
in main.js
var config = {
type: Phaser.AUTO,
scale: {mode: Phaser.Scale.FIT,
parent: "Game",
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 700,
height: 400
}, ...........
and in sceneA.js
buttonfullscreen.on('pointerdown', function () { if (this.scale.isFullscreen) { buttonfullscreen.setFrame(0);
this.scale.stopFullscreen();
document.querySelector('body').classList.remove('fullscreen');
}
else {
buttonfullscreen.setFrame(1);
this.scale.startFullscreen();
document.querySelector('body').classList.add('fullscreen');
};
}
, this);
but the result when going to fullscreen stays unfortunately the same : the game doesn’t fit the fullscreen.
( fullscreen is black, and the game is upper-left and cover only the 700x400 pixels instead of fitting all the fullscreen)
Hello NickHatBoecker.
After another try, I finally succeded, using your method.
( I think I have forgotten to save the update of a file, or something like this).
Thanks a lot.
This post is resolved.
1 Like