微信小程序H5射击游戏唤境制作教程分享

今天是我最喜欢的射击游戏！！话不多说，直接进入正题吧~！

点击这里来下载工程文件，
预览状态下，使用键盘上下左右按键可以让玩家上下左右行走，点击鼠标左键玩家可以发射子弹；当玩家子弹射中怪物时，怪物会被消灭；当怪物碰撞到玩家，玩家被消灭，游戏结束。

点击这里下载工程中所用的素材哦~

1.新建项目

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

在弹出的项目设置中，选择窗口尺寸为1920*1080。命名为“俯角射击”。

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

设置游戏图层组

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

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

新建图层的方法：

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

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

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

至此，我们已经做好了实现俯视角射击游戏的准备工作，下面就可以开始添加素材了~

2. 添加图像

图层组建立好之后，我们就可以往图层组中添加图像了。在唤境中，图像是通过精灵对象实现的；在我们的俯角射击游戏中，玩家、怪物、子弹、爆炸效果、背景这些都是精灵对象。精灵对象可以是一张静态的图片（如背景图、玩家、怪物、子弹、爆炸效果等），也可以是一组图片做成动画的效果。

2.1 添加背景图

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

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

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

由于我们插入的是一张静态的背景图，所以只需要双击下方第一个小精灵图标或点击打开文件（下图中红框的部分）即可打开本地文件，添加你想要的图片。点击确认。

修改背景图的位置，使其左上角与舞台的左上角重合。您可以直接在舞台上选中背景图拖拉蓝色边框修改位置或在舞台上选中背景图之后在右方属性中修改X、Y属性来修改。

2.2添加玩家

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

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

拖入舞台后，双击对象库对应的精灵图标，进入图片编辑器，上传玩家图。点击确认。

修改玩家图的大小和位置，可以直接在舞台上选中背景图拖拉蓝色边框修改位置和大小或在舞台上选中背景图之后在右方属性中修改X、Y、W、H属性来修改。

2.3添加怪物

通过类似的步骤，在角色层添加怪物，设置怪物位置和大小。

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

2.4添加子弹、爆炸效果

通过类似的步骤，在角色层添加玩家子弹，设置子弹的宽为30、高为12。

通过类似的步骤，在角色层添加爆炸效果。请注意，爆炸效果是有黑色底的；在编辑器中，我们提供了混合模式这一选项，来处理各类元素叠加的问题。选中爆炸元素后，在右侧属性栏中将它的混合模式设置为叠加，就可以在游戏中消除其黑色底。更多关于混合模式的说明，可以参看教程中的混合模式说明一文。

3.添加能力

能力是唤境中预先设置好的功能；通过为对象添加能力，就可以让对象拥有某种功能。对象可以同时拥有多个能力，通过不同能力的组合可以帮助我们更加快捷便利的制作游戏。在我们的俯视角射击游戏中，我们用到了八方向运动能力、边界限制能力、镜头跟随能力、子弹能力、渐隐渐现能力。下面将为大家讲解能力的添加方式，以及每种能力的作用。

3.1为玩家添加八方向运动能力

在对象库选中玩家。在右方属性区域选择能力。为玩家添加八方向运动能力。

八方向运动能力允许对象在上下左右方向和对角线上移动，默认情况下由箭头键控制。通常适用于控制对象在场景中的移动。

这时候我们预览一下，可以通过上下左右方向按键来控制玩家的移动。但是，此时玩家是可以走出场景外的；为了限制玩家不能走出场景之外，我们还需要另外一个能力，那就是边界限制能力。

边界限制能力用于防止对象离开场景。常用于可以自由移动但不能离开场景边缘的对象。边界的大小是根据场景的大小决定。

在对象库选中玩家。在右方属性区域选择能力。为玩家添加边界限制能力。

这时候我们预览一下，可以通过上下左右方向按键来控制玩家移动，并且这时候玩家不能走出场景之外了。

但是我们希望玩家可以在背景图的范围内（如下图紫色框）自由走动，并且镜头跟随着我们的玩家移动（即玩家走到哪里，镜头就到哪里）

