Matter.js 设置速度后未检测到碰撞

Question

var Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;
  
var ground;
var engine;
var player = [];

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  world = engine.world;
  Engine.run(engine)
  var options = {
    isStatic: true
  }
  engine.world.gravity.y = 0
  my = new Cell(200, 200, 32)
  ground = Bodies.rectangle(200, height, width, 20, options)
  World.add(world, ground)

  //  engine.world.gravity.y = 0;
  console.log(player)
}

function keyPressed() {
  player.push(new Cell(mouseX, mouseY, 32));
}

function draw() {
  background(0);
  my.show();
  for (var i = 0; i < player.length; i++) {
    player[i].show();
  }
}

function Cell(x, y, r) {
  this.body = Matter.Bodies.circle(x, y, r, r);
  //   World.add(world,this.body);
  this.r = r;
  World.add(world, this.body)
  //  player[player.length] = this;
  this.show = function() {
    var pos = this.body.position;
    Body.setVelocity(this.body, {
      x: mouseX - pos.x,
      y: mouseY - pos.y
    })
    push();
    translate(pos.x, pos.y)
    //  noStroke()
    ellipseMode(CENTER);
    ellipse(0, 0, this.r * 2, this.r * 2)
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

如果我注释掉 Body.setVelocity，那么碰撞可以正常工作，但在使用 Body.setVelocity 时却不行。上面的代码正在运行，请帮我解决碰撞检测问题。按键4次以上可以检查碰撞问题

Answer 1

有点不清楚你想达到什么目的。但是代码

Body.setVelocity(this.body, {
      x: mouseX - pos.x,
      y: mouseY - pos.y
  })

在show中，将速度设置为body，等于鼠标位置到body的距离，在每一帧重复。这导致每个 body 立即移动鼠标位置并破坏碰撞检测。

您必须将body的实际速度修改为一定值，取决于bod到鼠标位置的距离。例如：

vx = this.body.velocity.x + (mouseX - pos.x) * 0.001
vy = this.body.velocity.y + (mouseY - pos.y) * 0.001
Body.setVelocity(this.body, {x: vx, y: vy } )

var Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;
  
var ground;
var engine;
var player = [];

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  world = engine.world;
  Engine.run(engine)
  var options = {
    isStatic: true
  }
  engine.world.gravity.y = 0
  my = new Cell(200, 200, 32)
  ground = Bodies.rectangle(200, height, width, 20, options)
  World.add(world, ground)

  //  engine.world.gravity.y = 0;
  console.log(player)
}

function keyPressed() {
  player.push(new Cell(mouseX, mouseY, 32));
}

function draw() {
  background(0);
  my.show();
  for (var i = 0; i < player.length; i++) {
    player[i].show();
  }
}

function Cell(x, y, r) {
  this.body = Matter.Bodies.circle(x, y, r, r);
  //   World.add(world,this.body);
  this.r = r;
  World.add(world, this.body)
  //  player[player.length] = this;
  this.show = function() {
    var pos = this.body.position;
    
    vx = this.body.velocity.x + (mouseX - pos.x) * 0.001
    vy = this.body.velocity.y + (mouseY - pos.y) * 0.001
    Body.setVelocity(this.body, {x: vx, y: vy } )
    
    push();
    translate(pos.x, pos.y)
    //  noStroke()
    ellipseMode(CENTER);
    ellipse(0, 0, this.r * 2, this.r * 2)
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Matter.js 设置速度后未检测到碰撞

Matter.js collision not detecting after setting velocity

javascript

processing

collision

p5.js

matter.js