微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战

目录

前言

素材准备

关卡设计

正式游戏设计

背景设计

添加战机

添加敌机-小

添加侦察机

添加敌机-大

子弹的逻辑设计

添加空投包

炸弹数量以及得分显示

添加音效

游戏的最终效果

结语


前言

本游戏是基于微信小程序制作工具微信小游戏官网的入门教学视频完成的。

该微信小程序制作工具是一种典型的积木式游戏制作工具,它的特点是:

可视化编程:游戏制作所见即所得,快速上手、无需代码
高效开发:丰富的官方组件,排行榜、性能调优一键完成
赋能创意:个性化素材、自定义组件,高级画板工具

该游戏的制作是基于微信小程序制作工具中的经典飞小游戏的基础之上的,同时添加了战机与敌机的碰撞,提高了敌机发射子弹的速度,增加了小游戏的难度。

首先让我们来看一下该游戏(飞机大战)的演示视频

飞机大战演示视频

接下来让我们开始我们的游戏创作之旅吧!

素材准备

使用该微信小程序制作工具一个比较方便的地方就是它已经给出了比较多的游戏素材,里面有很多个与主题相关的游戏素材。一般来说,包括了游戏精灵,游戏背景图,音效,背景音乐,以及文字框、数字等等。如下图所示,我们可以通过搜索直接找到我们需要的素材。微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第1张图片

然后我们在该素材库中查找主题《飞机大战》,从而可以选取相对应的素材来进行创作。如下图所示,我们首先将需要的素材导入完毕。微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第2张图片

其中,我们需要用到的主要素材有:

战机:即是我们主要操控的飞机。

蓝色子弹:战机发射的子弹,用于击打敌机。

敌机-小:属于敌机的一种,但是属于最低层次的敌机,不能发射子弹,但会与战机发生碰撞,从而导致游戏结束。

侦察机:属于敌机的一种,可以发射金色子弹,子弹击中战机或者侦察机与战机发生碰撞都会结束游戏。

敌机-大:属于敌机的一种,为敌机的最大Boss,可以发射散弹,子弹击中战机或者战机-大与战机发生碰撞都会结束游戏。

金色子弹:为侦察机与敌机-大发射的子弹,会击毁战机。

双弹空投:为击败侦察机或者敌机-大后会有一定几率产生的空投包,或者叫做工具包,如果被战机捡到可以使得战机发射双弹20秒时间。

炸弹空投:为击败侦察机或者敌机-大后会有一定几率产生的空投包,如果被战机捡到后会在左下角中显示炸弹空投的数量,可以点击左下角炸弹的标识,使用该炸弹,从而实现屏幕清屏的作用,为“大招”。

得分:为击中敌机后产生的分数。其中,我们设计的是,击中普通的敌机-小,会得到10分;如果击中侦察机,会得到50分;如果击中Boss,会得到100分。

以及一些其它的精灵、文字框、数字、音效等。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第3张图片

关卡设计

在本游戏中,我们会有一个开始页面,有一个开始游戏的按钮,点击后就会开始游戏。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第4张图片

在点击“开始游戏”后,会跳转到游戏页面,里面就是我们正式游戏的界面(具体的实现后面会讲解)。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第5张图片

游戏结束之后,我们会到达一个重新开始的页面,如果点击重新开始,可以重新回到游戏界面,重新开始游戏。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第6张图片

正式游戏设计

背景设计

我们首先需要挑选我们喜欢的背景来作为我们的游戏背景,背景图可以从小程序制作工具的素材库中选取。我们选取了如图所示的背景图。微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第7张图片

添加战机

我们从素材库中添加了该精灵后,我们还需要为战机设置一定的逻辑以及一定的执行动作(由于篇幅有限,只截取了部分)。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第8张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第9张图片

1. 首先就是在场景启动时,有一个滑行的动画以及一个喷气的造型,主要是为了美化游戏。同时设计可以往任意方向拖动该战机。

2. 然后就是当战机碰到所有的敌机(敌机-小、侦察机、敌机-大)以及所有的金色子弹时会发生爆炸,而在爆炸时,为了美化游戏的细节,添加了一个造型的转换,即在爆炸后,敌机的造型变为了爆炸的造型。同时切换游戏页面到重新开始页面。

3. 最后就是当战机碰到双弹空投或者炸弹空投时,产生一定的逻辑变换。如果碰到了双弹空投,战机的子弹就会变成双列;而碰到了炸弹空投时,左下方的炸弹空投的数量就会加一。

添加敌机-小

在素材库中添加了该精灵后,还需要进行一定的逻辑处理(截取部分)。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第10张图片

1. 由于在游戏的进行过程中,需要源源不断地产生敌机-小,所以我们需要重复执行克隆的过程,不断克隆敌机-小。

2. 然后在作为克隆体启动时,需要控制敌机-小的出现位置为随机,然后敌机-小的Y坐标值控制为不断减小,即实现从上往下运动的过程。同时当碰到战机的蓝色子弹时,应该发生销毁事件,控制其造型变化为销毁,同时从屏幕中删除该克隆体。

3. 当收到通知游戏结束或者炸弹被使用时,由于需要实现清屏处理,所以需要将该敌机-小的所有克隆体均删除。

添加侦察机

在素材库中添加该精灵后,还需要实现一定的逻辑处理(截取部分)。

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第11张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第12张图片

