Question

我的目标是让一个精灵比屏幕更大，并让用户滚动查看它的不同部分，所以我想询问Phaser是否有任何精灵eventListener - 函数如：

    var canvas = window.document.getElementsByTagName('canvas')[0],
        prevX = 0, prevY = 0, mouseDown = false;

其中canvas可用作

    canvas.addEventListener('mousedown',function(e){
    });

   canvas.addEventListener('mousemove',function(e){
    });

Answer 1

我是这样做的。

在您的更新功能中：

if (this.game.input.activePointer.isDown) { 
  if (this.game.origDragPoint) {    
    // move the camera by the amount the mouse has moved since last update
    this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;
    this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;
  }
  // set new drag origin to current position
  this.game.origDragPoint = this.game.input.activePointer.position.clone();
}
else {
  this.game.origDragPoint = null;
}

Answer 2

如果可以使用相机，则可以尝试使用Phaser 2插件：https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

使用此插件，您可以启用垂直和水平滚动来模拟滚动到Phaser使用的canvas元素，还可以在初始化插件之前自定义移动，例如：

var game = new Phaser.Game(400, 400, Phaser.AUTO, '', {
  init: function () {

    //Load the plugin
    this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
  },
  create: function () {

    //Configure the plugin
    this.game.kineticScrolling.configure({
      kineticMovement: true,
      timeConstantScroll: 325, //really mimic iOS
      horizontalScroll: true,
      verticalScroll: false,
      horizontalWheel: true,
      verticalWheel: false,
      deltaWheel: 40
    });

    //Starts the plugin
    this.game.kineticScrolling.start();

    //Changing the world size
    this.game.world.setBounds(0, 0, 800, 800);
  },
  stopScrolling: function () {
    //Stop the plugin
    this.game.kineticScrolling.stop();
  }
});

还有一个用于Phaser 3的fork，请从GitHub检查回购。

关于Nicholls

Phaser滚动背景

2 个答案: