再次理解游戏世界中的两个坐标系

简介: 今天在制作游戏的过程中遇到了一个问题,原本我想让一个金币从游戏中的 A 点移动到 B 点。这个金币是一个容器中的精灵,当使动画积木去处理移动的时候,虽然指定了移动到的 B 点的世界位置,但是这个金币最终并没有到达指定的 B 点。找了一下原因,最终发现了一点儿微信小游戏制作工具的局限。在这里记录一下,顺便再重新讲一下,在游戏世界里两个非常重要的坐标系。

嗨,大家好,我是小蚂蚁。


今天在制作游戏的过程中遇到了一个问题,原本我想让一个金币从游戏中的 A 点移动到 B 点。这个金币是一个容器中的精灵,当使动画积木去处理移动的时候,虽然指定了移动到的 B 点的世界位置,但是这个金币最终并没有到达指定的 B 点。


找了一下原因,最终发现了一点儿微信小游戏制作工具的局限。在这里记录一下,顺便再重新讲一下,在游戏世界里两个非常重要的坐标系。


说到坐标系大家应该都能够理解,我们以前上学的时候在数学中都学过坐标系。有平面的二维坐标系( xy轴),也有立体空间内的三维坐标系( xyz轴)。这些我们曾经学过的坐标系是能够应用到游戏里的。在 2D 游戏中,使用的是二维坐标系。在一个 3D 游戏中,使用的就是三维坐标系。


今天我们主要说一下游戏中的二维坐标系。在游戏的世界中存在两个坐标系,一个是作用于整个游戏世界的全局坐标系,一个是作用于具体游戏对象上的局部坐标系。举个简单的例子,假设整个地球是一个游戏空间,那么我目前的位置在整个地球坐标系空间里是可以使用一个唯一的经度和纬度来定位的,这个经纬度就是我在世界坐标系中的位置。现在假如说我以自己的家为参考,我可以说我目前正位于客厅里,那么这个客厅里的位置,其实就是相对于我家的这个坐标系来确定的。


我们说一个物体位于另一个物体的哪个位置其实是需要有一个参照作为前提的。参照不同,所对应的位置也不同。所以我们说位置都是相对的,你想要确定当前的位置,那么就要先确定那个用于参考的坐标系。

640.png

如图就是游戏中的两个坐标系了。一个是游戏世界的坐标系,它以整个游戏屏幕的中间为中点,一个是局部坐标系,它以游戏中的蓝色方块的中心为中点。


现在,我们假设绿色方块是蓝色方块容器中的一个精灵,此时当我们说绿色方块的位置时,就需要有一个前提,是以世界坐标系为参考,还是以局部坐标系为参考。因为在不同的坐标系中,绿色的方块的位置是不同的。


这是在游戏中处理精灵位置时经常容易犯错的地方,本来应该设置世界坐标却设置了局部坐标,或者反之,都会引起精灵位置的错乱。


来到微信小游戏制作工具中,我们来看一下几个与位置有关的积木块的使用。


640.png


如图,有两个方块,一个大的蓝色方块,一个小的绿色的方块,游戏开始后,我们使用积木设置绿色的小方块的位置为(100,100)。


预览一下游戏。


640.png


可以看的出来,当前的绿色小方块的位置是位于世界坐标系的(100,100)的位置。“将自己移动到??”这个积木块默认给精灵设置的是世界坐标。


接着,我们把两个方块放到一个容器下,然后仍然设置绿方块的位置为(100,100)。


640.png


再次预览一下场景。


640.png


很显然绿色方块的位置与之前的不一样了,这次它的位置设置是以局部坐标系(蓝色方块的中心)为参考,也就是说“将自己移动到??”这个积木块这次默认设置的是局部坐标。


你看出区别了吗?虽然使用的同一块积木,设置的同一个精灵在同一个坐标位置,但是因为参照的坐标系不同,最终精灵的位置也不同。

总结一下:当精灵在游戏中是一个独立个体时,我们设置其位置默认的是以游戏世界坐标系为参考;当精灵位于一个容器中时,我们设置其位置默认的是以局部坐标系为参考。

