在屏幕的任意位置拖拽,控制精灵移动

简介: 在屏幕的任意位置按住拖拽,然后控制屏幕中指定的精灵移动,这个前几天@stack发过一个示例,刚好最近又有几位同学来问,说是看不懂其中的逻辑。索性就在这里详细的讲一下,原理很简单,理解透了原理,其中的积木逻辑也就很容易理解了。

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


最近一直在录制视频教程,很少写图文教程,难免有些生疏。一项技能练习多了就会熟练,练习少了就会生疏,为了防止写作技能的生疏,还是隔三差五的写一点儿为好。


在屏幕的任意位置按住拖拽,然后控制屏幕中指定的精灵移动,这个前几天@stack发过一个示例,刚好最近又有几位同学来问,说是看不懂其中的逻辑。索性就在这里详细的讲一下,原理很简单,理解透了原理,其中的积木逻辑也就很容易理解了。



如图,有一个小飞机,你可以点击屏幕上的任意位置,开始拖拽,控制飞机的移动,而且飞机不会移出屏幕区域。


我们来看一下其中的实现逻辑。


首先创建几个全局变量。



margin: 用于设置飞机可移动区域与屏幕边缘的间距。这个变量会在判断飞机能不能移出屏幕的计算中使用到。

plane_x: 计算出的飞机的 x 坐标。

plane_y: 计算出的飞机的 y 坐标。

pos_x: 飞机与手指的偏移位置 x。

pox_y: 飞机与手指的偏移位置 y。


接着,先来看一下手指在屏幕上按下的逻辑。



什么是偏移位置呢?看下图。

假设绿色棱形表示的是飞机,红色圆点表示的手指在屏幕上按下的位置。此时,我们以红色的圆点为中心构建一个坐标系,那么绿色飞机相对于红色圆点的水平位置(pos_x)就可以使用“飞机的x坐标 - 红点的x坐标”,绿色飞机相对于红色圆点垂直位置(pos_y)就可以使用“飞机的y坐标 - 红点的y坐标”。


这个“偏移位置”或许叫做“相对位置”更确切一点儿,指的就是飞机相对于红点的位置。

因为它们两个之间的相对位置是固定的,所以不论红点移动到哪里,绿色飞机相对于红点的位置都始终不变。


不论手指移动到哪里,只要用手指当前的位置坐标加上“偏移位置”,就能够计算出飞机相对于手指的位置,这个就是点击屏幕任意位置控制飞机移动的原理了。


接着,我们来看一下,限制飞机不能飞出屏幕的原理是什么。


首先来看一下手指移动的积木逻辑。



其中对于屏幕边缘的判断比较难以理解,不过看个图就明白了。


如图,灰色的为屏幕区域,绿色的为可移动区域,屏幕边缘与可移动区域的边缘的间隙就叫做 margin,知道了屏幕的宽度高度,以及 margin 值,就能够计算出可移动区域的宽度和高度。


在游戏中,整个游戏世界的坐标系的中心位于屏幕的中心,也就是说屏幕中心的位置是(0,0),此时我们再来看一下判断条件的积木。



先来看一下左边的部分,plane_x 是飞机当前的位置坐标 x,它的数值可能是正的(在屏幕右侧)也可能是负的(在屏幕左侧),这里使用“绝对值”就可以把两种情况一并包含在里面。


为什么要乘以 2 呢?看下图。

判断公式右边的部分,计算的就是飞机可移动区域的宽度了,这里“场景的宽度”就是“屏幕宽度”。


最后,如果判断出飞机超出了可移动区域,根据飞机的位置坐标(plane_x),设置飞机是位于可移动区域的左侧还是右侧。


上下两侧的判断也是一样的道理,这个就是限制飞机在指定区域移动的原理了。当前示例的 margin 指的是屏幕四个边缘的间隙,你完全可以根据游戏的需要,单独设置左右两侧和上下两侧的间隙。


回顾一下,想要自主的实现这样的一个控制移动方法,对于开发者来讲都需要具备哪些东西。


首先,你要知道偏移位置,相对位置这些概念,然后才能看透其中相对移动的原理。


接着,你需要了解开发工具,知道在游戏世界中,坐标系的中心位于屏幕的中间,你需要知道哪些积木能处理手指在屏幕上事件,哪个积木能获得屏幕的宽度/高度,哪些积木能够进行数学运算等等。


第一点,对于原理的理解,需要你能将游戏进行简单的抽象化处理,找到其中的数据模型,再利用一些数学知识找到解决方法。


对于这一点,没有什么好的方法,只能通过多练习,另外要克服对于数学的恐惧,其实真的是没有多少高深的数学知识(尤其是对于2D游戏来说),加减乘除,加上个三角函数基本上就能应对大部分问题。


还有就是我之前反复提到过的,很多功能背后的原理都想通,做的多了你就能够发现这种规律,也就能够做到,即使是遇到一个从没做过的功能,你也能够发现它其实跟你曾经做过的某个功能是相似的,而它们背后原理大概率都是相通的。


第二点,对于开发工具的熟练度也非常的重要。当你原理懂了,方法也找到了,但是却发现工具不会用,这个还是很尴尬的。如果说原理方法是一件事情的前半部分,那对于工具的使用就是后半部分,两部分组合起来才能把一件事情做成,熟练的使用工具能够帮助你快速的验证和实现自己的想法。


至于工具如何熟练呢?就一个字“用”,或者三个字“使劲用” !


熟能生巧是一个很朴素却非常有用的智慧。

这里是我的游戏开发课程服务,不只是一门课,而是围绕着新手学习做游戏有关的一整套服务(一年不限次数的咨询,学习社群,游戏模版,知识卡片库,游戏素材库,知识拓展库等)。致力于帮助更多的人学会做游戏并做出自己的游戏,欢迎来跟 71 位同学一起学习做游戏。【点击这里】了解课程服务详情。

这里是小蚂蚁的小游戏系列,闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装,点击下方的游戏卡片就可以直接玩啦!









也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识和内容,可以来围观。备注“学习做游戏”可免费领取学习做游戏的原创教程资料。接受付费咨询,不闲聊,望见谅。


相关文章
|
6月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
6月前
|
Windows
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
Keil5中恢复默认布局-解决左边栏,底部栏位置不是默认布局
581 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
6月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
49 0
|
6月前
如何在屏幕的任意位置拖拽控制图片的移动?
如何在屏幕的任意位置拖拽控制图片的移动?
115 1
|
6月前
|
开发工具 开发者
在屏幕的任意位置拖拽,控制角色移动
在屏幕的任意位置拖拽,控制角色移动
65 0
|
6月前
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
|
编解码 前端开发 PHP
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
159 0
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
139 0
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
126 0
布局之悬浮显示更多文本并增加箭头指示效果