所以我们需要先修改场景大小为背景图大小，这样就可以在背景图范围内移动；然后为玩家添加镜头跟随能力，这样玩家走到哪里，就可以显示对应的背景图。

选中场景，在右方场景属性中，修改场景W、H属性为背景图的W、H。

在对象库选中玩家。在右方属性区域选择能力。为玩家添加镜头跟随能力。

镜头跟随能力会将视窗的中心置于该对象上，让镜头跟随着玩家移动。

这时候我们预览一下，可以通过上下左右方向按键来控制玩家移动，并且这时候玩家不能走出场景之外了。但玩家可以在背景图的范围内自由走动，并且镜头跟随着我们的玩家移动。

上面介绍了如何添加精灵，和给对应的精灵添加能力。通过添加能力我们可以让对象拥有唤境中预先设置的功能，例如边界限制，镜头跟随，八方向移动等等。
接下来我们添加怪物和子弹对应的能力。

在对象库选中怪物，为其添加子弹能力。子弹能力会让对象持续向前移动，运动方向为对象的角度。

选中子弹，为其添加子弹能力及出场景销毁能力。当拥有出场景消耗能力的对象离开场景区域时，会被自动销毁，以减少性能上的负担。

爆炸效果通常来讲应该是有一个突然出现，逐渐消失的过程的，因此我们可以为其添加渐隐渐现能力。具有渐隐渐现能力的对象会有淡入淡出的过程，具体时间可以通过属性栏设置。在本教程中，如下图设置即可。

预览一下项目，玩家可以通过上下左右方向按键控制玩家移动，怪物也因为添加了子弹能力有了移动的效果。但我们如何让主角在我们点下鼠标时开枪射击呢？这就需要事件的加入了。

4.添加事件

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

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

4.1设置玩家面向角度对着鼠标位置

玩家面向角度永远是对着我们的鼠标位置。点击“+事件”按钮，添加一条新的事件。

设置条件，选中事件表上方系统按钮或在抽象对象库选中系统，右方切换系统（条件与动作框），双击选择“每帧执行”条件。

设置动作，在舞台选中玩家或对象库选中玩家，右方切换玩家（条件与动作框），双击选择“按位置设置角度”动作。X设置鼠标位置.x,Y设置鼠标位置.y。

点击完成编辑，这样我们第一个逻辑事件就完成了，我们来预览看一下，玩家的面向方向会根据我们鼠标的位置发生改变。

设置按下鼠标左键玩家发射子弹

当我们按下鼠标左键的时候，玩家会发射子弹。点击“+事件”按钮，添加一条新的事件。

设置条件，当鼠标左键按住时，每0.1秒玩家发射一颗子弹，选择事件表上方的鼠标操作或在抽象对象库选择鼠标操作，右方切换到鼠标操作（条件与动作框），双击选择“按住时”条件。鼠标按键选择左。

设置组合条件，选择事件表上方的系统或在抽象对象库选择系统，右方切换到系统（条件与动作框），双击选择“每隔X秒”条件，间隔时间设置0.1秒。

设置动作，在玩家所在的位置创建子弹，在舞台选中玩家或对象库选中玩家，双击选择“生成其他对象”动作。对象选择玩家子弹，图层组设置“角色”，定位点我们先设置0.

这时候我们预览看一下，当我们鼠标左键按住时，子弹就会生成并且发射出去，但是子弹生成的点位置不对，是从玩家的头上生成的子弹，而正确的生成位置应该是在玩家图片的枪口上。

这是因为我们在上面一条“生成其他对象”的动作中，定位点设置为0（0即玩家的原点位置，默认是精灵对象的中心原点），所以我们需要到玩家精灵的图片编辑器中设置一个绑定点在枪口的位置。在对象库中双击玩家精灵进入玩家精灵图片编辑器。

点击设置绑定点，在玩家图片的枪口位置双击，新增一个绑定点，并设置绑定点名称为“发射位置”。（这里设置的名字会用于下方事件）

点击确认，新的绑定点就设置成功了，然后我们双击玩家子弹生成的事件，设置定位点为“发射位置”。

