Tim*_*sen 7 javascript html5 game-engine game-physics 2d-games
因此,我正在尝试为我的游戏引擎制作一个简单的物理引擎,从而重新发明轮子(并学习很多东西).我一直在网上搜索,尝试(并失败)解决我当前的问题.关于这个问题有很多资源,但我发现的那些资源似乎都不适用于我的案例.
短暂的问题:当两个矩形碰撞时,碰撞分辨率在某些角上无法正常工作.失败的方式因矩形的大小而异.我正在寻找的是碰撞的"最短重叠"解决方案或另一个相当简单的解决方案(我愿意接受建议!).(向下滚动以获得更好的解释和插图).
警告:以下代码可能效率不高......
首先,这是我的物理循环.它只是循环遍历所有游戏实体并检查它们是否与任何其他游戏实体发生冲突.它效率不高(n ^ 2和所有这些),但它现在有效.
updatePhysics: function(step) {
// Loop through entities and update positions based on velocities
for (var entityID in Vroom.entityList) {
var entity = Vroom.entityList[entityID];
if (entity.physicsEnabled) {
switch (entity.entityType) {
case VroomEntity.KINEMATIC:
entity.pos.x += entity.vel.x * step;
entity.pos.y += entity.vel.y * step;
break;
case VroomEntity.DYNAMIC:
// Dynamic stuff
break;
}
}
}
// Loop through entities and detect collisions. Resolve collisions as they are detected.
for (var entityID in Vroom.entityList) {
var entity = Vroom.entityList[entityID];
if (entity.physicsEnabled && entity.entityType !== VroomEntity.STATIC) {
for (var targetID in Vroom.entityList) {
if (targetID !== entityID) {
var target = Vroom.entityList[targetID];
if (target.physicsEnabled) {
// Check if current entity and target is colliding
if (Vroom.collideEntity(entity, target)) {
switch (entity.collisionType) {
case VroomEntity.DISPLACE:
Vroom.resolveTestTest(entity, target);
break;
}
}
}
}
}
}
}
},
Run Code Online (Sandbox Code Playgroud)
这是实际碰撞检测的代码.这似乎也行不通.
collideEntity: function(entity, target) {
if (entity.getBottom() < target.getTop() || entity.getTop() > target.getBottom() || entity.getRight() < target.getLeft() || entity.getLeft() > target.getRight()) {
return false;
}
return true;
},
Run Code Online (Sandbox Code Playgroud)
这是问题开始出现的地方.我希望将实体简单地"推"出目标实体并将速度设置为0.只要实体和目标都是完美的正方形,这就可以正常工作.如果让我们说实体(gif中的玩家形象)是一个矩形,那么当最长边(X轴)与目标(正方形)碰撞时,碰撞将"滑动".如果我交换播放器尺寸使其短而宽,则Y轴会出现同样的问题.
resolveTestTest: function(entity, target) {
var normalizedX = (target.getMidX() - entity.getMidX());
var normalizedY = (target.getMidY() - entity.getMidY());
var absoluteNormalizedX = Math.abs(normalizedX);
var absoluteNormalizedY = Math.abs(normalizedY);
console.log(absoluteNormalizedX, absoluteNormalizedY);
// The collision is comming from the left or right
if (absoluteNormalizedX > absoluteNormalizedY) {
if (normalizedX < 0) {
entity.pos.x = target.getRight();
} else {
entity.pos.x = target.getLeft() - entity.dim.width;
}
// Set velocity to 0
entity.vel.x = 0;
// The collision is comming from the top or bottom
} else {
if (normalizedY < 0) {
entity.pos.y = target.getBottom();
} else {
entity.pos.y = target.getTop() - entity.dim.height;
}
// Set velocity to 0
entity.vel.y = 0;
}
},
Run Code Online (Sandbox Code Playgroud)
我该怎么做才能解决这个滑倒问题?在过去的5天里,我一直在反对这一点,所以如果有人能帮助我朝着正确的方向前进,我将非常感激!
谢谢 :)
- 编辑: -
如果仅沿左侧或右侧向一个方向移动,也会发生滑动.
- 编辑2工作代码: - 有关工作代码的示例,请参阅下面的答案!
您犯的重要逻辑错误是这一行:
if (absoluteNormalizedX > absoluteNormalizedY) {
仅当两个实体都是正方形时这才有效。
考虑 X 滑动示例的近乎极端情况:如果它们几乎在拐角处接触:
尽管该图有点夸张,但您可以看到,absoluteNormalizedX < absoluteNormalizedY在这种情况下 - 您的实现将继续解决垂直碰撞,而不是预期的水平碰撞。
另一个错误是,无论碰撞发生在哪一侧,您始终将相应的速度分量设置为零:只有当速度分量与碰撞法线方向相反时,才必须将其归零,否则您将无法移开从表面上看。
克服这个问题的一个好方法是在进行碰撞检测时也记录碰撞面:
collideEntity: function(entity, target) {
// adjust this parameter to your liking
var eps = 1e-3;
// no collision
var coll_X = entity.getRight() > target.getLeft() && entity.getLeft() < target.getRight();
var coll_Y = entity.getBottom() > target.getTop() && entity.getTop() < target.getBottom();
if (!(coll_X && coll_Y)) return 0;
// calculate bias flag in each direction
var bias_X = entity.targetX() < target.getMidX();
var bias_Y = entity.targetY() < target.getMidY();
// calculate penetration depths in each direction
var pen_X = bias_X ? (entity.getRight() - target.getLeft())
: (target.getRight() - entity.getLeft());
var pen_Y = bias_Y ? (entity.getBottom() - target.getUp())
: (target.getBottom() - entity.getUp());
var diff = pen_X - pen_Y;
// X penetration greater
if (diff > eps)
return (1 << (bias_Y ? 0 : 1));
// Y pentration greater
else if (diff < -eps)
return (1 << (bias_X ? 2 : 3));
// both penetrations are approximately equal -> treat as corner collision
else
return (1 << (bias_Y ? 0 : 1)) | (1 << (bias_X ? 2 : 3));
},
updatePhysics: function(step) {
// ...
// pass collision flag to resolver function
var result = Vroom.collideEntity(entity, target);
if (result > 0) {
switch (entity.collisionType) {
case VroomEntity.DISPLACE:
Vroom.resolveTestTest(entity, target, result);
break;
}
}
// ...
}
Run Code Online (Sandbox Code Playgroud)
为了提高效率,使用位标志而不是布尔数组。然后解析器函数可以重写为:
resolveTestTest: function(entity, target, flags) {
if (!!(flags & (1 << 0))) { // collision with upper surface
entity.pos.y = target.getTop() - entity.dim.height;
if (entity.vel.y > 0) // travelling downwards
entity.vel.y = 0;
}
else
if (!!(flags & (1 << 1))) { // collision with lower surface
entity.pos.y = target.getBottom();
if (entity.vel.y < 0) // travelling upwards
entity.vel.y = 0;
}
if (!!(flags & (1 << 2))) { // collision with left surface
entity.pos.x = target.getLeft() - entity.dim.width;
if (entity.vel.x > 0) // travelling rightwards
entity.vel.x = 0;
}
else
if (!!(flags & (1 << 3))) { // collision with right surface
entity.pos.x = target.getRight();
if (entity.vel.x < 0) // travelling leftwards
entity.vel.x = 0;
}
},
Run Code Online (Sandbox Code Playgroud)
请注意,与原始代码不同,上面的代码还允许角点碰撞 - 即沿两个轴解析速度和位置。