【译】构建一个通用的轻量级 2d 游戏引擎(part 1+2)

作者:mnikn
2022-05-12
12 13 1

第一部分

原文链接:https://deepnight.net/tutorial/a-simple-platformer-engine-part-1-basics/ 

作者:Sébastien Bénard,《死亡细胞》的主创
译者:mnikn

1. 简介

如果你对要做什么事情没什么想法的话,是很难去构建一个 2d 的平台类游戏引擎的。因此第一原则是从简单入手。你知道 KISS 原则吗?Keep It Short and Simple:这就是我们接下来要做的事情。

我的大部分游戏都是从一个简单的画布开始的,最终成长为一个 2d platformer 或者 top-down 风格的游戏。即使是死亡细胞底层也是用同样的引擎。顺带一提,platformer 和 top-down 的游戏引擎区别只在于,platformer 相较于 top-down 多添加了重力的因素而已。

在这篇文章我使用 Haxe 来实现代码:如果你不知道 Haxe 是什么的话,简单来说 Haxe 是一种跨平台语言,能够编译生成多个平台的包,包括 Flash、C 和 iOS/Android。不过 Haxe 的基本语法很简单并且通用,所以你可以很容易把这些代码转换成任意语言。

我会先创造一个简易轻量的 Entity 类作为基础,随后再慢慢拓展。传统的做法,不过其中也会有一些 tricky。 第一版本的 Entity 类代码如下:

class Entity {
  // 图形对象
  public var sprite : YourSpriteClass;
  // 基础坐标
  public var cx : Int;
  public var cy : Int;
  public var xr : Float;
  public var yr : Float;
  // 结果坐标
  public var xx : Float;
  public var yy : Float;
  // 移动相关
  public var dx : Float;
  public var dy : Float;
  public function new() {
    //...
  }
  public function update() {
    //...
  }
}

2. 坐标系统

首先我会尝试去构建一个专注于易用性的坐标系统。

通常我会基于网格(grid)去构建系统: 例如关卡就是一系列空单元格(player 可以行走的单元格) 带上一些墙壁单元格。

其中 cx,cy 是当前单元格的网格坐标,xr,yr 表示在单元格内的位置(按比例表示,0 到 1.0)。xx,yy 就是根据 cx,cy + xr,yr 算出来的位置结果值。

有了这样一个系统做事情就方便了很多。例如,检查一个 Entity 右边的碰撞情况变得很简单:检查下 cx+1,cy 坐标就好。同样你可以使用 xr 来检测当前单元格右方是否有 Entity。

为了简化这一过程,我们抽离出一个方法 hasCollision(cx,cy),当对于参数上有碰撞时返回 true,否则为 false

if( hasCollision(cx+1,cy) && xr>=0.7 ) {
  xr = 0.7; // 给 xr 设置上限 
  // ...
}

xx,yy 结果值只会在 update 循环函数结束时更新。

注意: 有时候更新 sprite.x 和 sprite.y 会有细微的性能损耗:当你改变这些值时,大量的东西会根据自身内部逻辑去做更新。例如坐标一更新,对象又要重新渲染。所以有时候你不会想直接操作 sprite.x,出于性能考虑我会用结果变量 xx

同时这会让跨平台开发变得更加容易,Entity 更多专注于逻辑而不是图形。

// 假设网格中每个单元格的大小是 16px
xx = Std.int( (cx+xr) * 16 );
yy = Std.int( (cy+yr) * 16 );
sprite.x = xx;
sprite.y = yy;

同时有时候你想要根据 xx,yy 来初始化 cx,cyxr,yr

public function setCoordinates(x,y) {
  xx = x;
  yy = y;
  cx = Std.int(xx/16);
  cy = Std.int(yy/16);
  xr = (xx-cx*16) / 16;
  yr = (yy-cy*16) / 16;
}

3. 在 X 坐标上移动

每一帧中 xr 都会添加上 dx 的值。

如果 xr 大于 1 或者小于 0(例如,Entity 已经超出了它当前单元格的边界),那么 cx 坐标会对应进行更新。

while( xr>1 ) {xr --;cx ++;}
while( xr<0 ) {xr ++;cx --;}

为了让移动更加顺滑,你应该要在 dx 上添加摩擦系数(效果会比简单加个 if 判断要好)。

dx *= 0.96;

在主循环代码里面,当对应的事件触发时(按钮触发或者其他情况),你只需要简单改下 dx 的值,就能让 entity 移动。

// hero Entity
hero.dx = 0.1;
// 或者
hero.dx += 0.05;

4. X 坐标的碰撞检测

基于这个系统,检测和管理碰撞变得非常简单:

