嗨！大家好，我是小蚂蚁。 最近一直在录制视频教程，很少写图文教程，难免有些生疏。一项技能练习多了就会熟练，练习少了就会生疏，为了防止写作技能的生疏，还是隔三差五的写一点儿为好。 在屏幕的任意位置按住拖拽，然后控制屏幕中指定的精灵移动，这个前几天@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游戏来说），加减乘除，加上个三角函数基本上就能应对大部分问题。 还有就是我之前反复提到过的，很多功能背后的原理都想通，做的多了你就能够发现这种规律，也就能够做到，即使是遇到一个从没做过的功能，你也能够发现它其实跟你曾经做过的某个功能是相似的，而它们背后原理大概率都是相通的。 第二点，对于开发工具的熟练度也非常的重要。当你原理懂了，方法也找到了，但是却发现工具不会用，这个还是很尴尬的。如果说原理方法是一件事情的前半部分，那对于工具的使用就是后半部分，两部分组合起来才能把一件事情做成，熟练的使用工具能够帮助你快速的验证和实现自己的想法。 至于工具如何熟练呢？就一个字“用”，或者三个字“使劲用” ！ 熟能生巧是一个很朴素却非常有用的智慧。 文中示例项目的开源连接在这里：https://gamemaker.weixin.qq.com/#/game?game_id=lbMmVlYmRkM2YtMjEyYS00MDY0LWEyM2UtN2ZmMzYzZmRkZDk4 --- 欢迎关注我的公众号【小蚂蚁教你做游戏】，每天学点儿游戏开发知识。 [图片] 欢迎加小蚂蚁微信(xiaomayi6669)，交个朋友。 [图片] 这里是小蚂蚁的小游戏系列，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装，微信扫码可以直接玩啦！ [图片] [图片] [图片] [图片] [图片] [图片] [图片]

