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

简介: 在屏幕的任意位置按住拖拽,然后控制屏幕中指定的精灵移动,这个前几天@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 位同学一起学习做游戏。【点击这里】了解课程服务详情。

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









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


相关文章
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
4月前
如何在屏幕的任意位置拖拽控制图片的移动?
如何在屏幕的任意位置拖拽控制图片的移动?
40 1
|
4月前
|
开发工具 开发者
在屏幕的任意位置拖拽,控制角色移动
在屏幕的任意位置拖拽,控制角色移动
23 0
|
4月前
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
|
9月前
|
编解码 前端开发 PHP
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
悬浮坐标解决方案:如何在图片获取xy鼠标位置和增加标注信息
72 0
布局之悬浮显示更多文本并增加箭头指示效果
布局之悬浮显示更多文本并增加箭头指示效果
93 0
布局之悬浮显示更多文本并增加箭头指示效果
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
物体交互操作之鼠标拖动物体任意移动(Unity3D)
物体交互操作非常的多,比如说用鼠标拖动物体移动,用鼠标拖动物体旋转,用鼠标滑动让物体放大和缩小。 下面就用代码演示一下如何使用鼠标拖动物体移动。
推荐一个免费的屏幕取色器,鼠标放到的位置自动显示RGB
推荐一个免费的屏幕取色器,鼠标放到的位置自动显示RGB
297 0
推荐一个免费的屏幕取色器,鼠标放到的位置自动显示RGB