这时候我们在预览一下，当我们按下鼠标左键发射子弹时，就是从玩家枪口（即我们设置的发射位置点）发射子弹了。

但是我们发现，当玩家子弹碰撞到怪物的时候，并没有发生任何的事情，这是因为我们还没有设置玩家子弹碰撞怪物的事件逻辑，接下来我们就制作玩家子弹与怪物碰撞的事件。

4.2玩家子弹与怪物碰撞后消灭怪物

点击“+事件”，添加一条新事件。

设置条件，在舞台上选择玩家子弹或对象库选择玩家子弹，右方切换玩家子弹（条件与动作框），双击选择“与其他对象碰撞时”条件，对象选择怪物。

设置动作，在子弹与怪物碰撞位置创建爆炸效果并销毁怪物和玩家子弹。1：选择玩家子弹，右方切换玩家子弹（条件与动作框），双击选择“生成其他对象”，对象选择爆炸效果，图层组设置角色，定位点设置0。2：选择玩家子弹，双击选择“销毁”动作。3：选择怪物，右方切换怪物（条件与动作框），双击选择 “销毁”动作。

整个俯角射击游戏的基本逻辑已经制作好了，但是为了让游戏更有趣，我们还可以优化一下怪物AI，让游戏更加有趣。

5.添加AI

首先我们需要优化的是怪物的AI属性，因为怪物添加的子弹能力，所以怪物会根据对象的角度来确定运动方向，所以我们增加一条事件，设置“场景开始时”条件，设怪物的角度为随机角度。让怪物在场景初始化时运动的方向是随机的。

5.1设置怪物初始运动方向随机角度

添加一条新事件，选择系统，双击选择“场景开始时”条件。选择怪物，双击选择“设置角度”动作，角度设置random(360)。选中事件，按住鼠标左键，把这条事件拖动到事件白表最上方，因为我们希望案例开始时，优先执行此事件。

怪物的初始运动方向设置好了，但怪物还是只会向初始设置的方向运动，运动到场景之外，所以我们另外增加事件，当怪物运动到场景之外时，我们设置怪物的角度朝着玩家的角度移动。

5.2设置怪物出场景外后改变运动方向面向玩家

添加一条新事件，选择怪物，双击选择“在场景外时”条件。选择怪物，双击选择“按位置设置角度”动作，X设置玩家.x,Y设置玩家.y。

5.3 设置怪物距离玩家小于1000像素时自动跟踪玩家位置运动

为了让怪物更加智能一点，我们希望当怪物与玩家的距离少于1000像素的时候，设置怪物的角度转向玩家。

添加一条新事件。设置条件，选择系统，双击选择“遍历循环”条件，对象选择怪物。选择系统，双击选择通用下的“比较两值”条件，值1设置distance(玩家.X, 玩家.Y, 怪物.X, 怪物.Y)，比较方式选择小于，值2设置1000。
distance()函数作用是输入两个坐标位位置，即可获得两个坐标位置之间的距离。

设置动作，选择怪物，双击选择“朝某位置旋转”动作，角度设置1，X设置玩家.X，Y设置玩家.Y。

5.4设置怪物与玩家碰撞时消灭玩家

添加一条新事件。设置条件，选择怪物，双击选择“与其他对象碰撞时”条件，对象选择玩家。设置动作，选择玩家，双击选择“销毁”动作。

5.5设置每3秒在场景右方随机生成怪物

添加一条新事件。设置条件，选择系统，双击选择“每隔X秒”条件，间隔事件设置3。设置动作，选择系统，双击选择“创建实例”动作。

这样简单的俯角射击游戏就完成了。大家可以使用工具来制作自己的俯角射击游戏。

进阶思考题

1.如何制作怪物血量，设置逻辑当怪物受到三次子弹攻击的时候才会被消灭？

2.设置游戏得分，每消灭一只怪物增加100分？

3.如何设置游戏难度，当越来越多的怪物被消灭时，增加怪物的移动速度？

4.设置重新开始按钮，当怪物碰撞到玩家时游戏结束，舞台弹出重新开始按钮，点击则重新开始游戏？