if( hasCollision(cx+1,cy) && xr>=0.7 ) {
  xr = 0.7;
  dx = 0; // stop movement
}
if( hasCollision(cx-1,cy) && xr<=0.3 ) {
  xr = 0.3;
  dx = 0;
}

5. X 坐标上的处理完成!

以下是处理 X 坐标的完整代码,这已经是极简版了:)

xr+=dx;
dx*=0.96;
if( hasCollision(cx+1,cy) && xr>=0.7 ) {
  xr = 0.7;
  dx = 0;
}
if( hasCollision(cx-1,cy) && xr<=0.3 ) {
  xr = 0.3;
  dx = 0;
}

6. Y 坐标又要怎么处理?

大部分情况下都是 CV 大法。可能处理方式和 X 坐标有点不同,具体要看你的游戏类型是什么。例如对 platformer 来说,当发生 Entity 脚下检测到碰撞时,你可能希望 yr 的上限值是 0.5 而不是 0.7。

yr+=dy;
dy+=0.05;
dy*=0.96;
if( hasCollision(cx,cy-1) && yr<=0.3 ) {
  dy = 0;
  yr = 0.3;
}
if( hasCollision(cx,cy+1) && yr>=0.5 ) {
  dy = 0;
  yr = 0.5;
}
while( yr>1 ) { cy++; yr--;}
while( yr<0 ) {cy--; yr++;}

第二部分

原文链接:https://deepnight.net/tutorial/a-simple-platformer-engine-part-2-collisions/

在上篇文章中,我实现了一个任何语言都可以实现的(我用的是 Haxe),简单但有效的 2D 引擎,这个引擎已经可以处理基本的物理逻辑和关卡中的碰撞。

但是 entity 之间的碰撞又要怎么处理? 如果你的游戏不需要非常严格的碰撞检测的话,其实实现起来没有想象中的那么难。

1. Demo

接下来我们实现的 demo 并不是一个 platformer,而是一个 top-down 风格的 demo,其实这相当于去掉重力因素的 platformer。我的一个游戏 Atomic Creep Spawner 就是使用这个引擎实现的,在这个教程中我会教你如何一步步来实现它。

使用方向键来移动周围的黄色球。(译注:我也不知道作者说的什么意思。。原话就是 Use arrow keys to move the yellow ball around)

注意:因为我们实现关卡碰撞的方式,有时候可能 entity 的显示位置会有点奇怪。与其把 xr 的下限设置成 0.3,不如让 xr 的下限可以小于 0.3,这样如果你想要通过修改 dx 让 entity 和墙不要重叠,效果会更好(同时把 xr 的下限设置为 0.1)。

2. 开始实现

我们先回忆下之前实现的功能,下面是 Entity 类的伪代码:

class Entity {
  // 图形对象
  public var sprite : flash.display.Sprite;
  // 基本坐标
  public var cx : Int;
  public var cy : Int;
  public var xr : Float;
  public var yr : Float;
  // 结果坐标
  public var xx : Float;
  public var yy : Float;
  // 移动相关
  public var dx : Float;
  public var dy : Float;
  public function new() {
    //...
  }
  public function update() {
    // X 坐标处理 (例如,移动处理和关卡碰撞检测)
    //...
    // Y 坐标处理 (例如,移动处理和关卡碰撞检测)
    //...
    // 更新图形
    //...
  }
}

3. 检测 entity 间的碰撞

实现的思路和之前一样尽可能简单,每个 entity 会有个 radius 属性,这个属性决定了 entity 的碰撞体积(hitbox)。需要注意的是,对于关卡碰撞,我们还是使用之前的检测方式。

public var radius : Float;

这样一个检测方式能够满足大部分情况,除非你的游戏对碰撞的精度要求非常严格(例如主打物理的游戏)。同时需要注意的是这样一个实现方式并非是最完整的:因为它实现的粒度足够小,所以很容易做后续的拓展和维护。

下面的截图(来源:arkadeo.com)中,黄色的圈圈表示的是物体的碰撞面。简单来说,游戏中通过这些碰撞面来检测 player 是否能够摧毁敌人(这感觉不错):)。

下面我们来实现一个简单的碰撞检测函数:

public inline function overlaps(e:Entity) {
  var maxDist = radius + e.radius;
  // 经典的距离公式
  var distSqr = (e.xx-xx)*(e.xx-xx) + (e.yy-yy)*(e.yy-yy);
  return distSqr<=maxDist*maxDist;
  // 注意: 用平方根做比较不是必须的
}

注意我把方法标记成了 inlined,因为一些平台例如 Flash,对于函数的调用会有细微的性能损耗。

