游戏开发实战教程(4):实现图形的拖拽

简介: 游戏中,当按下图形时,我们希望图形能够放大并高亮显示,来提示玩家当前选中了这个图形。当放开图形时,图形应该缩小为原来的大小,并且取消高亮。试着实现一个这个功能。

精致1010游戏中,我们需要将下方的图形拖拽到上方的网格中,像下面这样。

如图,当手指点击下方的图形时,下方的图形会进入可拖拽的状态,它应该能够跟随手指在屏幕上移动,当手指松开时,它应该被放置在新的位置上。


首先,我们来熟悉一下一个重要的积木块。

如图“当精灵被xx时”积木块会处理游戏中所有与精灵的点击有关的事件。点击下拉,可以看到可以接收五种事件。


  • 点击:按下再放开,叫做一次点击,也就是说点击操作其实包含了“按下”和“放开”两个过程。
  • 按下:手指接触屏幕上的精灵的那一刻,是一次按下,只触发一次。
  • 放开:手指离开屏幕上的精灵的那一刻,是一次放开,只触发一次。
  • 按住:手指按住屏幕上的精灵时触发,会进行连续的触发,例如在射击游戏中,按住射击按键,不停的发射子弹,这种情况就可以在按住事件中处理。
  • 双击:包含两次点击过程。


这里,我们使用“按下”和“放开”两个事件配合来实现图形的拖拽功能。

如图,使用四个正方形拼凑成了一个图形,放在一个容器中。我们将拖拽的逻辑放在容器上。


选择“容器-1”,为其增加一个局部变量“可拖拽”用来判断当前的图形是否处于可拖拽的状态,如果数值为1,则图形会跟随手指进行移动。如果数值为0,则不会移动。


接着增加如下的积木块。逻辑很简单,手指按下时可以拖拽,手指放开后不能拖拽。


最后,增加一个控制图形移动的积木块。

此积木块的逻辑为,当图形处于“可拖拽”状态时,将自己的位置设置到手指的位置。


点击“预览场景”看一下效果。

这样,我们就实现了一个图形的拖拽功能。


当前的拖拽还存在一点儿问题,当你用手指点击屏幕时,图形会位于手指的位置,这样图形的一部分会被手指挡住。我们希望图形位于手指的上方,这样它就不会被手指挡住,可以更方便的查看图形将要放置的位置。


对图形的位置设置进行一下改动,让其显示在手指的上方。


再次预览场景看一下效果。

可以看到动图中,当点按图形时,图形会有一个向上的偏移。


最后,看一下所有的逻辑。

通过精灵的“按下”和“放开”事件设置图形的“可拖拽”状态。使用一个监控积木块,来监控变量“可拖拽”的数值,如果数值为1,则设置图形的位置。


总结一下:


这一节我们了解了与“精灵点击”有关的几个事件,并且组合使用“按下”和“放开”事件实现了图形的拖拽功能。


练一下:



相关文章
|
6月前
|
前端开发 图形学
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
39 0
|
容器
游戏开发实战教程(7):图形的数据验证
上一篇文章内容很多,也挺难的,不光我自己写的很累,估计读者读的也很累,这并不是我想要的结果。每一篇教程我都希望它能够帮助读者学到一点儿新的东西,并在小游戏开发的道路上向前行进一步。如果一篇技术型的文章过长,就很容易把读者吓退,从而会失去它本来应该传递的信息和价值。所以从这篇教程开始,我决定每一篇都聚焦于一个小功能,一个知识点,并尽力把它讲透,讲明白。希望它能帮助你进行点滴的积累,构建起自己的小游戏。
99 0
游戏开发实战教程(7):图形的数据验证
|
监控 开发工具 容器
微信小游戏开发实战4-实现图形的拖拽
本篇主要内容包括使用微信小游戏开发工具实现图形的拖拽功能。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
166 0
|
容器
游戏开发实战教程(6):把图形放置到网格上
在第四节中我们实现了图形的拖拽功能,拖拽的图形最终需要被放置在网格的对应位置上。 先说一下实现思路: 使用拖拽图形上的左下角的位置作为图形位置,与整个网格的位置进行比对。如果图形位置与当前单元格的位置匹配,则根据图形的数据从当前的单元格开始填充,直到填充完整个图形为止。 看不懂?没关系。接着往下我会一步一步的进行拆解和分析。
100 0
|
存储 开发工具
游戏开发实战教程(3):绘制网格
如图,蓝色线框中间的区域为游戏最终能够显示的区域,如果一个物体位于蓝色的线框外,那么最终在游戏界面中是不会显示的。红色的坐标轴,水平方向为x轴,竖直方向为y轴,中心点(0,0)位于显示区域的正中央。图中的白色的正方形线框的位置就是(0,0),即位于屏幕的正中央。以后,当你遇到一个物体位置为(500,500)时,你就应该知道它大概位于屏幕的右上方。
143 0
|
存储 数据处理
游戏开发实战教程(2):使用表格处理数据
上一节中讲过使用表格来存储和处理游戏中的数据。这一节我们直接上手,学习表格中的数据处理,我们将会实现以下的内容: 创建一个10行10列(10x10)的表格,默认值都设置为0 随机的在表格中插入一行数据1 逐行遍历,找到满足条件的行(即整行的数据都是1)
157 0
|
容器
微信小游戏开发实战6-把图形放置到网格上
本篇主要内容包括如何将拖拽的图形安放到网格的对应位置上。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
85 0
|
定位技术
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
166 0
|
存储 开发工具
微信小游戏开发实战3-绘制网格
本篇主要内容包括使用微信小游戏开发工具动态的绘制一个网格,并通过使用变量来控制最终生成的网格的效果。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
145 0
|
数据可视化
【小白必看】可视化图形推文汇总(二)
总结下前面推文学习过的可视化图形。点击每张图片可查看相应链接。
201 0
【小白必看】可视化图形推文汇总(二)