从娑婆物语谈
Isometric Tile Based
游戏引擎开发
Hugh Tsai
Nov 28th 2010
Contents
什么是Isometric Tile Based Game
为什么开发Isometric Tile Based Game Engine(特性)
如何构建Isometric Tile Based Game Engine
(以自主开...
What is Isometric Tile Based Game
一些你或许知道或许并不了解的事实
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
什么是Isometric Tile Based Game
基于区块的斜45°等角游戏
电子游戏
2D游戏
基于区块
横版或纵版滚轴
游戏
多方向滚轴地图
游戏
六边形地图 四边形地图
90°方向投影 60°方向投影 斜45°方向投影
不分块
3...
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 Engine
MISATO ENGINE
Misato引擎是一款基于Flash技术的2.5D网页游戏引擎。可以支持基
于2D渲染的2.5D斜45°游戏模式,并且有3D的物理引擎支持。基
于M...
Build Isometric Tile Based Engine
MISATO ENGINE 架构
Build Isometric Tile Based Engine
MISATO ENGINE 架构
Build Isometric Tile Based Engine
MISATO ENGINE 地图格式
Staggered Map
坐标变换公式:
Diamond Map Slide Map
logic.y = ( 2 * stage.y )...
Build Isometric Tile Based Engine
MISATO ENGINE 地图格式
逻辑格子与图形个子对应表
mapLogicOrder =
(mapGraphicRows - 1) / 2 +
mapGraphicCol...
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
Input: 游戏的逻辑地图
Output: 符合正确遮挡顺序的游戏场景
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
Input: 游戏的逻辑地图
Output: 符合正确遮挡顺序的游戏场景
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
静态场景渲染处理
假设:地形只由1 X 1的Tile构成
无需做遮挡排序
按照 LogicRow -> LogicCol的优先顺序,依次...
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
动态遮挡的情况可能多种多样
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
根据不同的渲染需求选择适合的遮挡处理方法
测试问题描述:
显示区域内有S = 1000个静态Tile,N个动态的Entity。每一个Ti...
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
根据不同的渲染需求选择适合的遮挡处理方法
测试问题描述:
显示区域内有S = 1000个静态Tile,N个动态的Entity。每一个Ti...
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
根据不同的渲染需求选择适合的遮挡处理方法
测试问题描述:
显示区域内有S = 1000个静态Tile,N个动态的Entity。每一个Ti...
Build Isometric Tile Based Engine
MISATO ENGINE 渲染与遮挡
根据不同的渲染需求选择适合的遮挡处理方法
测试结果:基于FlashPlayer 10.0 每种算法渲染100次
0
500
1000
1...
Build Isometric Tile Based Engine
MISATO ENGINE 碰撞检测
静态碰撞
基于Tile的格子进行判断。对于不同的表面形状,为各种Tile,包
括地形和各种建筑,障碍物。设定固定的物理包围壳,根据不同
的...
Thanks
Hugh Tsai
Nov 28th 2010
Reference
http://www.47school.com/soft/Flash/yykf/2009/1002/57697.html
http://www.tilebased...
Upcoming SlideShare
Loading in …5
×

Misato engine hugh_tsai-蔡浩宇

1,819 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,819
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Misato engine hugh_tsai-蔡浩宇

  1. 1. 从娑婆物语谈 Isometric Tile Based 游戏引擎开发 Hugh Tsai Nov 28th 2010
  2. 2. Contents 什么是Isometric Tile Based Game 为什么开发Isometric Tile Based Game Engine(特性) 如何构建Isometric Tile Based Game Engine (以自主开发的Misato引擎为例) 引擎架构 核心问题 地图格式 渲染与遮挡 碰撞检测
  3. 3. What is Isometric Tile Based Game 一些你或许知道或许并不了解的事实
  4. 4. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  5. 5. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  6. 6. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  7. 7. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  8. 8. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  9. 9. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  10. 10. 什么是Isometric Tile Based Game 基于区块的斜45°等角游戏 电子游戏 2D游戏 基于区块 横版或纵版滚轴 游戏 多方向滚轴地图 游戏 六边形地图 四边形地图 90°方向投影 60°方向投影 斜45°方向投影 不分块 3D游戏
  11. 11. Why Use Isometric Tile Based Engine 基于区块的斜45°等角渲染的特点
  12. 12. Isometric Tile Based Engine 特性 优势 内存与计算资源消耗小 可以用2.5D视角模拟3D效果,提升游戏表现力 基于预先渲染,美术可以无限精细,风格自由 局限性 游戏视角变化很有限 严格45°方向的键盘控制,对部分用户不适应 没有透视感,高度判定易产生错觉
  13. 13. Build Isometric Tile Based Engine 以 Misato Engine 为例
  14. 14. Build Isometric Tile Based Engine 娑婆物语 基于Misato Engine开发的2.5D 动作角色扮演游戏。 游戏中,玩家控制Avatar,利用加速跑、跳跃、防御、时间暂停等 技能,躲避或防御弹幕攻击,跨越悬崖,解开机关,从而解谜剧 情并完成闯关任务。
  15. 15. Build Isometric Tile Based Engine MISATO ENGINE Misato引擎是一款基于Flash技术的2.5D网页游戏引擎。可以支持基 于2D渲染的2.5D斜45°游戏模式,并且有3D的物理引擎支持。基 于Misato引擎可以实现独特的2DAVG过场剧情与动画,与流畅绚 丽的2.5DARPG游戏效果。 可定制的图形渲染模式 3D的物理效果 高性能的AI算法 Why Named By MISATO!
  16. 16. Build Isometric Tile Based Engine MISATO ENGINE 架构
  17. 17. Build Isometric Tile Based Engine MISATO ENGINE 架构
  18. 18. Build Isometric Tile Based Engine MISATO 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;
  19. 19. Build Isometric Tile Based Engine MISATO ENGINE 地图格式 逻辑格子与图形个子对应表 mapLogicOrder = (mapGraphicRows - 1) / 2 + mapGraphicCols logicRowStartCol[row] = (mapGraphicRows - 1) / 2 – row logicRowEndCol[row] = mapLogicOrder - (mapGraphicCols - row)
  20. 20. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 Input: 游戏的逻辑地图 Output: 符合正确遮挡顺序的游戏场景
  21. 21. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 Input: 游戏的逻辑地图 Output: 符合正确遮挡顺序的游戏场景
  22. 22. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 静态场景渲染处理 假设:地形只由1 X 1的Tile构成 无需做遮挡排序 按照 LogicRow -> LogicCol的优先顺序,依次绘制即可
  23. 23. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 动态遮挡的情况可能多种多样
  24. 24. Build Isometric Tile Based Engine MISATO 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,每次遮挡的开销就是,需要 重绘其周围一片区域。
  25. 25. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 根据不同的渲染需求选择适合的遮挡处理方法 测试问题描述: 显示区域内有S = 1000个静态Tile,N个动态的Entity。每一个Tile 与Entity都有高度,存在彼此之间存在遮挡。 2、N = O(log S) 如 100 时 算法B:自定义一种基于链表的数据结构,来维护显示区域内的全 部Tile和Entity。动态调整Tile与Entity彼此之间的渲染顺序,并 与Stage上的顺序进行同步。 基于removeChild和addChildAt操作,性能稳定,取决于每次调 整的幅度。如果是滚屏显示,可以优化的空间很大。
  26. 26. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 根据不同的渲染需求选择适合的遮挡处理方法 测试问题描述: 显示区域内有S = 1000个静态Tile,N个动态的Entity。每一个Tile 与Entity都有高度,存在彼此之间存在遮挡。 3、N = S 如 1000 时 算法C:全部从舞台上移除,全部重排排序后再全部重绘。 性能恒定,就是全部重新排序重新绘制的开销。
  27. 27. Build Isometric Tile Based Engine MISATO ENGINE 渲染与遮挡 根据不同的渲染需求选择适合的遮挡处理方法 测试结果:基于FlashPlayer 10.0 每种算法渲染100次 0 500 1000 1500 2000 2500 3000 3500 算法A 算法B 算法C N=1 N=10 N=100 N=1000 单位ms 2ms 19ms 20ms 50ms
  28. 28. Build Isometric Tile Based Engine MISATO ENGINE 碰撞检测 静态碰撞 基于Tile的格子进行判断。对于不同的表面形状,为各种Tile,包 括地形和各种建筑,障碍物。设定固定的物理包围壳,根据不同 的包围面进行物理计算。 动态碰撞 将地图再次切分为更小的格子,比如一个Tile切为9个小格。保证每 个格子中有且只有一个动态的Entity。 这样虽然消耗一定的内存空间。但是对于碰撞可以很简单的处理, 也有利于寻径等操作。
  29. 29. Thanks Hugh Tsai Nov 28th 2010 Reference http://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

×