从娑婆物语谈Isometric Tile Based

游戏引擎开发Hugh TsaiNov 28th 2010

Contents什么是 Isometric Tile Based Game

为什么开发 Isometric Tile Based Game Engine ( 特性 )

如何构建 Isometric Tile Based Game Engine( 以自主开发的 Misato 引擎为例 )

引擎架构

核心问题地图格式渲染与遮挡碰撞检测

What is Isometric Tile Based Game一些你或许知道或许并不了解的事实

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

什么是 Isometric Tile Based Game基于区块的斜 45° 等角游戏

电子游戏

2D 游戏

基于区块

横版或纵版滚轴游戏

多方向滚轴地图游戏

六边形地图 四边形地图

90° 方向投影

60° 方向投影 斜 45° 方向投影

不分块

3D 游戏

Why Use Isometric Tile Based Engine基于区块的斜 45° 等角渲染的特点

Isometric Tile Based Engine 特性优势

内存与计算资源消耗小可以用 2.5D 视角模拟 3D 效果，提升游戏表现力基于预先渲染，美术可以无限精细，风格自由

局限性游戏视角变化很有限严格 45° 方向的键盘控制，对部分用户不适应没有透视感，高度判定易产生错觉

Build Isometric Tile Based Engine以 Misato Engine 为例

Build Isometric Tile Based Engine娑婆物语

基于 Misato Engine 开发的 2.5D 动作角色扮演游戏。游戏中，玩家控制 Avatar ，利用加速跑、跳跃、防御、时间暂停

等技能，躲避或防御弹幕攻击，跨越悬崖，解开机关，从而解谜剧情并完成闯关任务。

Build Isometric Tile Based EngineMISATO ENGINE

Misato 引擎是一款基于 Flash 技术的 2.5D 网页游戏引擎。可以支持基于 2D 渲染的 2.5D 斜 45° 游戏模式，并且有 3D 的物理引擎支持。基于 Misato 引擎可以实现独特的 2D AVG 过场剧情与动画，与流畅绚丽的 2.5DARPG 游戏效果。

可定制的图形渲染模式3D 的物理效果高性能的 AI 算法

Why Named ByMISATO!

Build Isometric Tile Based EngineMISATO ENGINE 架构

Build Isometric Tile Based EngineMISATO ENGINE 架构

Build Isometric Tile Based EngineMISATO ENGINE 地图格式

Staggered Map

坐标变换公式：

Diamond Map Slide Map

logic.y = ( 2 * stage.y ) / TileHeigth; logic.x = ( stage.x / TileWidth ) - ( logic.y & 1 ) * ( TileWidth / 2 ); stage.x = logic.x * TileWidth + ( logic.y & 1) * ( TileWidth / 2 ); stage.y = logic.y * TileHeigth / 2;

Build Isometric Tile Based EngineMISATO ENGINE 地图格式

逻辑格子与图形个子对应表

mapLogicOrder = (mapGraphicRows - 1) / 2 + mapGraphicCols

logicRowStartCol[row] = (mapGraphicRows - 1) / 2 – row

logicRowEndCol[row] = mapLogicOrder - (mapGraphicCols - row)

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡Input: 游戏的逻辑地图Output: 符合正确遮挡顺序的游戏场景

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡Input: 游戏的逻辑地图Output: 符合正确遮挡顺序的游戏场景

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡静态场景渲染处理

假设：地形只由 1 X 1 的 Tile 构成无需做遮挡排序按照 LogicRow -> LogicCol 的优先顺序，依次绘制即可

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡动态遮挡的情况可能多种多样

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡根据不同的渲染需求选择适合的遮挡处理方法

测试问题描述：显示区域内有 S = 1000 个静态 Tile ， N 个动态的 Entity 。每一

个 Tile 与 Entity 都有高度，存在彼此之间存在遮挡。

1 、 N = O(1) 如 1 ~10 时算法 A ：预先 Cache 全部静态 Tile 为位图置于底层， 同时标记可

能与动态 Entity 发生遮挡的静态 Tile 。当静态 Tile 与动态Entity 发生遮挡时，在 Entity 之上再绘制依次 Tile 进行遮挡。

性能与 N 成正比，对于每一个 Entity ，每次遮挡的开销就是，需要重绘其周围一片区域。

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡根据不同的渲染需求选择适合的遮挡处理方法

测试问题描述：显示区域内有 S = 1000 个静态 Tile ， N 个动态的 Entity 。每一

个 Tile 与 Entity 都有高度，存在彼此之间存在遮挡。

2 、 N = O(log S) 如 100 时算法 B ：自定义一种基于链表的数据结构，来维护显示区域内的全

部 Tile 和 Entity 。动态调整 Tile 与 Entity 彼此之间的渲染顺序，并与 Stage 上的顺序进行同步。

基于 removeChild 和 addChildAt 操作，性能稳定，取决于每次调整的幅度。如果是滚屏显示，可以优化的空间很大。

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡根据不同的渲染需求选择适合的遮挡处理方法

测试问题描述：显示区域内有 S = 1000 个静态 Tile ， N 个动态的 Entity 。每一

个 Tile 与 Entity 都有高度，存在彼此之间存在遮挡。

3 、 N = S 如 1000 时算法 C ：全部从舞台上移除，全部重排排序后再全部重绘。

性能恒定，就是全部重新排序重新绘制的开销。

Build Isometric Tile Based EngineMISATO ENGINE 渲染与遮挡根据不同的渲染需求选择适合的遮挡处理方法测试结果：基于 FlashPlayer 10.0 每种算法渲染 100 次

算法 A 算法 B 算法 C0

500

1000

1500

2000

2500

3000

3500

N=1N=10N=100N=1000

单位 ms

2ms19ms

20ms50ms

Build Isometric Tile Based EngineMISATO ENGINE 碰撞检测

静态碰撞基于 Tile 的格子进行判断。对于不同的表面形状，为各种 Tile ，包括地形和各种建筑，障碍物。设定固定的物理包围壳，根据不同的包围面进行物理计算。

动态碰撞将地图再次切分为更小的格子，比如一个 Tile切为 9 个小格。保证每个格子中有且只有一个动态的 Entity 。

这样虽然消耗一定的内存空间。但是对于碰撞可以很简单的处理，也有利于寻径等操作。

Thanks

Hugh TsaiNov 28th 2010

Referencehttp://www.47school.com/soft/Flash/yykf/2009/1002/57697.html

http://www.tilebasedgames.com/http://members.chello.at/theodor.lauppert/games/iso.htm

http://www.tonypa.pri.ee/tbw/start.html