兔子平台作业展示

PersonalClubHM 2018-07-03 20:11:11

       今天带来的展示是关于实现2D游戏中的赛跑游戏,游戏分为两关,第一关是兔子与乌龟赛跑,当碰到石头会减速,掉入坑中则游戏结束。第二关是乌龟与狼赛跑,除了石头和坑外,还可以通过吃胡萝卜加速。下面将分板块介绍各部分的制作步骤。


Part1  场景搭建

       该部分主要介绍关于背景及场景中各物体的制作。

       首先我们需要在Assets文件夹中建好Prefabs、Scenes、Scripts、Animations这几个文件夹备用,并导入素材中的Sounds和Textures文件夹。


       将该游戏中所用到的所有图片类型改为2D和UI类型,如图所示。

       接着把背景板以图片的方式拉出来,切换成2D模式,调整好其尺寸和位置使其遍布整个画面,并按Ctrl+D复制出几份并收尾无缝相接,制作出几个循环的场景。需要注意的是添加背景时需要先创建一个空物体作为该类型的名称,然后将所用到的各元素(这部分为这几张重复的图片)全部放在该名称目录下作为子物体,以方便后续操作。在该游戏的所有物体均使用上述方式创建,后面不一一赘述。

       下面是关于石头和坑的制作。首先创建空物体Env,在其目录下分别创建stones和pits分别存放石头和坑。将素材库中Props文件夹里的stone图片,拖出来放入stones目录下,系统将自动生成物体stone。在属性面板中将Order in Layer属性值改为1,保证石头显示在背景板上面。(下面的坑和胡萝卜也是如此,而背景板的Order in Layer=0)

       由于石头和坑是批量操作,本身较为繁琐,因此我们这里采用预制体的方式来简化操作。将stone和pit拉入Prefabs文件夹中,这样会系统会自动生成stone和pit预制体。

       接下来我们依然使用Ctrl+D将石头和坑复制出多个,并调整好其尺寸大小,创建完毕后如图所示。(完整效果图较长,这里选择截取其中一部分展示)



       接着我们需要为石头添加碰撞体。选择stone预制体,添加组件Box Colider,这样场景中的所有stone都会自动添加碰撞体组件。我们选择其中一个stone实例,点击Box Colider中的Edit Colider,通过Center和Size属性值调整碰撞体位置和大小以适应石头大小。

       坑的碰撞体添加类似,但这里添加的是圆柱体的Capsule Colider,且我们注意到坑是以X轴方向延伸的椭圆形,因此需要调整Direction为X-Axis,如图所示。

       角色在奔跑时需要识别碰撞的具体是石头还是坑,这里我们需要给物体附加标签Tag。点开Tag的下拉菜单,单击Add Tag,分别添加stone和pit的标签用来识别不同的物体。添加完后再Tag下拉菜单中会出现相应的标签,这时我们分别选择对应相应的标签即可。

       将石头和坑做好后我们需要添加起点和终点的牌子。同样分别选择素材中Props中的startPoint和endPoint图片拖入Evn中,修改其大小和位置,使其分别位于背景的左右两侧。

       另外我们需要给终点牌子一个碰撞体来判断兔子跑到了终点,这里用到的是Box Colider,位置和大小如图所示。我们还需要将终点的Tag设置为endPoint,如图所示。

        这样我们便完成了场景的全部搭建过程。


