javascript - 狡猾的JS碰撞运动

Question

我目前正在玩 crafty js并用实体对象创建了 2D 自上而下的世界。

当任何固体物体发生碰撞事件时，我希望我的玩家不再能够朝所述物体的方向移动(因为有固体物体挡住了它的路径)。

我找到了一些 tutorials在线讨论了这个主题，但是他们调用的方法和函数被描述了。

    .onHit("solid", function(from) {
        console.log("ouch");
     }

我可以在我的玩家撞到固体时记录碰撞，但我不知道如何停止运动。

我知道我可以为每次碰撞设置特定的解决方案(例如，顶部边框可以更新 y 以离开特定的顶部碰撞)，但是我想要一个通用的方法，所以我的 Angular 色无法与任何固体结果发生碰撞移动。

当我尝试调用 from.x 时，我收到该元素是 undefined，而 from.length 等其他元素可以正常工作，这对我来说没有意义。

或者提供一些兼容最新crafty的演示代码？

Answer 1

碰撞数据

When I try to call from.x I receive that the element is undefined, while other elements such as from.length do work, which does not make sense to me.

onHit回调为您提供与 hit 相同的碰撞数据函数 - 一组碰撞结果。这就是您能够访问 length 属性的原因。

来自hit apidocs :

The returned collision data will be an Array of Objects with the type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.

---

MBR 碰撞

I know that I can setup specific solutions per collision (for example, a top border can update y to move off the specific top collision), however I want a generic approach so colliding with any solid results in my character not being able to move.

水平和/或垂直碰撞是我所知道的两个 axis-aligned bounding boxes 之间仅有的两种碰撞情况. AABB 在 Crafty 的碰撞检测中用作默认值(可以通过 .mbr() 访问)。
您提出的解决方案实际上是解决此类 AABB 冲突的常用解决方案。

使用箭头键或 WASD 移动绿色玩家。请注意黑色墙壁如何限制运动。

Crafty.init();

Crafty.e("2D, DOM, Color, Fourway, Collision, player")
      .attr({x: 32, y: 32, w: 32, h: 32})
      .color('green')
      .fourway()
      .bind('Moved', function(evt){
        if (this.hit('solid'))
          this[evt.axis] = evt.oldValue;
      });

Crafty.e("2D, DOM, Color, solid, top")
      .attr({x: 0, y: 0, w: 128, h: 1})
      .color('black');
Crafty.e("2D, DOM, Color, solid, bottom")
      .attr({x: 0, y: 127, w: 128, h: 1})
      .color('black');
Crafty.e("2D, DOM, Color, solid, left")
      .attr({x: 0, y: 0, w: 1, h: 128})
      .color('black');
Crafty.e("2D, DOM, Color, solid, right")
      .attr({x: 127, y: 0, w: 1, h: 128})
      .color('black');

<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>

---

SAT碰撞

Crafty 中有一个更复杂和精确的碰撞检测变体，使用 seperate axis theorem ，适用于任意两个凸多边形之间。可以通过 .collision() 指定自定义多边形碰撞框。 .
类似的解决方案用于解决 SAT 碰撞 - 使用碰撞结果中的信息将碰撞对象移回。

使用箭头键或 WASD 移动绿色玩家。请注意如何沿红线限制移动，红线代表凸多边形碰撞框。

Crafty.init();

Crafty.e("2D, Fourway, Collision, DOM, Color, WiredHitBox, player")
      .attr({x: 32, y: 32, w: 32, h: 32})
      .collision([0, 16, 16, 0, 32, 16, 16, 32])
      .color('green')
      .fourway()
      .bind('Moved', function(evt) {
        var hitDatas, hitData;
        if ((hitDatas = this.hit('solid'))) {
          // resolving collision for just one collider here and assuming SAT collision
          hitData = hitDatas[0];
          this.x -= hitData.overlap * hitData.normal.x;
          this.y -= hitData.overlap * hitData.normal.y;
        }
      });


Crafty.e("2D, Collision, DOM, Color, WiredHitBox, solid")
      .attr({x: 64, y: 64, w: 64, h: 64})
      .collision([0, 32, 32, 0, 64, 32, 32, 64])
      .color('black');

<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>

---

请务必阅读 apidocs有关所用组件和事件的更多信息。