Egret中Tiled Map第三方库架构概览

屏幕快照 2016-02-24 下午9.43.09.png Egret对于Tiled Map的支持很早就开始了,但相关教程一直不是非常全面。很多人在初次接触tiled这个第三方库的时候都会感觉无从下手。这篇文章将对tiled库架构设计做一个简单的说明。如果你对于Tiled Map比较熟悉,那么学习起来并不会感到困难,反而会发现越发顺手。 为了更好的理解tiled库的架构设计,本文会分为两个部分进行介绍。第一部分,我会介绍整个tiled运行时候的工作模型,第二部分我会简单介绍不同数据模块,功能模块到底由哪些类来负责执行。

tiled库运行工作模型 ———— 屏幕快照 2016-02-24 下午9.22.16.png 上图是tiled库一个运行模型,在tiled库中,负责两部分操作。 第一部分为数据解析,将网络加载的.tmx文件(实际上就是XML格式数据)进行解析。并且对应生成多种数据对象。 第二部分为渲染,根据不同方向类型,创建不同的渲染器。这些渲染器的差异在于图像变换,排列算法上的不同。渲染器会根据已经解析后的数据对象进行图像渲染。最终让用户可以看到地图画面。 tiled库详细模块类结构 ————- 屏幕快照 2016-02-23 下午6.26.34.png 上图是tiled库的源码文件结构。请注意,此结构为物理结构,和我们的module或者class不同,它并非代表逻辑结构。 动画数据 tiled库负责动画数据处理都包含在animation文件夹中,由TMXAnimation负责实现,而动画中,针对每一帧得数据则由TMXAnimationFrame负责记录。 两者之间的关系如下图 屏幕快照 2016-02-24 下午12.06.48.png 你可以将TMXAnimationFrame 理解未一个动画中每帧数据,它仅仅记录了每帧中所必须的数据内容。 TMXAnimation中包含一个名称为_animations的私有数据,它是一个类型为TMXAnimationFrame的数组,用来记录当前动画中所有帧的数据内容。其余工作则是负责对这些数据进行组合和操作。 但需要注意的是,TMXAnimation仅仅是对数据的操作,并不负责真正的渲染操作。另外一种简单的理解为TMXAnimation是TMXAnimationFrame的组装厂。 动画数据来源于你在TiledMap Editor所编辑的动画,如下图 屏幕快照 2016-02-24 下午12.16.27.png Tiled Map中是可以无限增加层的,也称为“图层”。如下图,是Tiled Map Editor中图层编辑器。 屏幕快照 2016-02-24 下午1.31.13.png 可以注意到,我们拥有三种类型图层可供使用,分别为“图层”,“对象层”和“图像图层”。 对于图层的处理,所有类文件都存放在layer文件夹中。 类关系如下: 屏幕快照 2016-02-24 下午1.49.12.png ILayer 作为图层的接口,定义了一个draw方法,用于tiled库进行渲染调用操作。TMXLayerBase为图层基类,其实现 ILayer 接口,并继承自 egret.Sprite。 TMXLayer 是针对普通图层的类,所有普通图层都由TMXLayer负责数据解析以及其中的可视化对象Z轴排列。 TMXImageLayer 则对应图像图层。 值得注意的一点是,当前layer文件夹中并不包含对象层的处理类。由于对象层的特殊性,此部分是由TMXObjectGroup来完成的。 TMXColorLayer属于相当特殊的一个类,其直接继承自egret.Sprite。事实上,TMXColorLayer负责渲染整个地图背景。你可以在地图属性栏中的Background Color中调整背景颜色。如下图: 屏幕快照 2016-02-24 下午1.55.42.png 渲染器 如何组织渲染,是tiled库中要解决的一个相对重要的问题。地图的最终效果都要由渲染器来控制画面刷新。 下图是Tiled Map所提供的三种地图排列样式。 tilemap.jpg 从左至右依方向次为,正常,Hexagonal(六边形)和45度(含交错) 针对这不同三种方向类型,tiled库提供了三个不同的渲染器,但在使用时你无需关心使用哪种渲染器,tiled会自动进行匹配。 你可以在render文件夹中找到渲染器的类,类关系图如下: 屏幕快照 2016-02-24 下午2.28.16.png TMXRenderer 作为渲染器的基类,所有渲染器均继承自它。 TMXOrthogonalRenderer 为正交渲染器,也就是为正常方向提供的渲染器。 TMXHexagonalRenderer 为六边形渲染器。 TMXIsometricRenderer 为iso渲染器,针对45度方向提供渲染器。 对象层与对象 前面我们说过,对象层由TMXObjectGroup负责实现。这是由于对象实现方式差异导致的设计结果。如果你查看TMXObjectGroup的源码,会发现它直接继承自egret.Sprite。 TMXObjectGroup作为对象层,需要保存所有对象的数据,这个对象数据由TMXObject负责记录。但在Tiled Map中,我们可使用的对象类型存在五种,如下图。 屏幕快照 2016-02-24 下午5.57.08.png 这五种类型对象由不同的类实现,这些类存放于shape文件夹和object文件夹中。 Polygon 负责矩形实现 Ellipse 负责椭圆形实现 Polygon 负责多边形实现 PolyLine 负责折线实现 TMXImage 负责图片对象实现 需要注意的一点是矩形和多边形都由 Polygon 实现,原因是矩形不过是多边形的一种。 地图与格子数据 当你想在游戏舞台上看到一个地图的时候,你应该使用TMXTilemap类。所有的数据和图像最终的渲染效果都由TMXTilemap进行表现,你可以将它理解为地图。 每一个格子的数据由TMXTileset负责描述,而所有的TMXTileset数据存放在TMXTilesetGroup中。 对于单一的格子,它的显示由TMXTile负责显示。所以你会看到舞台上有很多TMXTile对象,并且他们都有序的放在TMXTilemap中。 结尾 – 关于tiled库的结构概览,本文简单介绍到这里。在实际使用过程中,你可以非常方便的访问所有解析后的数据,并根据这些数据进行逻辑操作。 后面我会撰写一些tiled库实际使用和游戏中应用场景的教程。