如何在不影响游戏的情况下让 iOS 的空白区域不可滚动？

Question

我正在尝试通过启用 body-scroll-lock 来改善我的 Phaser 游戏体验。

目前，official example 中的代码呈现如下

红色矩形指出的区域是可滚动的，这不太好，因为玩家可能会在游戏过程中不小心触摸到该区域。

我尝试更改配置

scale: {
    mode: Phaser.Scale.FIT,
    parent: 'phaser-example',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth,
    height: window.innerHeight,
},

我得到了

尽管游戏现在一团糟，但红色箭头指出的区域不可滚动。

我也试过another tutorial中的方法。

  <style>
    html,
    body {
      overflow: hidden;
    }
  </style>

  <script>
    document.body.ontouchend = (e) => {
      e.preventDefault();
    };
  </script>

none 有效。

这让事情变得更糟

body {
 position: fixed; 
}

如何在不影响游戏的情况下使该区域不可滚动？

Answer 1

我个人会用html和css来解决，但如果没有工作。，这是一个替代解决方案。

你可以使用 Phaser.Scale.FITscale-mode 并且只显示游戏场景，在视口中我会把 gameScene 保持在右边 scape/size.

这里是主要思想（我认为它有点hacky，但应该可行）:

你创建一个背景场景（你可以设置背景颜色或像水平视频一样的模糊效果）
在该场景之上显示包含游戏的实际场景

（根据游戏的大小，width 和 height 必须进行调整）

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.centerXand this.cameras.main.centerY would give you the coordinates of center of the scene.

如何在不影响游戏的情况下让 iOS 的空白区域不可滚动？

How do I make the blank areas not scrollable for iOS without hurting the game?

javascript

phaser-framework