冒险岛地图绘制教学Vol.5(完结)

完结撒花。因为用过WCR2对up感兴趣所以看完了。在此记录下通过教学了解到的东西，和日后复习指南。

简介：这一些列视频是讲解了mxd地图如何被绘制出来的，具体点是提取mxd资源并在网页上绘制。

一共五期视频。

前三期视频主要讲解：

1. 2d图形学基础，以mxd的2D横版卷轴游戏做讲解。类似渲染管线这一套，从模型到视口的坐标转换到分层绘制渲染的概念。

2. 冒险岛地图.wz文件的构成和存储方式。这是由up用科学精神推导出来的，如其中的图层顺序。讲解了地图文件中每个节点具体的定义。

3. 游戏中的绘图元素：精灵图节点。介绍包含图片在精灵图中存储的信息。

在介绍完这些知识后，后两期视频实际上手开始制作地图绘制系统。

1. 设计完整个系统，使用C#编写客户端导出地图的信息和资源。推荐使用LINQPad编辑器。

开发流程：定义地图和节点数据结构->好像使用了WZ的api加载文件->图片资源保存为png->地图描述导出为json。

2. 前端工程，使用ts，webpack作为编译工具链开发。

开发流程：定义C#中的数据结构->解析json文件用对象缓存->引入2D渲染框架pixi.js，可以相机移动功能->了解pixi中场景树概念和级联变换行为

3. 核心内容，将前端加载好的mapInfo转换为pixi绘制对象在网页中绘制出来。转换诸如tile、obj、back等

4. 绘制back时，出现了bug，补充了关于背景中type对于背景行为的影响，如移动和平铺。主要介绍了通过复制背景计算坐标的方式平铺，和平铺范围的算法。

其中C#编程，ts编程还有pixi库和wz库的使用可能需要自行掌握或照着up主敲一遍代码了。