Part2 兔子角色的创建

       该部分介绍关于兔子角色的动画及控制脚本、碰撞检测等功能。

       首先我们需要依照上个案例的方式创建出兔子的动画。将RabbitJump图片的Texture Type改为Sprite(2D and UI),将Sprite Mode改为Multiple,点击Sprite Editor,在弹出的窗口中点击Apply。在动画窗口中点击Slice,再单击Apply,注意到完成后兔子完整动画里出现了一个个白色的矩形,这就是兔子切割后每张图的大小。

       在切割完后,rabbitJump会分为10个不同的Sprite。

       其余两个准备和奔跑的动作也按照相同的方式进行切割。接下来我们将素材库中的rabbitReady拖入Hierarchy中的Characters下方,这样就导入了兔子模型。将兔子模型的y轴方向设置为180度,把兔子面向右方,并将Order in Layer调整至3。

         接下来我们生成兔子的动画。调出Animation窗口,选择兔子角色,为其创建动画,将该动画命名为rabbitReady并保存至Assets文件夹下的Animation文件夹。接着我们将切割好的所有rabbitReady图片全部选中,拖到Animation窗口的时间轴起点,并将Samples改为10.

      接着我们单击Animation面板中rabbitReady右边的下拉箭头,选择Create New Clip,用同样的方式创建出另外两种动画Jump和Run。如图所示。

       另外还需要把rabbitJump的属性面板里的Loop time取消勾选。

      下面我们开始对兔子的动画在不同状态中的切换进行设置。如图,我们选中兔子,打开Animator面板,首先在左边Parameters中为其添加三个Bool类型的变量,然后在Base Layer中对三种状态之间设置转换关系。

       接着我们对于每种状态在右边属性面板中,设置其Has Exit Time、Fixed Duration取消勾选,Transition Duration为0,这样我们可以看到下方在两种状态之间的转换时间为0.并在下方添加相应条件以符合实际。

       我们现在为控制兔子创建相应代码,首先是创建一个GameState,列出所有用到的状态。

       接着我们在PlayerStateController中实现监听键盘输入以及动画状态的切换功能。(代码略长,此处截取关键部分展示)

    

      在这里我们是通过给兔子添加Charater Controller组件的方式控制兔子的动作,也相当于是兔子的碰撞体,因此依然通过调整Center、Radius、Height几个参数使得这个范围刚好包围兔子。

       另外我们还需要在兔子脚下添加一个地面碰撞体使得兔子不会掉下去,因此这里我们设置了一个ground(Box Colider),如图所示。

       接下来便是重点部分,我们需要新建一个Player Controller,该代码实现如下功能:获取PlayerStateController脚本获取动画状态,并设置不同状态下兔子的速度(Velocity)。另外我们需要检测兔子碰到的是坑还是石头,若是石头,则减速;碰到坑,则失败。(这里截取重点部分)

       这部分的最后一步是要设置摄像机跟随兔子,我们将摄像机设置为移动物体的子物体,并随着兔子移动而移动。因此我们新建CamFollow脚本来实现该功能。

       我们在Rabbit游戏物体下新建Camera物体以获取Rabbit坐标,接着将Camera拖出来,并将Main Camera作为Camera的子物体,我们将CamFollow脚本赋给GameController,将Rabbit物体拖入Target中。


Part3 制作乌龟奔跑动画

       跟兔子一样,首先我们需要按照上述方法切割乌龟动画,再将其中的TortoiseReady拉出来作为模型,并将其Y轴方向旋转180度,使乌龟面朝右边。


      接着同样,我们需要将乌龟的动作设置为两组动画,并设置其转换条件。但由于是这里实现的是电脑使乌龟自己移动作为对手,因此不需要取消过渡时间,如图所示。

        最后我们同样通过CompetitorController来控制乌龟移动。这里代码中最后还有当乌龟比兔子先运动到终点时,游戏失败的判断,如图所示。

      同样为乌龟添加Character Controller组件,将脚本赋给Tortoise,乌龟便可以开始移动了。

       到此,乌龟的动画就制作完成了。


Part4 游戏整体UI界面的制作

       首先我们在Canvas下创建一个空物体messageBox,将其画布属性设置为如下图所示,这样使得它能固定在屏幕中央。

      接着我们在messageBox下方建一个UI Image,把它遍布整个屏幕,颜色调为黑色,透明度调为190。这样便制作好了消息提示框后面的背景。

       做好背景后,我们继续添加UI Image用来存放消息框。这里我们把素材库中的message图片拉出来,放在Source Image中。调整其大小和尺寸。

      我们还需要标题和提示文字,在这里另外添加两个UI Text,调整字的颜色、大小和位置。最终成品如图所示。

       依照上述方法,我们可以做出显示胜利的界面和失败的界面。

       最后我们还要为UI界面进行代码控制,实现游戏总控制程序,因此我们新建GameController。

       最后我们再添加一个空物体GameController,将代码附在上面,将消息框、成功提示框和失败提示框附上去,便可以实现在三个消息框的切换了。

这样我们就能实现代码对UI的控制了。

      到此,整个龟兔赛跑的游戏就完成了。

Part5 后续关卡完善

      有了第一关作为基础,我们可以照着样子进行后续关卡的完善,比如添加新的功能,例如吃胡萝卜加速等等,这里展示第二关兔子和狼赛跑的完善部分。

      首先我们将第一个场景复制多一份,把第二个场景中的龟变成狼、更换背景板、重新切割动画、设置状态转换、附加Character Controller组件等等,这里就不再进行赘述了。


       这一关需要改变的地方是添加一个会加速的胡萝卜,做法同石头类似。首先我们需要将胡萝卜拉进预制体Prefabs中,为其添加Capsule Colider碰撞体,根据胡萝卜朝向将Direction设置为Y-Axis。但需要注意的是胡萝卜是吃完后就消失,因此需要勾选Is Trigger设置为触发器。

另外需要给胡萝卜附加carrot标签以区别坑和石头。

这样我们在碰到胡萝卜的过程中就可以实现加速了,代码如图所示。

最后我们将消息提示框依照上一关操作进行变更,具体操作不再赘述,下面展示效果图。

       至此,整个赛跑游戏就介绍完毕了。