如何做一个俄罗斯方块3:形状控制

简介: 在俄罗斯方块游戏中,玩家可以对下落的形状进行控制,控制分为两种,一种是控制形状的移动(左,右,下),一种是控制形状的旋转(顺时针旋转 90 度)。

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


今天,我们来继续学习和实现下一个模块:玩家控制形状


640.png


在俄罗斯方块游戏中,玩家可以对下落的形状进行控制,控制分为两种,一种是控制形状的移动(左,右,下),一种是控制形状的旋转(顺时针旋转 90 度)。


控制形状的移动



我们先来看一下如何控制移动。

640.png

如图是一个“T”型的形状,它在网格中是可以向左,右,下,三个方向移动的。除此之外,它的移动还是有规则的,即每次只能移动一个格子的位置。

640.png

有了这样的规则,其实是让移动变得更简单了。往哪个方向上移动,就将形状向哪个方向平移一个单元格的位置即可。


移动是有限制的,即形状只能在指定的区域内(20 行 10 列的网格)进行移动,所以,我们在处理移动的时候需要考虑边界限制。

0e0f5653a0dbd4223405e85d0f4884e7.png

如图,以第一个形状为例,它一共有 4 种不同的状态,图中红色的圆点表示的形状在当前网格中的位置,可以看的出,“状态1”和“状态2”在判断是否达到右边界时,使用的判断距离是不同的。“状态1”距离右边界一个半方块,“状态2”距离右边界一个方块。


因此,在进行边界判断的时候,我们必须根据当前形状所在的状态进行判断。仔细观察一下上方图中的这 4 种状态,其实是可以分为两组的,“状态1”和“状态3”属于一组,“状态2”和“状态4”属于一组。


接着来看一下,向右移动的积木逻辑。


c1f845047f457e02fe8d3baf9f2606eb.png


根据当前形状的状态,判断是否达到了右边界,如果没有到达右边界的话,就向右移动一个位置。


向左移动也是同样的方法,这里我们就不再赘述了。至于向下移动的处理,我们把它放到后续的碰撞检测模块再进行详细讲解。


控制形状的旋转



接着我们来看一下如何控制旋转,也可以叫做切换形状的状态。


dd0cfcdb2306a9ca69c41de066c62647.png


如图,是“形状1”的所有状态,每一种状态都是以上一个状态为基础,顺时针旋转 90 度。“状态4”再转 90 度,就又回到了“状态1”,状态的切换是一个循环的过程。


找到这个规律之后,实现起来就很简单了,每当进行状态切换时,就将当前形状顺时针旋转 90 度即可。


但是,似乎没有想象的那么简单。

65f1c4c67f282926c4445d1bc2dafc3a.gif

如图,是“状态1”切换到“状态2”的过程,形状在进行旋转时,会以中间的那个红色圆点进行转动,当转到 90 度切换到“状态2”时,我们发现,当前的形状并没有位于网格之上。此时,就需要对当前的形状进行位置调整,让它的每一个方块都落在单元格中。

c1e6c0fc592d37695230df240e88805d.png

如图,向左移动半个格子,向下移动半个格子,便可将“状态2”的图形移动到网格中。


同样当“状态2”切换到“状态3”的时候,也同样会出现这种偏移问题,我们只需要在把这种转换过程画出来,就可以看出偏移,以及调整的方向和大小。


与移动处理一样,状态旋转时,我们也要考虑到左右边界。

2b955348b452178ef1ac9c5e1bcd6dd3.gif

如图,在网格中“状态2”切换到“状态3”的过程是这样的,先旋转 90 度,然后再向右上方进行偏移。

3f57f1b7439c257f52f891ecb6d604e2.gif

但是,当“状态2”位于右边界时,如果还向右上方偏移调整的话,就会导致形状越出边界。

24bfcfb0360d7fcf444326831b3c7adb.gif

这时,形状的调整位置就需要变动,改为向左上方进行偏移。


所以,“状态2”切换到“状态3”时,需要考虑到右边界的情况,如果不在右边界,则旋转后向右上方调整,如果在右边界,则旋转后向左上方调整。同样的,当“状态4”切换到“状态1”时,也要考虑到左边界的情况。


最后,我们来看一下整个状态切换的积木逻辑。


43f8fc7d563d5594de9ee4e0ec44257d.png

ef78925ef1a026c8e599cd75dd7995ec.png


预览一下游戏,看一下移动和旋转控制。


29166719b79871386caa6629c832a1c8.gif


e1332cc1bd0371efd6f997c430974fc4.gif


今天的内容就到这里了,稍微总结一下:在俄罗斯方块中玩家对于形状的控制有两种,一种是移动控制,一种是旋转(切换)控制。在这两种控制中,我们都需要考虑左右边界的处理,而且针对不同的状态,所需要做的边界处理也不同。


另外,你可能发现了,我在游戏中绘制了一个 20 x 10 的网格。这个网格不会在最终的游戏中出现,但是在游戏制作的过程中,却会给我们很大的帮助。有了这样的一张网格,你就能够在游戏中实时的观察到自己对于形状的处理是否正确了。(关于如何绘制一个网格,可以参考一下这篇文章)

相关文章
|
3月前
|
图形学
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
|
6月前
OEEL——使用OEEL快速画出精美图案(以土地利用转移变化为例)
OEEL——使用OEEL快速画出精美图案(以土地利用转移变化为例)
39 0
|
6月前
|
索引
消除游戏中图标下落的原理和实现
消除游戏中图标下落的原理和实现
44 1
|
6月前
俄罗斯方块游戏开发实战教程(3):玩家如何控制形状
俄罗斯方块游戏开发实战教程(3):玩家如何控制形状
77 1
|
6月前
|
存储 算法 Serverless
连线消除游戏的原理和实现
连线消除游戏的原理和实现
89 0
如何做一个俄罗斯方块3:形状控制
今天,我们来继续学习和实现下一个模块:玩家控制形状。在俄罗斯方块游戏中,玩家可以对下落的形状进行控制,控制分为两种,一种是控制形状的移动(左,右,下),一种是控制形状的旋转(顺时针旋转 90 度)。
129 0
|
开发工具
如何做一个俄罗斯方块4:形状碰撞检测(上)
在游戏开发中,我们所说的“碰撞”经常指的是物理碰撞,什么是物理碰撞呢?一般的在游戏开发工具中都会包含一个叫做“物理引擎”的东西,它的作用就是在游戏中模拟出现实中的物理效果。例如,我们扔一个东西,这个东西会因为重力而下落,最终落到地上,与地面发生碰撞。在游戏中,我们可以借助物理引擎,来模拟出东西下落掉到地面上的效果。当东西掉到地面上时,我们就说这个东西与地面发生了碰撞。
305 0
如何做一个俄罗斯方块5:形状碰撞检测(下)
其实,两侧的碰撞判断跟我们上一节讲过的向下移动的碰撞判断原理是一样的,向下碰撞检测的是每一个方块下方的位置是否有其它方块,那么向左/右碰撞检测的就是每个方块左/右侧的位置是否有其他的方块。
319 0
|
小程序
如何做一个俄罗斯方块6:形状停靠
在处理形状停靠之前,有一点儿东西需要了解,就是已经停靠的方块和正在下落的方块不是一种方块,如图,红色的表示的是已经停靠的方块,绿色的表示下落的绿色方块的作用是展示当前下落的形状,红色方块的作用是标识出哪些位置已经摆放了方块。
116 0