1. 同理,当场景启动时,需要源源不断地产生侦察机,所以我们也需要不断地对侦察机进行克隆,但是值得注意的是,我们设置侦察机每隔5秒才开始克隆,即每隔5秒才出现侦察机一次,而且一次出现地侦察机数量为5部。

2. 在作为克隆体出现时,需要对克隆体的出现以及运动轨迹进行一定的美化以及变化,同时增加物理特性,当碰撞到左右边界时会产生反弹。同时由于该侦察机会发射金色子弹,所以在克隆体产生时,我们就需要不断地克隆金色子弹,不断地发射出去。

3. 当侦察机与战机的蓝色子弹发生碰撞时,或者当收到通知游戏结束以及使用炸弹时,应该将该侦察机销毁,同时展示销毁侦察机的造型,美化游戏的细节。

4. 应该注意到,我们前面在设计游戏时,对于双弹空投以及炸弹空投出现的设置为当侦察机以及敌机-大被销毁时,会有一定的概率产生这两个空投,所以我们需要设置一定的随机数(即出现的概率)。在这里我们设置了1/8的概率产生双弹空投,以及1/20的概率产生炸弹空投。

添加敌机-大

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第13张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第14张图片

1. 敌机-大作为敌机地大Boss,出现的次数肯定是最小的,出现的间隔时间也是最长的,而在这里我们设置敌机-大每隔20秒才出现一次,所以我们设置的逻辑为每隔20秒才克隆一个敌机-大。

2. 在作为克隆体启动时,我们需要为它添加一些物理性质,即当接触到边界时,会反弹。同时在克隆体出现时,我们还需要为敌机-大不断克隆金色子弹,使其以散弹的形式发射金色子弹。

3. 还有就是需要设置碰撞。当与蓝色子弹发生碰撞时,处理流程与上面的基本一致,首先转换为爆炸的造型,然后再删除该克隆体。应该注意到,这里应该会有双弹空投以及炸弹空投的产生,而出现的概率我们将会设置为侦察机损坏时出现的两倍。当收到游戏结束以及炸弹被使用的通知时,处理逻辑与上面的基本是一致的。

子弹的逻辑设计

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第15张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第16张图片

1. 对于蓝色子弹的逻辑设计。由于可能会出现接收到双弹空投而使得战机发射两列子弹的情况,所以我们需要添加一个区分,当没有接受到双弹空投时,会不断克隆单列的子弹;否则就不断克隆双列的子弹。而在作为克隆体启动时,也需要区分是否为双弹状态,不过所有的子弹的运动方向都应该是从下往上的,即Y坐标不断增加。最后就是在与敌机发生碰撞时会删除该子弹克隆体。

2. 对于金色子弹的逻辑设计,处理逻辑与蓝色子弹基本一致。注意的是,侦察机会向着战机的方向发射子弹,而敌机-大则会发射散弹。所以我们需要为不同的敌机添加不同的子弹运动方向与轨迹。最后就是当发生碰撞或者接受到使用炸弹时,会删除所有的克隆体。

添加空投包

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第17张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第18张图片

1. 由于空投包都只是在侦察机以及敌机-大爆炸时才会有一定的概率出现,所以我们设置在侦察机以及敌机-大爆炸时,当随机数刚好等于预先设置好的值时,就会克隆相对应的空投包。

2. 而在作为克隆体出现时,两种空投包都可以设置一定的物理性质,比如添加重力,模拟空投的场景,比如添加旋转等等。可以自由发挥。然后就是在与战机发生碰撞时,会删除该克隆体,同时向战机发送对应的通知,使得战机的状态发生改变。

炸弹数量以及得分显示

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第19张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第20张图片

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第21张图片

1. 首先就是总得分,我们添加素材为数字。当战机击毁普通的敌机-小时,得分会增加10分;当战机击毁侦察机时,得分会增加50分;当战机击毁Boss敌机-大时,得分会增加100分。

2. 然后是所拥有的核弹,为左下角的一个炸弹的图形。当点击该炸弹时,如果所拥有的炸弹数量不为0,则会触发炸弹被使用的通知,从而实现清屏。

3. 最后是所拥有的核弹数量,主要记录战机接受到了多少个炸弹空投。每当接受到炸弹空投时,该数字就会加1,而当每点击一次核弹图形时,该数字就会减1,直到减为0为止。

添加音效

微信小程序制作工具gamemaker(积木式游戏)入门案例——飞机大战_第22张图片

相信大家在玩游戏的时候,都接受不了没有背景音乐以及相关的音效,总会希望在做出某一些动作或者变化的时候会有音效的产生。

所以我们在设计游戏的时候可以为我们的动作添加音效。比如在开始游戏界面,在点击开始游戏时会有一个“点击”的声音;在开始游戏时会有一个背景音乐;在发射子弹时会有一个发射子弹的声音;在击打中敌机后会有一个击毁的声音;在战机被击中时会有一个“啊哦”的结束游戏的音效。

以上的音效大家都是可以自由选择以及变动的,只要我们自己觉得合适或者说好听就没有问题啦。

游戏的最终效果

可以在这个b站链接中观看游戏的最终效果视频。

结语

以上就是我们使用微信小程序基于积木式游戏制作飞机大战的基本过程。其中的一些细节可以根据自己的需求或者审美来进行自由变化,比如更换背景图,添加或者变换音效,子弹的运动方向以及射击的速率等等。

那么,大家快点动起手来,制作自己的第一个小游戏吧。

你可能感兴趣的:(微信小程序,游戏,小程序)