文介绍使用Flash ActionScript3构建由菱形网格组成的2.5D游戏地图。
实现的基本需求有以下几点:
1、 绘制宽高比2:1的菱形
2、 由菱形平铺10*10的区域组成地图
3、 不同的地图数据点变更颜色以区分,表示阻挡区块等
4、 通过鼠标位置x、y计算鼠标位置所属菱形,以高亮表示
为什么要选择菱形?
菱形具有四边相等,和对角线互相垂直的特点。拼接的时候不再需要其他变形操作,也方便美术资源按照区块形状剪裁或绘制。另外请参考等距视图相关知识。
为什么要宽高比是2:1?
1) 顶角角度接近于360度的1/3,即接近3D坐标系
2) 整数比在资源绘制和拼接时不易出现裂缝等问题
3) 大多数的绘图计算等对2的n次方进行过优化,对性能有一定提升,所以在2:1的基础上还要尽量选择2的n次方的长度值,比如64:32,32:16等。
类及功能说明:
MapProject.as 主类,仅用于显示map于此
map/Map.as 地图绘制类,有drawMap()等方法
map/Tile.as 网格类,用于绘制菱形网格
map/MapUtils.as 地图工具类,可以由坐标值获取坐标位置网格,或通过网格获取坐标
Tile.as类
绘制网格的函数: 其中的_fillColor可以通过public方法设置,表示网格填充颜色 这里仅需要注意,菱形的原点取的是菱形最左边的角的顶点,以方便后面MapUtil类坐标转化的计算。
Map.as类
首先有一个地图数据,0代表可通行区域,1代表不可通行区域(规则可自定)。 地图数据也可随机生成。
在构造函数中初始化了MapUtils类,用于地图中的坐标转化:
_mapUtil = new MapUtil();
Map类中最重要的是drawMap方法,用于绘制地图: drawMap()函数主要就是按照地图数据数组初始化每个网格,并排列网格,因为地图数据数组是2维数组,这里使用了嵌套for循环,下面两行代码用来布局网格: 另外Map.as类中为地图层添加了MouseMove和MouseClick事件,用于检测鼠标经过或点击位置所属的网格。
MapUtils.as类
主要是用来做坐标转换使用,其中有一个set方法用于赋值网格数组,这个赋值在Map.as中绘制完地图会进行: 根据Map中坐标值来获得所属区块是通过数学计算来获得的: 注意_xp,_yp的计算方程: 这两个方程可以由Map类中平铺网格时的方程(可参考上文),逆推而来: (本文完)
实现的基本需求有以下几点:
1、 绘制宽高比2:1的菱形
2、 由菱形平铺10*10的区域组成地图
3、 不同的地图数据点变更颜色以区分,表示阻挡区块等
4、 通过鼠标位置x、y计算鼠标位置所属菱形,以高亮表示
为什么要选择菱形?
菱形具有四边相等,和对角线互相垂直的特点。拼接的时候不再需要其他变形操作,也方便美术资源按照区块形状剪裁或绘制。另外请参考等距视图相关知识。
为什么要宽高比是2:1?
1) 顶角角度接近于360度的1/3,即接近3D坐标系
2) 整数比在资源绘制和拼接时不易出现裂缝等问题
3) 大多数的绘图计算等对2的n次方进行过优化,对性能有一定提升,所以在2:1的基础上还要尽量选择2的n次方的长度值,比如64:32,32:16等。
类及功能说明:
MapProject.as 主类,仅用于显示map于此
map/Map.as 地图绘制类,有drawMap()等方法
map/Tile.as 网格类,用于绘制菱形网格
map/MapUtils.as 地图工具类,可以由坐标值获取坐标位置网格,或通过网格获取坐标
Tile.as类
绘制网格的函数: 其中的_fillColor可以通过public方法设置,表示网格填充颜色 这里仅需要注意,菱形的原点取的是菱形最左边的角的顶点,以方便后面MapUtil类坐标转化的计算。
Map.as类
首先有一个地图数据,0代表可通行区域,1代表不可通行区域(规则可自定)。 地图数据也可随机生成。
在构造函数中初始化了MapUtils类,用于地图中的坐标转化:
_mapUtil = new MapUtil();
Map类中最重要的是drawMap方法,用于绘制地图: drawMap()函数主要就是按照地图数据数组初始化每个网格,并排列网格,因为地图数据数组是2维数组,这里使用了嵌套for循环,下面两行代码用来布局网格: 另外Map.as类中为地图层添加了MouseMove和MouseClick事件,用于检测鼠标经过或点击位置所属的网格。
MapUtils.as类
主要是用来做坐标转换使用,其中有一个set方法用于赋值网格数组,这个赋值在Map.as中绘制完地图会进行: 根据Map中坐标值来获得所属区块是通过数学计算来获得的: 注意_xp,_yp的计算方程: 这两个方程可以由Map类中平铺网格时的方程(可参考上文),逆推而来: (本文完)