嗨！大家好，我是小蚂蚁。 今天，我们来继续学习下一个模块：形状碰撞检测。 [图片] 在游戏开发中，我们所说的“碰撞”经常指的是物理碰撞，什么是物理碰撞呢？一般的在游戏开发工具中都会包含一个叫做“物理引擎”的东西，它的作用就是在游戏中模拟出现实中的物理效果。例如，我们扔一个东西，这个东西会因为重力而下落，最终落到地上，与地面发生碰撞。在游戏中，我们可以借助物理引擎，来模拟出东西下落掉到地面上的效果。当东西掉到地面上时，我们就说这个东西与地面发生了碰撞。 但是，在俄罗斯方块这个游戏中，是不需要使用物理引擎的，所以这里的“碰撞”指的并不是物理碰撞，而是通过计算来判断两个方块是否相邻，如果相邻，我们就说它们发生了“碰撞”。 在俄罗斯方块游戏中，“碰撞”一共包含下面的这 4 种情况： 1.当形状达到最下方一行时，碰撞，形状停靠。2.当形状下落时，任何一个位置碰到下方已有的方块，碰撞，形状停靠。3.当形状向左/右移动时，两侧碰到任何一个已有方块，碰撞，形状不能再向两侧移动。4.当形状切换时，如果新状态碰到任何一个已有方块，碰撞，形状不能切换到新状态。今天这篇文章，我们先了解一下前两种情况。 下边界的碰撞[图片] 如图，当一个形状达到了最下方的第一行时，它就不能够再继续向下移动了。我们把这种情况叫做“下边界的碰撞”。 [图片] 判断起来也很简单，红色圆点代表的是形状当前的位置，由于形状的状态不同，判断是否与下边界发生碰撞的距离也不同，如图，在 1，3 状态下，与下边界的碰撞距离是 1 个方块长度，在 2，4 状态下，与下边界的碰撞距离是1.5 个方块长度。 下落的碰撞接着，来看一下在形状下落的过程中，如何检测是否发生碰撞。 [图片] 如图，下方的红色方块表示的是之前已经摆放的方块，上方的绿色方块是下落的“形状1”，此时，它们应该发生碰撞，绿色的形状应该停止向下移动，摆放在当前的位置上。 对于下边界的碰撞来说，由于下边界是固定不变的，所以我们只需要根据当前状态，判断与下边界的距离即可判断碰撞。但是在游戏中，那些已摆放的红色方块的位置是不确定的，这就导致了发生碰撞的情况也是不确定的。 [图片] 如图，所有的情况都会发生“碰撞”。 对于这样不确定的情况，该去如何检测碰撞呢？这时，我们就需要用到数据了。 [图片] 如图，右侧的图片是一个数据表格，这个数据表格与左侧的游戏界面是对应的。现在，我们用 0 表示空位置， 1 表示有方块，然后对照着左侧的游戏界面将右侧的表格填满。这样，我们就把当前的游戏抽象成了数据，这个就叫做数据抽象化。（之前专门写了一篇与数据抽象化有关的文章《所有消除游戏背后那些看不见的数字》，基本上所有的消除游戏都离不开它) 填充上数据之后，我们再来看一下各种情况的碰撞。 [图片] 试着观察一下碰撞的规律：只要当前形状上的任何一个方块位置的下方是 1 ，那么当前就会发生碰撞。 现在，我们重新再描述一下碰撞检测的过程： 依次查看当前形状上的每一个方块，如果发现有任何一个方块下方的位置是 1，那就意味着当前形状与已堆叠的方块发生了碰撞。接下来，我们就来实现这个碰撞检测的过程。 [图片] 如图，是“形状1”在 4 种不同状态下所对应的数据表格。如果，我们能够知道形状上的每一个方块在整个数据表格中的位置（行列号），那么，就能够依次的判断出下方的位置是否有 1 了。 在进行遍历的时候，我们一般都是习惯于从左往右，从上往下。所以，这里将左下方的位置当作遍历的起点。 [图片] 如图，我们把红色的点叫做计算点，坐标轴的中心是当前形状的位置(x0,y0)，根据图片可以很直观的看出来不同状态下的计算点的位置。 这里算出的计算点的位置是在游戏坐标空间中的位置，还需要将它们进行一次转换，因为我们需要知道的是计算点在数据表格中的哪一行哪一列。 [图片] 计算公式在这里了，已经讲过很多次了（所有的消除游戏里都会用到），就不再解释了。总之，我们能够获取到计算点在数据表格中的哪一行哪一列。 [图片] 在得到了计算点的行列号之后，接下来就只需要以计算点为起点，依次查看每一个格子下方的数值，只要有任何一个格子下方的数值为 1，就证明发生碰撞。 上方举的是“形状1”的例子，俄罗斯方块中一共有 7 种“形状”，按照其包围矩形的形状可以分为 3 种类型。 [图片] 形状1～5 是一种类型(2x3)，形状6是一种类型(1x4)，形状7是一种类型(2x2)。 不同的类型又对应着不同的计算点位置。 [图片] 好了，以上就是理论基础了，接下来我们来看一下具体实现的积木逻辑。 首先，我们创建一个全局的表格变量，叫做“网格数据”，作用于整个俄罗斯方块游戏。0 表示没有方块，1表示有方块。 [图片] 接着，我们为“形状1”创建 4 个表格数据，对应的就是它的四个状态。 [图片] 然后，根据形状状态在表格中添上对应的数据，有方块的位置是 1 ，没有方块的位置是 0。 [图片] 接着，来看一下积木逻辑。 [图片] [图片] 最后，看一下碰撞检测函数中的积木逻辑。 [图片] 这里比较难以理解的地方是同时对两个表格（一个全局数据表格，一个形状数据表格）进行遍历检查。我习惯于先在纸上画出来，进行推演。如果能够在纸上推演出整个过程话，使用程序来实现这个过程就会简单很多。 今天的内容就到这里了，稍微总结一下：我们了解形状碰撞检测中的两种情况，第一种“下边界的碰撞”，比较简单，第二种“下落的碰撞”，相对比较复杂，需要借助表格数据来进行碰撞的检测。 如果你对于消除游戏中的数据抽象化还不是很理解的话，借着这次机会可以好好研究一下。 有些东西是值得花时间深究的，因为它们有着以一当百的效果，搞定了一个就相当于搞定了一百个，数据抽象化就是这样的东西。 --- 我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我的公众号【小蚂蚁教你做游戏】就对啦！ [图片] 也欢迎加小蚂蚁微信(xiaomayi6669)，交个朋友。 [图片] 这是我做的几个简单好玩的消除小游戏，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载，点击下方的游戏卡片就可以直接玩啦！ [图片] [图片] [图片] [图片] [图片]

