由于比较喜欢 run’n’jump 类的 2D platform 游戏，我最近研究了一些与 tile map 相关的知识。先前从 tonypa 的 tile based game 系列文章中了解技术层面的东西。但是他没有提到技术与艺术衔接的过程。后来得知了 tiled 这款开源的地图编辑器后，便有了机会窥探艺术与技术的结合方法。现在我更想知道艺术方面是如何配合这个过程来打造丰富的游戏世界的。

于是我在网上搜索了一些以前玩过的一些游戏的素材，发现了一些非常有趣的网站：The VG Resource 上面有很多从游戏包中分解出来的资源，适合学习使用。

我找到了非常多与 Tiles 相关的资源，有的非常复杂，也有的很简单。所以我选了一个比较简单的 Maplestory 一代的地图图块作分析：

查看更多…

Maplestory 是我初中时候比较着迷的一款网络游戏，有非常丰富的地图。但是当我发现它的图块构成时，才恍然大悟——居然如此简单。每一种风格的图块都有相似的结构，而且你仔细观察的话会发现，相同形状的图块的边缘部分几乎是相似的，这使得每一个同类型的图块都可以替换使用，避免平铺地图时产生单调的循环。

如果去掉同类的图形，一共可以得到13种不同类型的图块，每种图块都可以有若干个副本用于消除单调。绘制图块的时候，需要注意衔接的部分应该使用相同的纹理。经过分析，这13种图块一共使用6对不同的衔接边缘。我制作了一个 GIF 简单说明这些衔接部分（图中红色部分）：

注意斜坡的图块水平边缘被分为两段，需要跟两个不同的图块衔接。理解了这个简单的模版，就可以绘制不同风格的图块了：

为何说 Maplestory 的图块简单，因为它居然只有一种 2:3 的斜坡，但这并不妨碍它制作丰富的地形：

最后需要额外的工作对不同类型的图块进行派生，制作它们的兄弟副本来消除视觉疲劳即可。

¶其它资源

复古图块的绘制方式: Designing a retro pixel-art tile-set
神奇的 Wang Tile，一种无限不重复拼贴技术：Tile-Based Texture Mapping