好了!现在对于“我们的 hero 对象有没有和其他 entity 发生碰撞”这类问题,我们都可以通过上面的函数回答。很酷的是我们其实已经可以用它来做游戏了。

4. 互斥(repel)

在一个游戏中,大部分有关两个 entity 之间的碰撞最后都会导致其中一个 entity 被摧毁(例如:捡起物品,被子弹击中…)。但是有时候你想要让 entity 之间不维持碰撞(也就是:互斥(repel))。

我们假设有两个 entity 发生相交:蓝色的圈和黄色的圈。我们之所以知道它们处于相交状态,是因为它们之间的距离小于它们半径的和。 

接下来我们要做的就是让蓝圈向左下角移动,让右圈向右上角移动。我们有很多种实现方式:

  1. 给每个 entity 的 dxdy 添加互斥力,这样它们就能分开了。
  2. 直接更改每个 entity 的位置,这样它们的移动方向会保持不变,它们也不会再重叠了。
  3. 每一帧更新都让 xr,yr 轻微地从碰撞中心移出去,这样就不需要去更改当前的外力(dx,dy)
  4. …还有无数种其他可能的实现方案

采用哪种方案取决于你想要什么效果,和你认为发生重叠的容忍值(tolerance)。例如对于方案 1 来说,如果两个 entity 突然重叠(例如黄圈快速向蓝圈冲过去),实际上有几帧它们还是会处于重叠状态,直到互斥力把它们分开。 通常我会使用方案 1,因为它最简单(你知道我的风格的)。如果这个方案不符合我的预想,我会添加一些新的东西来修正它(例如强制更改位置,方案二)。

注意:上述的例子中红线代表重叠的距离,如果你想要根据重叠情况来添加互斥力,你大概率会用到它。或者如果重叠的程度太多了,你也可以直接用这个值来对 entity 强制更新位置。

碰撞相关的代码都会放在 update 函数里,在 X 和 Y 坐标处理代码的上方。为什么要这样处理?因为通常我们想要让关卡碰撞优先于 entity 间的碰撞(你不想要 entity 卡在墙上吧)。虽然加上了互斥力后这种情况应该不会发生,不过随着游戏的开发,我不知道接下来会往我的互斥算法拓展什么东西。

对于每个 entity,你都需要去检测是否和其他 entity 发生碰撞。

理论上的警告:如果你在游戏中会有大量的 entity,这样的做法可能会消耗大量的性能。

实际上:通常你不会有这么多 entity 会发生碰撞并且还需要互斥。例如:通常来说子弹不会做这样的互斥处理,当子弹发生碰撞时就会被摧毁了。即使你真的有这么多 entity,你总会找到方案去过滤一些根本没可能发生碰撞的 entity。 例如比较 cxcy 坐标。

for( e in ALL ) {
  // 先来一个简易的距离检测
  if( e!=this && Math.abs(cx-e.cx) <= 2 && Math.abs(cy-e.cy) <= 2 ) {
    // 真正的距离检测
    var dist = Math.sqrt( (e.xx-xx)*(e.xx-xx) + (e.yy-yy)*(e.yy-yy) );
    if( dist <= radius+e.radius ) {
      var ang = Math.atan2(e.yy-yy, e.xx-xx);
      var force = 0.2;
      var repelPower = (radius+e.radius - dist) / (radius+e.radius);
      dx -= Math.cos(ang) * repelPower * force;
      dy -= Math.sin(ang) * repelPower * force;
      e.dx += Math.cos(ang) * repelPower * force;
      e.dy += Math.sin(ang) * repelPower * force;
    }
  }
}

第一个 IF 用来做初步判断“我是否真的需要检查这个 entity?它的距离足够近吗?” 通过后我们会做一些真正的平方根距离检查。如果我们真的发现有碰撞,我们就根据神奇的 ATan2 公式去计算 entity 的移动角度。

同时我们会计算 repelPower,这个值(0 到 1)取决于 entity 之间的重叠程度。

现在我们有移动角度,我们有“重叠的系数”,我们就可以用 cos(移动角度) 和 sin(dy),计算出实际需要施加的互斥力,然后把结果反加(变为负数)到其他 entity 上。 

这就是所有的实现过程了。

译者的话:翻译水平有限可能会有错漏,有问题的话麻烦指出。这篇文章里面的思路,无论是打算自己从零开始,还是使用一个通用的游戏引擎,都很有参考价值。而且作者的官网里面都是宝藏!他做了一些免费开源的工具,在我看来这些工具质量比市面上大多数收费的工具都要好,建议关注一波。