**这是小蚂蚁游戏开发公众号原创的第40篇。如果你没有任何的游戏开发经验，欢迎阅读我的“人人都能做游戏”系列教程，它会手把手的教你做出自己的第一个小游戏。 将循环分为重复执行和逻辑循环，应该是微信小游戏开发工具中所特有的。因为之前做游戏，无论是使用哪种工具或者哪种编程语言，对于循环来说，都只有一种，不会存在歧义或者误用。但是这里将循环分为了两种，如果误用的话会导致出现一些奇怪的问题。所以需要单独拿出来区分一下，避免掉进这个“坑”。 首先来看一下官方文档，对于这两种循环的解释。 [图片] [图片] 如果你看完这个解释感觉还是无法理解，没关系，我会以更直白的方式解释一下，并且我们会结合一个小例子，就容易理解了。 首先，想要彻底理解这两种循环的区别，先要理解一个新的概念“帧”。 [图片] “帧”在游戏开发中也是一个常用的概念，想象一下小时候看的胶片电影，放映机上要安放一大盘胶片，最终看到的流畅的电影的画面其实是由胶片中的一个一个的图片构成的。因为人眼会有“视觉停留”，所以只要图片切换的足够快，那看上去就是流畅的画面。 游戏中的一帧就像是胶片中的一个图片，电影中的一帧只需要处理图像和声音，游戏中的一帧除了图像和声音，还需要处理更多的东西，例如输入操作（是否点击了屏幕，手指是否在屏幕上滑动等），计算操作（游戏中的角色位于哪里？他当前正在攻击吗？还是正在跳跃...）等。 当前的游戏通常都是1秒钟运行60帧，1秒钟等于1000毫秒，那么1帧也就相当于16.67毫秒了。想象一下游戏在1秒钟之内需要处理图像，声音，输入，计算等操作60次。是不是有点儿厉害？ “帧”的概念理解了，我们再看一下这两种循环。 重复执行：1帧循环一次。假设循环60次，那么总计需要1秒钟的时间执行完。逻辑循环：在1帧之内执行完所有循环。假设循环60次，那么这60次的循环会在一帧之内执行完毕，也就是只需要16.67毫秒就可以执行完。为了更好的理解两者间的区别，我们在开发工具中制作一个小例子。 [图片] 如图，在场景中增加了一个红球，一个篮球，和一个“开始移动”按钮。我们要实现如下的逻辑：点击“开始移动”按钮，两个小球同时开始向上移动，不同的是“红球”使用“重复执行”积木块来处理移动逻辑，而“蓝球”使用“逻辑循环”积木块来处理移动逻辑。 红球的移动逻辑。 [图片] 蓝球的移动逻辑。 [图片] 按钮上增加点击时发送“移动”通知。然后两个小球收到“移动”通知后会同时向上移动。 [图片] 预览场景，看一下结果： [图片] 使用“重复执行”的红球大概需要将近1.67秒(循环100次/每秒60次)的时间移动到目标位置，而使用“逻辑循环”的篮球几乎是瞬间移动到目标位置。 对照着例子再重新理解一下这两种循环之间的差异，是不是就比较容易理解了呢？ 在“绘制网格”一节中，我们使用了“重复执行”的循环来绘制100个格子，它看起来是这个样子的。 [图片] 这种网格绘制的方式看起来还是蛮不错的，但是如果你希望的是当游戏启动后，立刻呈现一个完整的网格的话，那么就要将网格绘制逻辑中的“重复执行”积木块更换为“逻辑执行”。 因为思维的惯性，我忽略了这两种循环的区别，一直都是使用“重复执行”来处理循环，但是，当我需要遍历100个网格中的数据进行验证和匹配时，原本想要的是立刻马上得到结果，因为误用了循环，导致计算结果被往后延迟了。找了很长时间的问题，最后才发现问题出在了循环上。希望你能提前了解这两者之间的差异，避免掉进这个“坑”。总结一下： 这一节里，我们了解了“帧”的概念，并且了解了“重复执行”和“逻辑循环”这两种循环的区别。“重复执行”比较适合用于游戏中的物体的移动，“逻辑循环”比较适合用于游戏中的计算。理解了它们的区别，才能更好的进行应用，在不同的情境下使用不同的循环。 练一下： 在第二节使用表格处理数据中，我们使用了“重复执行”积木来对表格进行遍历和检查，对于处理计算来说，这显然是错误的。试着用“逻辑循环”积木替换“重复执行”积木，然后通过“调试场景”看一下这两者之间的计算时间的差异。  如果你对游戏开发感兴趣，欢迎关注我的微信公众号：小蚂蚁游戏开发，了解更多与小游戏开发有关的内容。 [图片]

