p5.js SceneManager自定义事件监听器失效问题求助

问题根源 #

SceneManager的handleEvent方法默认仅支持触发p5.js内置的标准事件（如mousePressed、keyReleased），对于onPointerlockChange这类自定义事件名称，无法自动映射到场景内的对应方法。

修复方案 #

1. 调整全局事件回调逻辑

直接在全局的pointerlockchange回调中，获取当前激活的场景实例并调用其事件处理方法，替代原有的manager.handleEvent调用：

function onPointerlockChange(){
  const currentScene = manager.currentScene();
  // 检查当前场景是否存在对应处理方法，存在则执行
  if (currentScene && typeof currentScene.onPointerlockChange === 'function') {
    currentScene.onPointerlockChange();
  }
}

2. 确保场景内变量可正常访问

检查gamescene中canvas和player的作用域：

• canvas需为全局变量（setup中直接赋值canvas = createCanvas(...)，不要用let/const声明）
• 如果player是场景内部变量，需改为场景实例的属性，避免作用域丢失：

  function gamescene() {
    // 将player挂载到场景实例上
    this.player = { pointerLock: false };
    
    this.onPointerlockChange = function() {
      if (document.pointerLockElement === canvas.elt || document.mozPointerLockElement === canvas.elt) {
        console.log("locked");
        this.player.pointerLock = true;
      } else {
        console.log("unlocked");
        this.player.pointerLock = false;
      }
      console.log("triggered");
    }
  }
  

3. 补充指针锁定的触发条件

指针锁定必须通过用户交互触发，可在gamescene中添加点击画布请求锁定的逻辑：

function gamescene() {
  // ...其他代码
  
  this.mousePressed = function() {
    canvas.elt.requestPointerLock = canvas.elt.requestPointerLock || canvas.elt.mozRequestPointerLock;
    canvas.elt.requestPointerLock();
  }
}

完整修复后代码示例 #

全局代码：

let canvas;
let manager;

function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  manager = new SceneManager();
  manager.addScene(startscene);
  manager.addScene(gamescene);
  manager.showNextScene();
}

function onPointerlockChange(){
  const currentScene = manager.currentScene();
  if (currentScene && typeof currentScene.onPointerlockChange === 'function') {
    currentScene.onPointerlockChange();
  }
}

document.addEventListener('pointerlockchange', onPointerlockChange, false);

gamescene代码：

function gamescene() {
  this.player = { pointerLock: false };

  this.draw = function() {
    background(200);
    // 场景绘制逻辑
  }

  this.mousePressed = function() {
    canvas.elt.requestPointerLock = canvas.elt.requestPointerLock || canvas.elt.mozRequestPointerLock;
    canvas.elt.requestPointerLock();
  }

  this.onPointerlockChange = function() {
    if (document.pointerLockElement === canvas.elt || document.mozPointerLockElement === canvas.elt) {
      console.log("locked");
      this.player.pointerLock = true;
    } else {
      console.log("unlocked");
      this.player.pointerLock = false;
    }
    console.log("triggered");
  }
}

内容的提问来源于stack exchange，提问作者Hadj Ahmed