【官方教程】热门塔防游戏的教程,麻烦签收下!



  • 咳咳,一如既往的开场白时间~

    身为一枚优秀的官网搬运工,如此高效又优秀,真是很不好意思呢~

    今天带来的是塔防游戏制作攻略

    点击这里来下载工程文件

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

    预览状态时敌人会从四个生成点随机生成,并且会自动寻路绕过黑色墙体走向红色终点。点击黑色墙体可以创建炮塔,炮塔会自动攻击敌人。

    废话不多说,快打开唤境燥起来~!

    1.新建项目

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

    image.png

    在弹出的项目设置中,选择窗口尺寸为800*600。命名为“塔防游戏”。

    image.png

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

    设置游戏图层组

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

    为了方便我们制作游戏的时候的分层,所以我们在制作游戏前先建立四个图层组,分别是背景,墙体,炮塔,敌人。

    新建图层的方法

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

    image006.jpg

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

    image008.jpg

    3). 点击左上方的image010.jpg按钮,即可添加新图层,并且修改图层名字。(墙体)

    image.png

    重复添加图层步骤,添加新的图层,分别命名为炮塔,敌人。

    image.png

    至此,我们已经做好了准备工作,下面就可以开始添加素材了~

    2. 添加背景图像

    2.1 添加自动平铺背景图

    我们有一张背景图如下图所示,我们希望背景图是由下图自动平铺形成背景,所以这里我们需要使用九宫格组件来实现这个效果。

    image.png

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

    image.png

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

    image.png

    image.png

    拖入舞台后,在对象库右键九宫格重命名为背景。双击对象库九宫格,进入九宫格编辑器,点击左上方上传图片按钮(下图中红框的部分)即可打开本地文件,添加背景图片。

    image.png

    设置上下左右边距都为0,四边选择 tile,中心也选择 tile。

    image.png

    点击确认回到舞台,修改背景图的位置,使其左上角与舞台的左上角重合。您可以直接在舞台上选中背景图拖拉蓝色边框修改位置和大小或在舞台上选中背景图之后在右方属性中修改X、Y,W,H属性来修改。

    image.png

    image.png

    这时候我们预览一下,可以看到由image.png自动平铺的背景图了。

    image.png

    至此,塔防游戏中的平铺背景图就完成了。

    接下来这个塔防游戏我们分两个大部分来制作,

    第一个部分我们制作的是敌人自动寻路到终点。

    第二个部分制作创建炮塔和炮塔攻击敌人。

    现在开始第一部分~

    3添加敌人图像和全局变量

    在唤境中,图像是通过精灵对象实现的;在我们的塔防游戏中,敌人,墙体,炮塔,炮塔子弹,开始点,终点这些都是精灵对象。

    3.1添加敌人

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

    image.png

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

    image.png

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

    image.png

    由于我们插入的是一张静态的敌人图,所以只需要双击下方第一个小精灵图标或点击打开文件(下图中红框的部分)即可打开本地文件,添加敌人图片。

    image.png

    image.png

    点击确认,回到舞台,修改敌人的大小和位置,可以直接在舞台上选中敌人拖拉蓝色边框修改位置和大小或在舞台上选中敌人之后在右方属性中修改X,Y,W,H属性来修改。

    image.png

    3.2添加终点

    跟添加敌人方法一样,首先我们需要先选中敌人图层,然后添加精灵对象,在对象库右键修改名字为终点,双击精灵图进入图片编辑器,上传终点图片,点击确认回到舞台上修改终点位置和大小。

    image.png

    3.3添加墙体

    跟添加敌人方法一样,首先我们需要先选中墙体图层,然后添加精灵对象,在对象库右键修改名字为墙体,双击精灵图进入图片编辑器,上传墙体图片,点击确认回到舞台上。

    image.png

    设置更多墙,回到舞台,选中墙体,通过复制黏贴制作更多的墙体并且设置位置和大小和角度,制作成塔防游戏中敌人移动的迷宫。

    image.png

    image.png

    3.4设置随机生成点

    一般塔防游戏都会自动生成敌人,然后向终点走去。接下来我们在敌人图层中,新增四个精灵对象,在对象库右键重命名分别命名为出生点1,出生点2,出生点3,出生点4。双击精灵图进入图片编辑器,上传出生点图片,分别将出生点设置于上下左右四个点。

    image.png

    image.png

    3.5 添加全局变量随机开始

    新增一个全局变量命名为随机开始。初始值设置为0.

    image.png

    image.png

    这个全局变量作用是判断随机生成点(即敌人从哪个位置生成)。

    至此,塔防游戏中的敌人图像和全局变量都添加到项目中了,接下来需要为敌人添加能力来帮助我们快速制作塔防游戏。

    4.添加敌人能力

    能力是唤境中预先设置好的功能;通过为对象添加能力,就可以让对象拥有某种功能。对象可以同时拥有多个能力,通过不同能力的组合可以帮助我们更加快捷便利的制作游戏。在我们的塔防游戏中,我们用到了自动寻路能力,刚体能力,炮塔能力。下面将为大家讲解能力的添加方式,以及每种能力的作用。

    4.1为敌人添加自动寻路能力

    我们需要给敌人添加一个能力“自动寻路”能力。这个能力可以让敌人自动绕过墙体走向终点。自动寻路能力 自动寻路根据寻路算法有效地找到绕开障碍物短路径。然后通过事件让敌人沿确定的路径自动移动对象。

    在对象库选中敌人。在右方属性区域选择能力。点击image.png按钮。

    image.png

    image.png

    设置自动寻路能力属性,网格大小单位尺寸设置32,网络边界设置-1,障碍物选择刚体。

    image.png

    4.2 为墙体添加刚体能力

    我们需要给墙体添加一个能力“刚体”能力。这个能力可以让墙体作为障碍物,阻止敌人直接穿过。跟敌人添加能力一样,在对象库选中墙体,在右方属性区域选择能力。点击image.png按钮。选择刚体能力。

    image.png

    至此,我们完成了敌人能力的添加。我们如何敌人不断生成并且自动走向终点呢?这就需要事件的加入了。

    5.添加事件

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

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

    5.1 添加事件组

    为了方便我们管理事件表,我们建立敌人事件组,将有关敌人的事件都放进事件组里。点击“+分组”新建一个事件组,命名为敌人事件组。

    image.png

    5.2设置场景初始化时敌人寻找路径

    选中敌人事件组,点击“+事件”,在敌人事件组里添加一条新事件。

    image.png

    设置条件,选中事件表上方的系统或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“当场景开始时”条件。

    image.png

    image.png

    设置动作,在舞台选中敌人或对象库选中敌人,右方切换敌人(条件与动作框),双击选择“寻找路径”动作。X设置终点.x,Y设置终点.y。

    image.png

    image.png

    image.png

    5.3设置路径寻找成功让敌人沿寻找的路径自动移动

    当路径寻找成功后,我们就让敌人自动沿着寻找的路径自动移动到终点。选中敌人事件组,点击“+事件”,在敌人事件组里添加一条新事件。

    image.png

    设置条件,在舞台选中敌人或对象库选中敌人,右方切换敌人(条件与动作框),双击选择“寻路成功时”条件。

    image.png

    image.png

    设置动作,在舞台选中敌人或对象库选中敌人,右方切换敌人(条件与动作框),双击选择“沿路径移动”动作。

    image.png

    image.png

    这时候我们预览一下,敌人在场景初始化的时候就会自动寻路,然后寻路成功时,就会自动绕过墙走向终点(红色方框的X,Y坐标)。我们可以在舞台上更改敌人的位置,然后看看敌人在不同位置的寻路效果。

    5.4设置每隔1秒在随机生成点生成敌人

    选中敌人事件组,点击“+事件”,新增一条事件。

    image.png

    image.png

    设置条件,选中事件表上方的系统或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“每隔X秒”条件。间隔时间设置1.

    image.png

    image.png

    image.png

    设置动作,选中事件表上方的系统或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“设置值”动作。值设置round(random(1,4))。round(random(1,4)) 这是一个系统内置的函数组合,作用是生成1-4的随机整数,用于下方设置根据生成的随机数不同,在不同位置生成敌人。

    image.png

    image.png

    image.png

    选中刚设置的事件,选中效果如下图所示。点击“+子事件”为本条事件添加子事件。

    image.png

    image.png

    设置条件,选中事件表上方的系统或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择全局变量与局部变量下的“比较两值”条件。变量名选择随机开始,比较方式选择等于,值设置1。

    image.png

    image.png

    image.png

    设置动作,选中事件表上方的系统或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“创建实例”动作。创建的实例对象选择敌人,图层组设置“敌人”,X坐标设置开始点1.x,Y坐标设置开始点1.y。

    image.png

    image.png

    image.png

    再多设置一个动作,在舞台选中敌人或对象库选中敌人,右方切换敌人(条件与动作框),双击选择“寻找路径”动作。X设置终点.x,Y设置终点.y。这个动作作用是让新创建的敌人去寻找路径。因为我们之前已经设置了寻路成功的事件,所以当敌人在出生点创建后就会自动走向终点。

    image.png

    image.png

    image.png

    重复上方步骤,新建另外三个子事件,分别设置随机开始等于2,3,4.在不同的生成点生成敌人,并寻找路径。

    image.png

    image.png

    image.png

    整个完整事件设置如下图所示。

    image.png

    我们预览看一下,这时候每隔1秒,就会随机生成一个敌人。这样敌人系统已经做好了,接下来我们制作第二个部分——添加炮塔图像~

    6. 添加炮塔图像

    6.1添加炮塔

    跟添加敌人方法一样,首先我们需要先选中炮塔图层,然后添加精灵对象,在对象库右键修改名字为炮塔,双击精灵图进入图片编辑器,上传炮塔图片,点击确认回到舞台上修改终点位置和大小。

    image.png

    image.png

    6.2 添加炮塔子弹

    跟添加敌人方法一样,首先我们需要先选中炮塔图层,然后添加精灵对象,在对象库右键修改名字为炮塔子弹,双击精灵图进入图片编辑器,上传炮塔子弹图片,点击确认回到舞台上修改终点位置和大小。

    image.png

    image.png

    至此,塔防游戏中的炮塔图像都添加到项目中了,接下来需要为炮塔添加能力来帮助我们快速制作塔防游戏。

    7. 添加炮塔能力

    7.1 为炮塔添加炮塔能力

    我们需要给炮塔添加一个能力“炮塔”能力。这个能力可以让炮塔作为炮台,当视线内发现敌人会转向敌人。跟敌人添加能力一样,在对象库选中炮塔,在右方属性区域选择能力。点击image.png按钮。选择炮塔能力。

    设置炮塔能力属性,视线距离设置120,射速设置1,预瞄准勾选。

    image.png

    8.添加炮塔事件

    为了方便我们管理炮塔的事件,首先新建一个事件组,命名为炮塔事件组。

    image.png

    选中炮塔事件组,点击“+事件”,新增一条新事件。

    image.png

    设置条件,选中事件表上方的系统image.png或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“场景开始时”条件。

    image.png

    image.png

    设置动作,在舞台选中炮塔或对象库选中炮塔,右方切换炮塔(条件与动作框),双击选择“添加目标”动作。目标选择敌人。

    image.png

    image.png

    image.png

    这个事件设置的作用是把敌人添加到炮塔的目标中,当炮塔的视线范围内出现敌人,炮塔方向转向到敌人。

    8.1设置炮塔发射子弹

    选中炮塔事件组,点击“+事件”按钮,添加一条新事件

    image.png

    设置条件,在舞台选中炮塔或对象库选中炮塔,右方切换炮塔(条件与动作框),双击选择“开火时”条件。

    image.png

    image.png

    设置动作,在舞台选中炮塔或对象库选中炮塔,右方切换炮塔(条件与动作框),双击选择“生成其他对象”动作。对象选择炮塔子弹,图层组设置“炮塔”,定位点设置0.

    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或在抽象对象库选中系统,右方切换系统(条件与动作框),双击选择“创建实例”动作。创建实例的对象选择炮塔,图层组设置“炮塔”,X坐标设置:round((触屏操作.X - 16) / 32) * 32 + 16,Y坐标设置:round((触屏操作.Y - 16) / 32) * 32 + 16。

    image.png

    image.png

    image.png

    这时候我们预览一下,当我们点击墙时,就会在对应点击位置的创建一个新的炮塔。但是炮塔发射的子弹并没有击毁敌人,而且子弹会一直飞出屏幕之外。接下来我们设置另外两个事件分别设置炮塔子弹击中敌人销毁敌人,和子弹运动120距离后自动销毁。

    8.2设置炮塔子弹击中敌人销毁敌人

    选中炮塔事件组,点击“+事件”按钮,添加一条新事件,条件设置炮塔子弹与敌人碰撞时,动作设置销毁炮塔子弹和销毁敌人。

    image.png

    image.png

    image.png

    image.png

    image.png

    8.3 设置炮塔子弹移动距离大于等于120时自动销毁

    选中炮塔事件组,点击“+事件”按钮,添加一条新事件,条件设置炮塔子弹移动距离,动作设置销毁炮塔子弹。

    image.png

    image.png

    image.png

    image.png

    8.4 设置点击炮塔销毁炮塔

    最后设置一个步骤,当游戏运行时点击炮塔时,可以删除已经创建的炮塔。
    首先在舞台或对象库选中炮塔,在右方属性面板中有一个点击穿透属性勾选。

    image.png

    选中炮塔事件组,点击“+事件”按钮,添加一条新事件,条件设置炮塔与炮塔重叠时,动作设置销毁炮塔。

    image.png

    image.png

    image.png

    实现这个效果的逻辑是因为我们把炮塔的点击穿透打开,当我们点击炮塔时就会发生穿透效果,相当于点击到炮塔下的墙,然后触发点击墙生成炮塔的事件,然后新生成的炮塔就会与原因在这个位置上的炮塔发生重叠,然后触发销毁炮塔动作,这样就实现了删除原来炮塔的效果了。

    这时候我们预览一下,点击墙就可以创建新的炮塔,点击炮塔就会删除炮塔。这样简单的塔防游戏就完成了。大家可以使用工具来制作自己的塔防游戏。