那么,如何获取不同的坐标呢?在“侦测”中有一个访问不同坐标的积木块。


640.png


如图,“x,y”表示的是局部坐标,“全局x,全局y”表示的是世界坐标,我们使用基础文字显示出绿色方块的这两种坐标。


再次预览一下。


640.png


可以看到,在世界坐标系中,绿色方块位于(100,500)的位置。在局部坐标系中,绿色方块位于(100,100)的位置。


这些东西理解了,下面我们来看一下我今天所遇到的这个问题。


640.png


如图,两个金币分别位于两个不同的容器中,我要做的是让下面的这个金币飞到上面的那个金币的位置上。


开始时,我的做法是这样的。


640.png


预览一下场景。


640.gif


金币并没有到达指定的位置。根据我们上面讲过的内容,试着推测一下出现这个问题的原因是什么?


我们设置移动的金币的位置并不是世界坐标的位置,而是它本地坐标的位置,虽然我们使用的“全局x”和“全局y”设置的目标位置,但是很显然“x在x秒内移动到xx”这个积木块设置的是精灵的局部坐标而不是世界坐标。


通过这个问题让我们看清了“x在x秒内移动到xx”这个移动积木块的局限,当精灵是独立个体时,使用它进行移动没有问题,但是当精灵位于容器中时,使用它就会出现问题。因为它只能处理精灵的局部坐标而不能处理精灵的世界坐标。


那还有别的方法处理容器中精灵的移动吗?这里我们可以转一个弯,既然移动积木块处理容器中的精灵的移动有问题,那么我们能不能把容器中的精灵拿出来呢?好像是没有这个功能。既然容器中的精灵拿不出来,那么我们能不能创建一个容器外的独立精灵来代替它呢,这个方案似乎可行,我们就来试一试。


640.png


640.png


再来预览一下场景看看。


640.gif


这次金币的位置移动终于正常了。


最后来回顾一下,在微信小游戏制作工具中,与移动有关的动画积木,在处理精灵的移动时,默认使用的都是局部坐标。在精灵是独立个体时,处理移动是没有问题的,因为此时局部坐标就是世界坐标。但是当精灵位于一个容器中时,再使用移动处理就会出现问题。


应对这个问题我们使用的解决方案是单独再创建一个独立的精灵,让它替代容器中的精灵来进行移动。


好了,今天的内容就到这里了。其实游戏中所有的位置移动都离不开两种坐标系,两种坐标位置。只有当你把这点儿原理理解了,在遇到问题时,才能够分析清楚产生问题的原因,从而找到合适的解决方案,做到知其所以然。



相关文章
|
5月前
|
存储 编解码 定位技术
技术心得:墨卡托投影、地理坐标系、地面分辨率、地图比例尺
技术心得:墨卡托投影、地理坐标系、地面分辨率、地图比例尺
126 0
|
3月前
|
Windows
PPT 三维地球动画
PPT 三维地球动画
17 1
|
5月前
|
程序员 定位技术
程序员必知:地图坐标转换器
程序员必知:地图坐标转换器
45 0
|
6月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
48 2
使用html+css制作一个发光立方体特效
|
6月前
|
容器
彻底理解游戏世界中的两个坐标系
彻底理解游戏世界中的两个坐标系
157 0
|
11月前
|
图形学
Unity 坐标系
Unity 坐标系
Unity 坐标系
|
C++ 计算机视觉 Python
C++ VS OpenGL绘制教室三维立体旋转图像
C++ VS OpenGL绘制教室三维立体旋转图像
130 0
C++ VS OpenGL绘制教室三维立体旋转图像
Photoshop制作空心圆柱体与立体烟缸
Photoshop制作空心圆柱体与立体烟缸
121 0
|
容器
再次理解游戏世界中的两个坐标系
今天在制作游戏的过程中遇到了一个问题,原本我想让一个金币从游戏中的 A 点移动到 B 点。这个金币是一个容器中的精灵,当使动画积木去处理移动的时候,虽然指定了移动到的 B 点的世界位置,但是这个金币最终并没有到达指定的 B 点。
147 0
|
数据可视化
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
166 0
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?