自制45度2D引擎之坐标转换更新版

在上一个博文中我有提到自制45度坐标转换

http://blog.csdn.net/stophin/article/details/19247903

点击打开链接

这次是一个新的转换方法，旧版本在坐标转换上还存在一些问题，并且计算量大，这些都将在本博文中提到并解决。

45度坐标转换，说得简单一点就是将平面的矩形转换为斜面上的斜平行四边形，和其逆转换。有许多游戏是直接使用正方形到菱形的转换，

这只是这种转换的一个特例。那么为什么要做这种转换呢？因为平面矩形用于控制物体的位置，并且可以支撑更多的算法，例如A*寻路，

斜面则用于显示物体，并且可以根据物体贴图的参数来计算物体在平面上的几何尺寸。平面和斜面是息息相关的。

1.平面坐标到旋转坐标

首先有一个对齐普通坐标的矩形，可以将它看成任意物体的几何包围圈，或者更像是物体的上视图。将它绕原点旋转角度g，旋转后的坐标很容易计算：

对于矩形的任意顶点(x,y)，转换成极坐标：

r = sqrt(x * x + y * y);

h = arctan(y / x);

x  = r * cos(h); y = r * sin(h);

旋转角度g以后（顺时针）：

x' = r * cos(h - g);

y = r * sin(h - g);

2.旋转坐标到斜面坐标

如图。旧版本采用先斜面再旋转的方法，在转换中需要两次用到椭圆公式，所以计算量增大，所以没有使用圆的公式来的方便。

新版本则使用先旋转再斜面，简单直观。这或许就是叫做逆向思维，编程就是需要这种思想，可以将复杂的事情变简单。

从旋转到斜面的计算公式，可以参考旧版本的平面系到斜面系的转换部分，因为虽然旋转过了，但旋转后的图形坐标仍然属于平面系，

可以直接映射到斜面系。

首先是图中蓝色部分：对于旋转后的矩形，取其各顶点y轴射影为椭圆半长轴，定椭圆离心率e，这样做出来的椭圆组就是一组平行椭圆。

斜面系有一个斜面y坐标（紫色线），和上面的椭圆组相交，拉取交点做平行x轴并与旋转矩形各顶点x轴射影线（绿色）相交的线（绿色），

交点连接成为最终的斜平行四边形（红色）。

公式参考（取自旧版本平面系到斜面系转换）

3.关于物体的几何计算

上图是一个典型的贴图。黑色矩形框为图片的大小，以左下角位坐标进行贴图。红色部分就是这个几何体的"占地面积"，按上面两步进行逆向转换到平面系，红色部分就可以转换成集合体真实的几何尺寸，可以进行碰撞检测等等。计算真实几何尺寸有很多方法。我使用先转换在计算的方法：

左下角坐标：invTrans(x , y - f)

右下角坐标：invTrans(x + s, y)

右上角坐标：invTrans(x + w, y - (h - f - t))

其中invTrans就是逆向转换函数，传入的参数就是图上的红色部分的三个关键点（自己找找看）。

得到三个坐标后，就可以通过得到几何尺寸了。

4.图片的深度排序，视口剪切和一些其他的算法

图片的深度排序应该算是一大算法了。加上后面的A*算法，有时间的话会对这部分进行讨论。不过网上都有这些算法的讲解，我也是参照网上的做法，

想了解的朋友可以去搜索了解。

如果借助html的z-index和display属性，可以很好地对物体进行深度排序以及剪切。如果用C++来制作的话，需要在每一帧注意有哪些几何体需要渲染，这个可以用

一个渲染链表来实现，由链表顶端到下面深度依次递减，并且在视口外的集合体从链表中移除掉，重画时按链表依次渲染，就有了深度和剪切效果。

5.测试

然后最后是测试了，我用javascript写了一个引擎，点击打开链接

或者到我的网站主页http://www.stophin.com/ 游戏目录下找到RPG_new.html这个文件，打开就能用了。

测试画面有相应的截图。我还为这个引擎添加了A*寻路。左键或右键点击地图会进行寻路。

C++版本的也有一个测试，http://ww3.stophin.com/download 目录下面的Package.rar这个包。使用EGE进行图形绘制。

6.存在问题

上面测试例中，几何尺寸计算可以算是一个最大的问题。下图是测试时看到的状态，图中标明B或者A的就是物体的映射几何尺寸。可以看到A和它下面的B显然错位，

最主要还是因为几何尺寸计算中，shift, tall, shift在途中很难丈量精准，