如何在p5.js中检测特定Sprite或Sprite组的碰撞？

核心问题 #

1. 精准碰撞检测需求：制作物理引擎对比Demo时，找不到p5play中检测单个Sprite与特定Sprite/Sprite组精准碰撞的方法——现有colliding()/overlapping()不适用：精灵不会重叠，且colliding()仅检测单帧碰撞，精度不足。
2. 角色穿模异常：用sprite.overlap(floor)判断后执行跳跃逻辑时，角色会穿过floor精灵，求原因与修复方案。

调试代码 #

HTML结构 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weebloo</title>

    <script defer src="lib/p5.min.js"></script>
    <script defer src="lib/p5.sound.min.js"></script>
    <script defer src="lib/p5play.js"></script>
    <script defer src="lib/planck.min.js"></script>
    <script defer src="lib/p5.input.js"></script>

    <style>
        html, body {
            font-family: "Comic Sans MS", cursive, sans-serif;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

JavaScript逻辑 #

let sprite;

let floor, wallLeft, wallRight, ceiling;

let bouncyFloor, slipperyFloor;

let jumpPower;
let agility = 2.5;
let jumps = 2;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(60);

  sprite = new Sprite(width / 2, height / 2, 30, 30);
  sprite.rotationLock = true;
  sprite.bounciness = 0.15;

  floor = new Sprite(width * 0.5, height, width, 10, "s");
  ceiling = new Sprite(width * 0.5, 0, width, 10, "s");
  wallLeft = new Sprite(0, height * 0.5, 10, height, "s");
  wallRight = new Sprite(width, height * 0.5, 10, height, "s");

  bouncyFloor = new Sprite(width * 0.25, height * 0.75, 100, 10, "s");
  bouncyFloor.bounciness = 1;
  slipperyFloor = new Sprite(width * 0.75, height * 0.75, 100, 10, "s");
  slipperyFloor.friction = 0;

  world.gravity.y = 10;
  jumpPower = world.gravity.y * 0.5;
}

function draw() {
  background(255);
  fill("rgba(0,0,0,0.7)");
  textSize(16);
  textAlign(LEFT);
  text(`fps: ${int(getFrameRate())}`, 10, 20);
  text(`xvel: ${Math.round(float(sprite.vel.x) * 10) / 10}`, 10, 36);
  text(`yvel: ${Math.round(float(sprite.vel.y) * 10) / 10}`, 10, 52);

  fill(0);
  textAlign(CENTER);
  text("bouncy", bouncyFloor.pos.x, height * 0.75 - 10);
  text("slippery", slipperyFloor.pos.x, height * 0.75 - 10);
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    sprite.vel.x = sprite.vel.x - agility;
  } else if (keyCode === RIGHT_ARROW) {
    sprite.vel.x = sprite.vel.x + agility;
  } else if (keyCode === DOWN_ARROW) {
    sprite.vel.y = sprite.vel.y + jumpPower;
  } else if (keyCode === UP_ARROW) {
    if (jumps > 0) {
      sprite.vel.y = sprite.vel.y - jumpPower;
      jumps = jumps - 1;
    } else {
      if (sprite.overlap(floor) == true) {         //
        jumps = 2;                                 //
        sprite.vel.y = sprite.vel.y - jumpPower;   // 这里会穿过地板？为什么？
        jumps = jumps - 1;                         //
      }                                            //
    }
  }
}

问题分析与解决方案 #

1. 精准碰撞检测的替代方案 #

p5play中可以通过以下方式实现精准的特定Sprite/组碰撞检测：

• 自定义边界判定：利用Sprite的pos、size属性计算接触距离，替代仅检测重叠的overlap()，适合无重叠的精准接触场景：

  // 检测角色是否站在floor上（无重叠，精准接触）
  function isOnFloor() {
    const spriteBottom = sprite.pos.y + sprite.size.y / 2;
    const floorTop = floor.pos.y - floor.size.y / 2;
    // 检测距离小于1像素，且角色处于下落/静止状态
    return spriteBottom >= floorTop - 1 && sprite.vel.y >= 0;
  }
  

• Sprite分组检测：将地面类Sprite加入Group，用sprite.collides(groundGroup)结合回调函数处理碰撞，比单帧检测更稳定：

  let groundGroup = new Group();
  groundGroup.add(floor, bouncyFloor, slipperyFloor);
  
  // 在draw()中持续检测碰撞
  function draw() {
    // ...其他逻辑
    sprite.collides(groundGroup, handleGroundCollision);
  }
  
  function handleGroundCollision(sprite, ground) {
    // 重置跳跃次数
    jumps = 2;
    // 修正角色位置，避免穿透
    sprite.pos.y = ground.pos.y - ground.size.y/2 - sprite.size.y/2;
    sprite.vel.y = Math.max(sprite.vel.y, 0); // 消除向下速度
  }
  

2. 角色穿模的原因与修复 #

原因：

• sprite.overlap(floor)仅检测当前帧是否重叠，当角色因重力快速下落时，可能在一帧内穿过floor（帧间穿透），此时overlap()返回false，跳跃逻辑不触发，角色继续下落穿透。
• 按键时直接修改vel.y的逻辑，未同步修正角色位置，导致物理引擎无法及时响应碰撞。

修复方案：

1. 替换碰撞检测逻辑：用上述isOnFloor()或collides()回调替代overlap()，确保接触瞬间触发跳跃重置。
2. 调整跳跃逻辑时机：将跳跃次数重置逻辑放在draw()中持续检测，而非仅在按键时检测：

   function draw() {
     // ...其他逻辑
     // 持续检测是否站在地面，重置跳跃次数
     if (isOnFloor()) {
       jumps = 2;
     }
   }
   
   function keyPressed() {
     // ...其他按键逻辑
     else if (keyCode === UP_ARROW) {
       if (jumps > 0) {
         sprite.vel.y = -jumpPower; // 直接赋值更清晰
         jumps--;
       }
     }
   }
   

3. 启用物理引擎自动碰撞响应：确保静态Sprite（如floor）的type设为s（代码已实现），动态Sprite（角色）保持默认d类型，让引擎自动处理碰撞穿透。

内容的提问来源于stack exchange，提问作者Clover Johnson