0
347
VistasHow do I make the blank areas not scrollable for iOS without hurting the game?
I'm trying to improve my phaser game experience by enabling body-scroll-lock.
Currently, the code from the official example renders like this
where the areas pointed out by the red rectangles are scrollable, which is not good as the player might accidentally touch that area during the game.
I tried to change the config
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth,
height: window.innerHeight,
},
and I got
where the area pointed out by the red arrow is not scrollable though the game is now a mess.
I also tried the approach in another tutorial.
<style>
html,
body {
overflow: hidden;
}
</style>
<script>
document.body.ontouchend = (e) => {
e.preventDefault();
};
</script>
none of them works.
this make things worse
body {
position: fixed;
}
How do I make the area not scrollable without hurting the game?
1 Respuestas
Responde la pregunta0
I personally would use html and css to solve it, but if it didn't work., here is an alternative solution.
You could use the Phaser.Scale.FITscale-mode and just display the game scene, with the viewport I would keep the gameScene at the right scape/size.
Here the Main Idea (I think it is abit hacky, but should work):
- you create a background Scene (you could set a background color or a blur effect like on horiziontal videos)
- On top of that Scene you display the actual Scene that contains the game
(depending the size of the Game the width and height would have to be adjusted)
And I would additionally use the css-styles:
html, body {padding:0; margin:0;}just to be on the save side, that the canvas covers the whole window.
var config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth,
height: window.innerHeight,
},
...
scene: [{
key: 'background',
create: function() {
// Game size
let width = 800;
let height = 600;
// Get The game Scene
let gameScene = this.game.scene.getScene('gameScene');
// Set Zone for the Game-Scene
gameScene.parent = this.add.zone(this.cameras.main.centerX, this.cameras.main.centerY, width, height);
// set the part of the scene that should be displayed
gameScene.cameras.main
.setViewport(gameScene.parent.x - gameScene.parent.width / 2, gameScene.parent.y - gameScene.parent.height / 2, gameScene.parent.width, gameScene.parent.height);
},
},
GameScene
]
};
Info: just mentioning this part because it it not 100% obvious at first:
this.cameras.main.centerXandthis.cameras.main.centerYwould give you the coordinates of center of thescene.