开源2d引擎怎么用？构建一个通用的轻量级

开源2d引擎怎么用？构建一个通用的轻量级其中 cx cy是当前单元格的网格坐标，xr yr表示在单元格内的位置（按比例表示，0 到 1.0）。xx yy就是根据cx cy xr yr算出来的位置结果值。通常我会基于网格（grid）去构建系统：例如关卡就是一系列空单元格（player 可以行走的单元格) 带上一些墙壁单元格。在这篇文章我使用 Haxe 来实现代码：如果你不知道 Haxe 是什么的话，简单来说 Haxe 是一种跨平台语言，能够编译生成多个平台的包，包括 Flash、C 和 iOS/Android。不过 Haxe 的基本语法很简单并且通用，所以你可以很容易把这些代码转换成任意语言。我会先创造一个简易轻量的 Entity 类作为基础，随后再慢慢拓展。传统的做法，不过其中也会有一些 tricky。第一版本的 Entity 类代码如下:class Entity { // 图形对象 public var sprite :

第一部分

原文链接：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 更多专注于逻辑而不是图形。

xx = Std.int( (cx xr) * 16 );yy = Std.int( (cy yr) * 16 );sprite.x = xx;sprite.y = yy;

同时有时候你想要根据 xx yy来初始化cx cy和xr 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 Entityhero.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 的 dx、dy添加互斥力，这样它们就能分开了。

2. 直接更改每个 entity 的位置，这样它们的移动方向会保持不变，它们也不会再重叠了。

3. 每一帧更新都让 xr yr轻微地从碰撞中心移出去，这样就不需要去更改当前的外力（dx，dy）

4. …还有无数种其他可能的实现方案

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

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

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

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

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

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

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 上。

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

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