如何实现大地图的漫游功能

简介: 如何实现大地图的漫游功能

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

最近有学员问如何实现割草游戏中的那种角色可以在一张大地图中四处跑动的功能,我研究了一下,发现其中有几个需要注意的地方,索性就写个教程记录一下。

想实现这个功能,最重要的是理解微信小游戏制作工具中的三个与相机有关的积木块的使用。

只需要借助这三个积木块,我们就能够轻松实现出一个大地图漫游的功能了。

下面,我们逐一来介绍一下这三块积木,以及其具体的应用。

设置自己为摄像机的世界区域

啥叫摄像机的世界区域呢?看图。

图中,蓝色的矩形表示的是摄像机能看到的区域(也就是在游戏屏幕中显示出来的区域),红色的大矩形是整个世界的区域。设定了这样的一个世界区域的边界之后,相机就只能在这个红色的区域内移动了。

举个例子方便理解,你可以把自己的眼睛想象成摄像机,你眼睛看到的画面就是摄像机拍摄到的区域。现在把你扔到一个房子里,那你现在是不是就只能看到房子里面的东西啦!这个房子的区域就是摄像机的世界区域

来到微信小游戏制作工具中,我们来看一下世界区域如何设置。

如图,我布置了一个这样的场景,里面有一张大的背景图(这个就是我们漫游的大地图啦),一个用于控制到处走动的小怪物,一些花花草草用于当作大地图中的参照物,还有一个摇杆,用于控制小怪物的移动。

现在,我们要将这个大地图的区域设置为世界区域,只需要在大地图上增加如下的积木块即可。

这样,“地图大背景”这个精灵就变为摄像机的世界区域了。

如图,相机只能拍摄到世界区域内的部分,到达世界区域的边界时,相机就不会继续移动了。

设置相机的跟随对象为自己

接着,来看第二块积木,即让相机跟随谁移动。想象一下你要给运动中的女朋友录像,你要确保女神始终位于屏幕的中心位置,如果女神在移动的话你怎么办?你要拿着手机跟着女神同步移动。

“设置相机的跟随对象”就是这样的作用,我们可以指定游戏中的一个精灵为相机跟随的对象,设置之后,不论这个精灵跑到哪里,相机都会跟着它跑过去。

来看一下这块积木的应用,首先,我们给小怪兽增加一个“方向控制”行为,可以让它在地图中向任意方向移动。

然后,设置“小怪兽”为摄像机跟随的对象。

这样,小怪兽不论怎么移动,摄像机都会始终跟随着它,让它处于屏幕的 C 位。

将自己移出摄像机镜头

这个积木块的作用是用于处理游戏 UI 的,例如游戏中的摇杆,按钮等。

如图,我们为摇杆增加了这个积木后,摇杆就能够始终位于屏幕的固定位置。如果不使用这个积木,则摇杆会被视为整个游戏世界中的一部分,就如同示例中的花,树叶,和小树一样。此时,相机跟随着角色移动时,摇杆会被移出屏幕。

我们把摇杆上的这块积木禁用,会看到这样的现象。

镜头跟随着角色移动,摇杆被移出了屏幕。

以上就是三块与相机有关的积木的使用方法了,使用这三块积木,我们可以方便的实现出一个大地图漫游的功能。


微信小游戏制作工具其实已经弱化了相机(Camera)的概念,在很多类型的游戏中,你不需知道它的存在,也不影响你正常的制作游戏。但是,既然都已经看了今天的文章,那你以后便应知道相机的存在,相机在其它的游戏引擎中是一种的非常重要的必须要掌握和理解的东西。


其实相机这个概念很好理解啦!记住这样的一个类比即可:相机就是观察游戏世界的眼睛。


相关文章
|
1天前
|
算法 5G 定位技术
室内导航怎么实现?解决方案与案例分享
本文探讨了室内导航的实现原理、关键技术、用户体验优化及未来发展趋势。通过Wi-Fi定位、蓝牙Beacon、UWB和视觉SLAM等多种技术,结合高精度地图绘制和路径规划算法,实现室内AR导航及定位导航。文章还介绍了性化服务和成功案例,展望了5G、物联网和AI等技术在室内导航中的应用前景。
10 0
|
6月前
|
前端开发 JavaScript 数据挖掘
浅谈游戏地图中位置实时更新的技术方案
浅谈游戏地图中位置实时更新的技术方案
118 1
|
6月前
|
并行计算 Linux 异构计算
分享一款刚开源上线3天的音乐人声分离工具!无需联网!页面化操作!
分享一款刚开源上线3天的音乐人声分离工具!无需联网!页面化操作!
|
6月前
|
数据挖掘 数据处理 API
使用TransBigData组件实现个人手机定位功能
使用TransBigData组件实现个人手机定位功能
112 0
|
6月前
|
vr&ar C# 图形学
【Unity 3D】VR飞机动态拆装及引擎开关控制案例(附源码和演示视频 超详细)
【Unity 3D】VR飞机动态拆装及引擎开关控制案例(附源码和演示视频 超详细)
106 0
|
小程序 定位技术
微信小程序如何实现地图多点标注
微信小程序如何实现地图多点标注
780 0
|
定位技术
如何实现大地图漫游功能
最近有学员问如何实现割草游戏中的那种角色可以在一张大地图中四处跑动的功能,我研究了一下,发现其中有几个需要注意的地方,索性就写个教程记录一下。 想实现这个功能,最重要的是理解微信小游戏制作工具中的三个与相机有关的积木块的使用。 只需要借助这三个积木块,我们就能够轻松实现出一个大地图漫游的功能了。 下面,我们逐一来介绍一下这三块积木,以及其具体的应用。
152 0
|
数据可视化 定位技术
GIS开发:客户端控制的地图样式
GIS开发:客户端控制的地图样式
105 0
|
Web App开发 编解码 移动开发
探秘移动端网页调用摄像头的两种方式
PC 端网页调用摄像头的场景想必大家并不陌生,打开一个网址,开启摄像头开始笔试/视频聊天/直播等。 而在移动端网页调用摄像头的场景你见得多吗?我想答案应该是不多吧(在下见识浅薄)。