唤境引擎制作微信H5教程,平台跳跃小游戏开发

 时间:2024-10-12 19:54:49

本次给大家分享一个游戏开发教程,使用唤境引擎制作跳跃小游戏。现在开始讲讲如何制作一块跳跃小游戏

工具/原料

唤境引擎

新建项目

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

2、在弹出的项目设置中,选择窗口尺寸为1920*1080。命名为“平台跳跃”。点击确定,即可进入我们新建的项目中。

唤境引擎制作微信H5教程,平台跳跃小游戏开发

设置游戏图层组

1、一稍僚敉视个场景中可以包含多个图层组,您可以使用多个图层对对象实例进行分组。把不同的对象实例放在不同的图层里面,这样您就能轻松地排列哪些对象实例出现在其他对象实例之上,并且可以隐藏、锁定图层耘资诡拨组、应用视差效果等等。为了方便我们制作游戏时分层,所以我们在制作游戏前先建立三个图层组,分别是背景层,角色层,平台层。新建图层的方法:双击场景,进入指定场景中。

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

4、重复添加图层步骤,添加新的图层,命名为平台。至此,我们已经做好了实现平台跳跃游戏的准备工作,下面就可以开始添加素材了~

唤境引擎制作微信H5教程,平台跳跃小游戏开发

添加图像

1、图层组建立好之后,我们就可以往图层组中添加图像了。在唤境Evkworld中,图像是通过精灵对象殂翼瑟擀实现的;在我们的平台跳跃游戏中,哥布林,平台,障碍物,敌人都是精崾栏毙庙灵对象。精灵对象可以是一张静态的图片(如背景图、敌人,平台等),也可以是一组图片做成动画的效果(哥布林)。添加哥布林待机,走动,跳起动画首先我们需要先选中角色图层,左键点击图层。选中时对应图层会加深背景颜色代表选中。

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

4、由于我们准备了的是四组哥布林图组成哥布林动画,首先我们把默认动画重命名为待机哥布林。点击下方添加动画帧按钮,打开本地文件,添加待机哥布林动画图片。在本地文件选择器中,可以按住shift一次性添加多个图片。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

5、选中第0帧动画,右键选择删除。这样我们待机哥布林动画就添加完成了。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

添加平台

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

5、至此,平台跳跃游戏中的所有图像我们就都添加到项目中了,预览一下,就能看到全部内容。那么我们怎么让游戏动起来呢?请看下节,添加能力~

唤境引擎制作微信H5教程,平台跳跃小游戏开发

添加能力

1、能力是唤境Evkworld中预先设置好的功能;通过为对象添加能力,就可以让对象拥有某种功能。对象可以同时拥有多个能力,通过不同能力的组合可以帮助我们趑虎钾缫更加快捷便利的制作游戏。在我们的平台跳跃游戏中,我们用到了平台跳跃能力,刚体能力,镜头跟随能力。下面将为大家讲解能力的添加方式,以及每种能力的作用。为哥布林添加平台跳跃能力在对象库选中哥布林。在右方属性区域选择能力。为哥布林添加平台跳跃能力。平台跳跃能力允许对象可以在平台(刚体对象或跳穿平台)上进行跑、跳等行为。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

2、这时候我们预览一下,堞钥控买哥布林直接掉落到场景之外,这时因为我们还没为平台和砖块添加刚体能力,因为拥有跳跃平台能力的对象需要在平台上才能进行跑,跳等操作。为平台,砖块添加刚体能力在对象库选中平台(砖块)。在右方属性区域选择能力。为平台(砖块)添加刚体能力。刚体能力:令对象不可通过。这里添加的刚体能力让哥布林能站在平台或砖块上。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

6、在项目库选择场景,设置场景W属性4720.我们这时候再预览一下,当哥布林一直往右走,镜头这时候就会跟随哥布林往右移。就有类椽榕硗巩似马里奥兄弟的感觉了。至此,我们完成了能力的添加。预览一下项目,玩家可以通过上下左右方向按键控制哥布林移动和跳跃,哥布林也因为添加了镜头跟随能力,让镜头跟随哥布林。但我们如何让哥布林在行走跳跃时播放不同的动画?这就需要事件的加入了。请看下节,添加事件~

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

添加事件

1、接下来我们使用唤境Evkworld的可视化编旯皱镢涛程方法:事件系统,来添加我们项目的游戏逻辑。下面先简单介绍一下事件表:编辑器每一帧会检测一次事件表里的所有事件,然后选中所有条件符合当前游戏状态的事件,执行该条事件的动作;然后更新游戏状态(包括内部逻辑及屏幕表现)。事件表的执行顺序是从上到下,所以最上面的事件会优先执行。设置哥布林动画控制我们添加事件组(动画控制事件组),通过判断哥布林的平台跳跃的各种状态条件,更改哥布林的播放动画。点击“+分组”按钮,命名动画控制。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

8、整个动画控制事件组如下图所示。这时候我们预览看一下,当哥布林移动时,跳跃时,停止移动时分别会播放我们通过事件表设置的动画效果了。

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

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

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

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发

2、设置动作,选择系统,右方切换到系统(条件与动作框),双击选择“重启当前场景”动作。这样简单的平台跳跃游戏就完成了。大家可以使用工具来制作自己的平台跳跃游戏。

唤境引擎制作微信H5教程,平台跳跃小游戏开发
唤境引擎制作微信H5教程,平台跳跃小游戏开发
  • 怎么设置Photoshop制作精准边框的方法
  • PS 2018如何调整图片的色阶
  • Axure 中继器 移入行变色 及 选中行变色
  • PS怎么在有蒙版的前提下调整蒙版
  • C4D R20中如何用体积建模创建一块奶酪
  • 热门搜索
    关于海洋的手抄报 世界遗产手抄报 青年节手抄报 五一劳动节手抄报简单又漂亮 关于重阳节的手抄报简单又漂亮 立冬手抄报 中国梦 手抄报 新年英语手抄报 珍爱生命手抄报内容 五一手抄报内容