今天分享一下横版游戏中角色的移动控制，在一个 2D 的横版游戏中，对于游戏角色的移动控制，其实只需要考虑水平方向上即可。如果角色可以跳跃的话，才需要去考虑垂直方向上的移动，这篇文章只涉及到水平方向上的角色移动控制。 [图片] 如图，是一个人物角色，我们需要考虑的有两点。 第一点是控制这个角色在水平方向上移动，按向右移动的按钮时，他的位置应该向右移动，按向左移动的按钮时，他的位置应该向左移动。 第二点是控制角色的朝向，向右移动时，角色应该面向右，向左移动时，角色应该面向左。 接下来，我们来到微信小游戏制作工具中，看一下如何实现这样的移动控制功能。 我们先来实现一下利用“摇杆”控制角色的移动。“摇杆”插件位于素材库中，点击“资源管理器”中的“添加素材”按钮，打开素材库。 [图片] 在素材库的上选择“插件”，找到“摇杆”，添加到项目中。 接着，再添加一个用于控制的角色，可以在素材库中找到“丛林冒险”中的“奔跑人物”（这个素材是有跑步动画帧的），添加到项目中。 [图片] 添加完成之后，我们的项目就变成了这样。 [图片] 接下来我们将使用下方的这个摇杆来控制游戏角色的移动。 要实现精灵的移动控制，其实工具已经为我们提供了现成的“行为”了，选中“奔跑人物”，然后在属性区中点击“管理行为”，在打开的行为面板中，开启“方向控制”行为。 [图片] 行为开启后，回到属性区的下方就可以看到关于“方向控制”行为的一些属性了。这里因为我们只需要控制水平方向上的移动，所以方向选择这里使用“左右”即可。 [图片] 除此之外，在积木区中的“行为”类别中，也增加了与“方向控制”有关的积木块。 [图片] 其实，在增加了“摇杆”插件，开启了“方向控制”行为之后，我们就已经完成第一步了，点击预览场景，看一下。 [图片] 可以看到，这时我们已经可以使用摇杆来控制角色的移动了。 接下来，我们继续完成第二步，就是调整角色的朝向，让角色向右移动时，面向右，向左移动时，面向左。 想要实现这个功能，需要先了解 2 块积木块，第一块就是“方向控制”中的“移动方向”积木块。 [图片] 调用这个积木块，我们可以获得一个角度值，通过判断当前的角度值，可以知道当前角色是在向哪里移动。 [图片] 如图，如果当前正在向右移动的话，调用“移动方向”积木块会获得一个 0 的值，向左移动的话，会获得一个 180 的值。 接下来，我们了解一下第二块积木块。位于“外观”中的“将自己的造型水平翻转”。 [图片] 这个积木块帮助我们解决的就是精灵图片的朝向。 [图片] 如图，左侧的图片经过“水平”翻转后，就会变成右侧的样子。 在了解完这两块必须的积木块之后，我们直接来看一下实现逻辑，在角色上增加如下的积木块。 [图片] 这里我们根据“是否向右”的变量的值，以及“移动方向”的数值，来判断何时进行水平翻转。如果当前角色面向右，那么只有在角色向左移动的时候，才应该进行一次翻转，让角色面向左，反之亦然。 再次预览一下，看看移动效果。 [图片] 根据摇杆的控制，角色会向正确的方向移动，并且会面向正确的方向，这样控制角色移动的功能就完成了， 可能有人会说，这是一个 2D 横版游戏，根本没有必要使用一个包含 4 个方向的摇杆，只需要使用“一左一右”的两个按钮控制方向就可以了。使用两个按钮来控制方向其实也非常的简单。 我们在场景中增加两个按钮，表示左右键。 [图片] 然后，新建 2 个通知，一个通知“向左移动”，一个通知“向右移动”。 [图片] 这两个按钮的上的逻辑非常的简单，当我按住按钮时，它们给游戏中的角色发送对应的通知。 [图片] [图片] 最后，来到角色上，接收这两个通知，然后只需要根据通知调用“行为”中的“向左/右移动”积木即可。 [图片] 最后，我们来预览一下。 [图片] 这样我们就实现两种移动控制方式，一种使用“摇杆”控制，一种使用“左右按钮”控制，其实“摇杆”插件只不过是自动给我们处理了向左向右的移动而已。 好了，今天的内容就到这里了，对于横版游戏中角色的移动控制技能，你掌握了吗？  ------ 如果你想学习做游戏的话，关注我的公众号就对了。 [图片] 小蚂蚁开通视频号啦，分享一下与做游戏有关的有用有趣的短视频，另外每天都会直播制作微信小游戏，欢迎关注哟！ [图片]