欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

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

程序员文章站 2022-06-15 22:25:17
...

这是自制的斜45度坐标转换示例图。我们将坐标分成四个转换系,分别是: 平面系 斜面系 旋转系 屏幕系 这几个系都是以O为原点的坐标系,在转换时,除屏幕系外,需要按照顺序转换,逆转换时,也需要逆序转换。 但是在需要显示某个坐标系的效果时,直接将这个系

这是自制的斜45度坐标转换示例图。我们将坐标分成四个转换系,分别是:

平面系

斜面系

旋转系

屏幕系

这几个系都是以O为原点的坐标系,在转换时,除屏幕系外,需要按照顺序转换,逆转换时,也需要逆序转换。 

但是在需要显示某个坐标系的效果时,直接将这个系的坐标点转换为屏幕系的点就可以了。

平面系(xOfy):如同上帝视角一样,这个系标明了物体在平面上的位置,是最普通、最直观的坐标系,由于这个系直观,计算简单,

所以物体的寻路和排序都是由平面系来实现的。

斜面系(xOly):斜面系是由平面系转换得来的,这个系可以看作是一张纸由竖直向后倒下一定角度形成的。这个系是一个准45

度平面,可以看到纸是平行四边形。

旋转系(xOry):由斜面系旋转一定角度形成的,斜面系中的一张纸不仅倒下,而且还绕O点旋转。这样原本在x轴上的点,在斜面系

中仍然在x轴上,但是在旋转系中就不再在x轴上了。

屏幕系(xOsy):屏幕系定义了屏幕的大小(图中红色方框),以及屏幕相对于原点O的方向向量。而且屏幕的坐标与其他坐标系的y轴方向相反。

屏幕系上的点是最终描画需要的点,而平面系上的点是后台计算需要的点,在使用时一般用到这两个坐标系之间的转换。

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

1.平面系到斜面系的转换:(怕格式乱掉所以公式都写在图上了)

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

2.斜面系到旋转系的转换:

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

3.其他系到屏幕系的转换:

需要创建一个屏幕偏移原点O的向量,转换时,将其他系下的坐标减去这个向量,之后将y方向逆转。

x'=x-vect.x;

y'=scrn.y-(y-vext.y);

4.测试

下面是一张效果图,红色图形是平面系到屏幕系下的一个菱形,四个点分别是

(300,300);
(400,200);
(400,400);
(500,300);

蓝色图形是转换到旋转系后再转换到屏幕系下的形状。从左上角引出的线是测试点,蓝色是鼠标所在点,红色是实时转换的点,说明转换是正确的。

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