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,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 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++;}

译者的话

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