0
348
Vistas¿Cómo hago que las áreas en blanco no se puedan desplazar para iOS sin dañar el juego?
Estoy tratando de mejorar mi experiencia de juego de Phaser habilitando el bloqueo de desplazamiento del cuerpo.
Actualmente, el código del ejemplo oficial se muestra así
donde las áreas señaladas por los rectángulos rojos son desplazables, lo cual no es bueno ya que el jugador podría tocar accidentalmente esa área durante el juego.
Traté de cambiar la configuración
scale: { mode: Phaser.Scale.FIT, parent: 'phaser-example', autoCenter: Phaser.Scale.CENTER_BOTH, width: window.innerWidth, height: window.innerHeight, },y tengo
donde el área señalada por la flecha roja no se puede desplazar aunque el juego ahora es un desastre.
También probé el enfoque en otro tutorial .
<style> html, body { overflow: hidden; } </style> <script> document.body.ontouchend = (e) => { e.preventDefault(); }; </script>ninguno de ellos funciona.
esto empeora las cosas
body { position: fixed; }¿Cómo hago para que el área no se pueda desplazar sin dañar el juego?
1 Respuestas
Responde la pregunta0
Yo personalmente usaría html y css para resolverlo, pero si no funciona, aquí hay una solución alternativa.
Puede usar el modo de escala Phaser.Scale.FIT y simplemente mostrar la escena del juego, con la ventana de visualización, mantendría la escena del juego en el paisaje/tamaño correcto.
Aquí la idea principal (creo que es un poco raro, pero debería funcionar) :
- creas una escena de fondo (puedes establecer un color de fondo o un efecto de desenfoque como en los videos horizontales)
- Además de esa escena, muestra la escena real que contiene el juego.
(dependiendo del tamaño del Juego habría que ajustar el width y height )
Y además usaría los estilos css:
html, body {padding:0; margin:0;}solo para estar en el lado de guardar, que el lienzo cubre toda la ventana.
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 ] };Información: solo menciono esta parte porque no es 100% obvia al principio:
this.cameras.main.centerXythis.cameras.main.centerYle darían las coordenadas del centro de lascene.