【官方教程】超级玛丽的教程,今日份送达~



  • 身为一枚优秀的官网搬运工,我又要代表月亮拯救世界啦~

    今天带来的是冒险类游戏制作攻略

    老规矩,素材和工程文件奉上!

    点击这里来下载工程文件

    这里是素材哦~

    预览状态时使用键盘左右按键可以让哥布林左右行走,使用上按键可以让哥布林跳跃,哥布林可以跳跃到平台和障碍物上,当哥布林掉落到平台下或碰到敌人,游戏结束。

    不要纠结是哥布林还是水管工啦,学到制作方法,素材随便替换~~

    so,现在开始正式的教程吧, hey,we go~!

    1.新建项目

    首先,打开唤境,点击欢迎页左上角的新建项目按钮。

    image.png

    在弹出的项目设置中,选择窗口尺寸为1920*1080。命名为“平台跳跃”。

    image.png

    点击确定,即可进入我们新建的项目中。

    1.1 设置游戏图层组

    一个场景中可以包含多个图层组,您可以使用多个图层对对象实例进行分组。把不同的对象实例放在不同的图层里面,这样您就能轻松地排列哪些对象实例出现在其他对象实例之上,并且可以隐藏、锁定图层组、应用视差效果等等。

    为了方便我们制作游戏时分层,所以我们在制作游戏前先建立三个图层组,分别是背景层,角色层,平台层。

    新建图层的方法

    1). 双击场景,进入指定场景中。

    image006.jpg

    2). 场景下默认已经有一个图层组:“图层组0”,右键图层组0可以修改图层组名字,将其修改为背景。

    image008.jpg

    3). 点击左上方的image010.jpg按钮,即可添加新图层组;添加完成后,将新图层组的名字修改为“角色”。

    image012.jpg

    image014.jpg

    重复添加图层步骤,添加新的图层,命名为平台。

    image.png

    准备工作OK,下面开始添加素材了~

    2. 添加图像

    图层组建立好之后,我们就可以往图层组中添加图像了。在唤境中,图像是通过精灵对象实现的;在我们的平台跳跃游戏中,哥布林,平台,障碍物,敌人都是精灵对象。精灵对象可以是一张静态的图片(如背景图、敌人,平台等),也可以是一组图片做成动画的效果(哥布林)。

    2.1 添加哥布林待机,走动,跳起动画

    首先我们需要先选中角色图层,左键点击图层。选中时对应图层会加深背景颜色代表选中。

    image.png

    选中图层后按照提示操作,点击菜单栏上的精灵图按钮,或直接将精灵图标拖拽至舞台。

    image.png

    拖入舞台后,在对象库右键重命名为哥布林,双击对象库对应的精灵图标,进入图片编辑器。

    image.png

    由于我们准备了的是四组哥布林图组成哥布林动画,首先我们把默认动画重命名为待机哥布林。

    image.png

    点击下方添加动画帧按钮image.png,打开本地文件,添加待机哥布林动画图片。在本地文件选择器中,可以按住shift一次性添加多个图片。

    image.png

    image.png

    选中第0帧动画,右键选择删除。image.png

    image.png

    这样我们待机哥布林动画就添加完成了。

    点击左上方按钮image.png,新建三个新的动画组分别命名为走动哥布林,跳跃哥布林,死亡哥布林。

    image.png

    通过类似待机哥布林的步骤,添加走动哥布林动,跳跃哥布林,死亡哥布林动画图片。

    image.png

    image.png

    image.png

    分别选中四组动画,在右方动画属性中,修改播放速度设置为15。死亡哥布林循环播放勾除掉,循环次数设置为1。

    image.png

    image.png

    image.png

    image.png

    修改哥布林的位置。您可以直接在舞台上选中哥布林拖拉蓝色边框修改位置或在舞台上选中背景图之后在右方属性中修改X、Y属性来修改。

    image.png

    2.2 添加平台

    我们选中平台图层,左键点击平台图层。选中时对应图层会加深背景颜色代表选中。

    image.png

    选中图层后,点击菜单栏上的精灵图按钮,或直接将精灵图标拖拽至舞台。

    image.png

    拖入舞台后,在对象库右键重命名为平台,双击对象库对应的精灵图标,进入图片编辑器,双击下方第一个小精灵图标或点击打开文件,上传平台图。点击确认。

    image.png

    image.png

    修改平台图的位置,您可以直接在舞台上选中平台拖拉蓝色边框修改位置或在舞台上选中背景图之后在右方属性中修改X、Y属性来修改。

    image.png

    一般游戏中的平台都会有多个,所以这里我们回到舞台,选中平台,通过复制黏贴制作更多平台。

    image.png

    image.png

    2.3 添加砖块,障碍物,敌人,背景图

    通过类似的步骤,在平台层添加多个砖块。

    image.png

    通过类似的步骤,在平台层添加多个障碍物。

    image.png

    通过类似的步骤,在角色层添加敌人板栗仔。

    image.png

    通过类似的步骤,在背景层添加背景图。

    image.png

    所有图像都添加到项目中了,预览一下

    image.png

    怎么让游戏动起来呢?继续看,添加能力~

    3. 添加能力

    能力是唤境中预先设置好的功能;通过为对象添加能力,就可以让对象拥有某种功能。对象可以同时拥有多个能力,通过不同能力的组合可以帮助我们更加快捷便利的制作游戏。在我们的游戏中,需要用到了平台跳跃能力,刚体能力,镜头跟随能力。

    3.1 为哥布林添加平台跳跃能力

    在对象库选中哥布林。在右方属性区域选择能力。为哥布林添加平台跳跃能力。

    平台跳跃能力允许对象可以在平台(刚体对象或跳穿平台)上进行跑、跳等行为。

    image.png

    image.png

    image.png

    这时候我们预览一下,哥布林直接掉落到场景之外,这时因为我们还没为平台和砖块添加刚体能力,因为拥有跳跃平台能力的对象需要在平台上才能进行跑,跳等操作。

    3.2为平台,砖块添加刚体能力

    在对象库选中平台(砖块)。在右方属性区域选择能力。为平台(砖块)添加刚体能力。
    刚体能力:令对象不可通过。这里添加的刚体能力让哥布林能站在平台或砖块上。

    image.png

    image.png

    image.png

    image.png

    image.png

    这时候我们预览一下啊,可以通过键盘上下左右方向键控制哥布林移动和跳跃,但是这时候有一个问题,当哥布林一直往右走的时候,会走出视线范围,不能看到我们设置的右边第二个平台,正常的平台跳跃游戏例如马里奥兄弟,镜头会跟随的主角一起移动,所以我们需要给哥布林添加一个新的能力镜头跟随。

    3.3 为哥布林添加镜头跟随能力

    在对象库选中哥布林,在右方属性区域选择能力。为哥布林添加镜头跟随能力。镜头跟随能力 将视窗的中心置于该对象上。

    image.png

    image.png

    image.png

    这时候我们在预览一下,发现镜头还是没有跟随哥布林移动。我们先来看看我们现在的场景大小是1920 1080,场景的默认大小是根据新建项目时设置的大小。

    image.png

    即如下图所示,灰色边框即我们的镜头,紫色边框即我们的场景大小。镜头跟随是根据场景大小限制镜头移动位置。所以我们需要把场景大小W宽度设置为我们实际场景中需要的大小。

    image.png

    image.png

    在项目库选择场景,设置场景W属性4720.

    image.png

    image.png

    我们这时候再预览一下,可以通过上下左右方向按键控制哥布林移动和跳跃,哥布林也因为添加了镜头跟随能力,当哥布林一直往右走,镜头会跟随哥布林往右移。就有类似马里奥兄弟的感觉了。

    但如何让哥布林在行走跳跃时播放不同的动画?这就需要事件的加入了~

    4. 添加事件

    接下来我们使用唤境的可视化编程方法:事件系统,来添加我们项目的游戏逻辑。

    下面先简单介绍一下事件表:编辑器每一帧会检测一次事件表里的所有事件,然后选中所有条件符合当前游戏状态的事件,执行该条事件的动作;然后更新游戏状态(包括内部逻辑及屏幕表现)。事件表的执行顺序是从上到下,所以最上面的事件会优先执行。

    4.1设置哥布林动画控制

    我们添加事件组(动画控制事件组),通过判断哥布林的平台跳跃的各种状态条件,更改哥布林的播放动画。点击“+分组”按钮,命名动画控制。

    image.png

    image.png

    选中动画控制事件组,点击“+事件”按钮,在动画控制事件组下新建一条事件。设置条件,在舞台或对象库选择哥布林,双击选择“开始运动时”条件,这个条件会判断当哥布林在平台上发生运动时触发。

    image.png

    image.png

    image.png

    设置动作,在舞台或对象库选择哥布林,双击选择“设置动画”动作,动画设置“走路哥布林”,开始点选择开头。

    image.png

    image.png

    image.png

    继续添加一条新事件,设置哥布林停止运动时将哥布林动画设置为待机哥布林,条件选择“停止运动时”,这个条件会判断哥布林没有运动时触发。动作选择“设置动画”,动画设置“待机哥布林”,开始点选择当前帧。

    image.png

    继续添加一条新事件,设置哥布林跳起时将哥布林动画设置为跳跃哥布林,条件选择“跳起时”,这个条件会判断哥布林跳起时触发。动作选择“设置动画”,动画设置“跳跃哥布林”,开始点选择当前帧。

    image.png

    继续添加一条新事件,设置哥布林着陆时将哥布林动画设置为待机哥布林,条件选择“着陆时”,这个条件会判断哥布林跳起后着陆到平台上时触发。动作选择“设置动画”,动画设置“待机哥布林”,开始点选择当前帧。

    image.png

    继续添加一条新事件,置哥布林正在移动时并且在平台上将哥布林动画设置为走路哥布林,条件选择“正在移动时”和“在平台上时”,这时一个组合条件,即判断哥布林正在移动时,平且在平台上时触发。动作选择“设置动画”,动画设置“走路哥布林”,开始点选择开头。

    image.png

    整个动画控制事件组如下图所示。

    image.png

    这时候我们预览看一下,当哥布林移动时,跳跃时,停止移动时分别会播放我们通过事件表设置的动画效果了。

    4.2 设置哥布林碰撞敌人游戏失败

    通过事件设置当哥布林与板栗仔碰撞时,播放死亡哥布林动画,禁用动画控制组,让哥布林无视用户操作。点击“+事件”按钮,添加一条新的事件。

    image.png

    设置条件,选择哥布林,右方切换到哥布林(条件与动作框),双击选择“与其他对象碰撞时”条件。

    image.png

    设置动作,选择哥布林,右方切换到哥布林(条件与动作框),双击选择“设置动画”动作,动画设置“死亡哥布林”。双击选择“无视操作”动作。操作选择开始无视。选择系统,右方切换到系统(条件与动作框),双击选择“启用或禁用事件组 ”动作。

    image.png

    image.png

    image.png

    image.png

    image.png

    点击“+事件”按钮,添加一条新的事件。选择哥布林,右方切换哥布林(条件与动作框),双击选择“动画结束时”,动画设置“死亡哥布林”。

    image.png

    image.png

    设置动作,选择系统,右方切换到系统(条件与动作框),双击选择“重启当前场景”动作。

    image.png

    image.png

    4.3设置哥布掉落到场景之外时重启场景

    一般平台跳跃游戏的判断,主角掉落到场景之外时视为游戏失败。点击“+事件”按钮,添加一条新的事件。选择哥布林,右方切换哥布林(条件与动作框),双击选择“比较Y坐标”条件。比较方式选择大于,Y坐标设置1300.

    image.png

    image.png

    设置动作,选择系统,右方切换到系统(条件与动作框),双击选择“重启当前场景”动作。

    image.png

    image.png

    这样简单的仿版超级玛丽游戏就完成了。大家可以使用工具来制作自己的游戏。

    最后留个思考题吧

    1.如何制作板栗仔移动,做一个简单的AI,让板栗仔在一定范围内左右走动?

    2.现在设置哥布林与板栗仔一碰撞时就让哥布林死亡,我们希望如果哥布林时从上方与板栗仔碰撞时,应该让板栗仔死亡?