5

游戏开发新手入门教程14:整合到一起,做出小游戏

 2 years ago
source link: https://blog.51cto.com/u_15530520/5108980
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

游戏开发新手入门教程14:整合到一起,做出小游戏

原创

终于到了真正动手做游戏的时刻,在这一节里,我会带你从头开始将我们的“太空保卫者”按照设计方案制作出来。这一节里的内容会非常的多,一遍消化不了,可以多读几遍。别着急,慢慢来。

首先,我们要准备好游戏中需要用到的所有素材。

下方是一张素材的清单:

​精灵:​

​- 太空背景图​

​- 游戏的标题,这里直接用文本​

​- 开始按钮​

​- 战机​

​- 敌机​

​- 敌机爆炸动画​

​- 子弹​

​- 游戏结束​

​- 用于记分的数字​

​- 遮罩层(用于在游戏结束时显示)​

​声音:​

​- 背景音乐​

​- 发射子弹的声音​

​- 敌机爆炸的声音​

​按照清单,我们先将所有的素材都导入到游戏中。

大部分的精灵使用“彩色飞机大战”中提供的素材。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程

使用“积木小Y”中的白色数字以及基础文本。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_02

使用“几何图形”中的正方形作为遮罩层。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_03

使用“飞机大战”中的“子弹射击”和“敌机爆炸1”音效。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_04

最后,背景音效我们选用“经典飞机大战”中的 bgm。游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_05

所有的素材选中后,点击“导入”按钮,将所有的素材导入到游戏中。

导入后,应该是这个样子。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_06

当前我们其实还缺少一个素材,就是“敌机的爆炸动画”,因为爆炸动画是针对敌机的,所以这里将爆炸动画作为一个敌机的造型,添加到敌机的素材中。

在资源管理中选中“敌机”,然后点击“编辑造型”按钮。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_07

选择从素材库添加。游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_08

选择“彩色飞机大战”中的“红色敌机-动画”,然后点击“导入”按钮。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_09

这样敌机就包含两个造型了,一个是正常状态,一个是爆炸时的动画。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_10

到此游戏中需要的所有素材都准备完毕,让我们开始下一步:划分场景

上一节的设计方案中提到,游戏分为两个场景:开始场景和游戏场景,开始场景只负责显示游戏的名字和开始按钮,游戏场景则负责处理游戏中的所有内容。

游戏中默认会包含一个场景,让我们再创建一个场景。

点击场景区中的“新建场景”按钮。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_11

场景区中会增加一个新的场景,默认名字为“场景2”,我们将其重命名为“开始场景”。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_12

接着,我们点击开始场景右上角的三个点,然后选择“设置为主场景”。游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_13

你会发现,在“开始场景”的左上角多了一个小房子的图标,这个图标标识了当前的场景为主场景。所谓的“主场景”是指进入游戏后首先显示的场景,因为进入游戏后我们首先展示“开始场景”,所以,这里将“开始场景”设置为“主场景”。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_14

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_15

我们将“场景1”重新命名为“游戏场景”,这样两个场景就划分好了。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_16

下面,我们先从“开始场景”着手,布置一下界面。

首先,我们将默认的蓝色背景替换成太空背景,然后将“基础文字”和“开始”素材直接拖拽到编辑区中。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_17

布置一下位置,然后调整一下基础文字的属性,这里我们通过调整了字体的大小,粗细和颜色让它看起来更像一个标题。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_18

接着,我们实现一下这个场景中仅有的一个逻辑:点击“开始”按钮,进入到“游戏场景”。

选择“开始_1”,然后在积木区点击“添加事件”按钮,选择“当精灵被点击时”。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_19游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_20

接着,添加“控制”中的“切换场景到游戏场景”积木块。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_21

看起来是这样,当我们点击“开始”按钮后,就会切换到“游戏场景”了。游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_22游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_23

你可以点击预览场景,然后点击“开始”按钮,看一下场景是否能够切换到“游戏场景”。

接下来,我们要制作“游戏场景”了,还是先从布置场景开始。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_24游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_25

如图,层级管理中的红色方框内就是需要的所有素材了。背景,战机,敌机,蓝色子弹都是独立的部分,接下来我们会将正方形,开始,GAMEOVER三个图层组合起来,创建一个游戏结束页面。

依次选中 GAMEOVER,开始,正方形三个图层(Windows系统按住Ctrl键点选,Mac系统按住Command键点选),然后点击这三个图层任意右侧的小按钮,选择“将选中图层组成容器”。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_26

在层级管理中会生成一个“容器-1”,然后刚才的三个图层出现在容器中,请注意,在素材管理区中也会出现一个“容器-1”的素材。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_27

我们可以直接在编辑区中对容器中的各个图层进行大小和位置的调整,调整后的游戏结束界面看上去是这样,将“正方形”设置为黑色半透明的遮罩层,然后在上面显示“GAME OVER”,以及重新开始游戏按钮。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_28

最后,我们把容器重新起个名字叫“游戏结束”,在资源管理器中,右键点击“容器-1”,选择“重命名”,然后设置名字为“游戏结束”。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_29

层级管理中的容器名字会自动更新为“游戏结束”。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_30

游戏结束界面只有在游戏结束的时候才会显示,正常游戏时不应该显示出来,所以,我们要将其隐藏起来,等到游戏结束时,再让它显示。

在层级管理中,右键点击“游戏结束”,然后选择“隐藏”。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_31

你会发现整个“游戏结束”容器变成灰色了,而且在编辑区中也不见了。它被隐藏起来了,我们会在需要的时候再让它显示。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_32

接下来,我们在编辑区中调整一下战机,敌机和子弹的大小,然后将得分放在左上角的位置。这样,游戏场景就布置好了。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_33游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_34

到现在为止,我们已经完成了游戏中的所有的可见的部分,接下来我们就要逐一实现那些不可见的部分---逻辑

在上一节中我们分析了游戏场景中主要的几个部分:战机,敌机,子弹,得分。接下来,我们会一个一个的进行实现。

首先,我们先要配置游戏中需要用到的“变量”和“通知”。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_35

如图,我们新建了两个全局变量,一个用于记录得分,一个用于记录游戏是否结束,0 表示没有结束,1 表示游戏结束。新建了一个“敌机爆炸”的通知,每当敌机发生爆炸时就会发送这个通知,“得分数字”每当接收到这个通知时,就会将得分加一。

接着,我们先从战机开始。战机需要添加下面的逻辑:

​- 当手指点击战机拖拽时要做出响应,战机位置跟随手指移动。​

​- 战机碰撞到敌机时,则游戏结束,显示游戏结束提示。​

选中“战机”,为战机添加如下的积木块。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_36

积木块的逻辑清晰明了,在此就不再做多余的解释了。

接着,子弹需要处理以下的逻辑:

​- 游戏开始后就不停的克隆子弹。​

​- 当子弹被“克隆”出来后,将其位置设置在战机的位置。​

​- 当子弹碰撞到“敌机”时,子弹应该被销毁。​

选中“蓝色子弹”,为其添加如下的积木块。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_37

这里注意最上方的积木块“当自己移出全部边缘”,在这里我们做了删除处理,即当子弹飞出屏幕后,将其删除。因为,在游戏中有些子弹没有击中敌机,会直接向上飞出屏幕,如果我们不将其删除的话,它们会继续留在游戏中,虽然我们看不见。当这些无用的子弹累积的越来越多的时候,游戏可能就会变得卡顿。所以,对于这些飞出屏幕的无用的子弹,我们直接做删除处理。

接着,我们再处理敌机的逻辑。

​- 游戏开始后就要每间隔一定的时间“克隆”敌机。​

​- 当敌机被“克隆”出来后,将位置设置为屏幕顶端的随机位置。​

​- 当子弹碰撞到敌机时,敌机销毁,并发送一个“敌机销毁”事件。​

选中“敌机”为其添加如下的积木块。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_38

这里需要特别注意以下用红框圈出的积木块“设置自己不参与碰撞”,这块积木的作用是让敌机不再参与碰撞,因为在我们的游戏中,敌机只要被一颗子碰撞到,就会发生爆炸,我们只想让敌机的爆炸逻辑执行一次,即子弹打中敌机,敌机发生爆炸,这个过程就应该结束。如果在敌机与子弹发生碰撞后,不立即将敌机的碰撞解除,那么就意味着,如果再有一颗子弹碰撞到敌机,敌机就会再发生一次爆炸,很显然,这不是我们期望的结果。

最后,我们处理得分的逻辑:

​- 查看是否有“敌机销毁”事件,如果有,就将得分加一​

选中“白色数字”,为其添加如下的积木块。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_39

似乎还少了一个背景音乐,我们就将背景音乐的积木逻辑放在背景上,选中层级管理中的“背景”,然后添加如下的积木块。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_40

所有的逻辑部分都处理完了,在预览场景之前,我们再做一点儿调整。游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_41游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_42

如图,我们将“敌机”和“蓝色子弹”的本体移除到界面之外,这样游戏运行之后,就只能看到按照预定的逻辑出现的克隆体了。

点击“预览场景”看一下效果吧!游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_43游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_44

看起来还不错,如果你一步一步的走到了这里,并看到了上方的效果,那么意味着你的第一个小游戏马上就要做出来了。

当前的星空背景是固定不动的,理论上来讲当我们向上移动时,周围的景物是应该向下移动的,下面我们对游戏的背景进行一下简单的设置,让其具备移动的功能。

在图层区中选中“背景”,然后在图层属性区中点击“管理行为”按钮。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_45

在弹出的“管理行为”页面中将“循环滚动”右侧的开关打开。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_46

添加完行为后,你会发现在图层属性区的下方出现了“循环滚动”的条目。游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_47

设置一下循环滚动,因为这是个竖屏的游戏,所以平铺方向选择“竖向”,然后勾选“自动移动”。

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_48游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_49

再次,点击预览场景看一下效果:

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_50游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_51

背景开始向下移动了,有在太空中飞行的感觉了。

试着碰撞一架敌机,看看游戏结束的画面。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_52游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_53

你可能发现了,当你点击“开始”按钮想要再次进行游戏时,没有任何反应。下面我们就来看一下是哪里出了问题,并将它解决。

我们选中层级管理中的“开始”按钮,看一下它的逻辑。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_54

它的逻辑是点击后,切换到“游戏场景”,这是在“开始场景”中我们为它添加的逻辑,目的是从“开始场景”跳转到“游戏场景”,但是这里我们已经身在“游戏场景”中了,所以点击“开始”按钮没有任何效果。

我们对其做一下修改,使用一块“重启当前场景”的积木,这样当点击“开始”按钮后,就会重新启动当前的场景了。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_55

最后不要忘了,在重新开始游戏后,要将“是否结束”的全局变量设置为 0。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_56

再次预览一下场景,碰撞一个敌机,显示游戏结束提示,然后点击“开始”按钮,游戏再次开始了。

现在,将场景切换到“开始场景”,选择“开始_1”按钮,你会发现,它的积木逻辑也变成了我们刚才修改的逻辑。

​小提示:因为我们在“开始场景”和“游戏场景”都用的是同一个“开始”精灵素材,所以使用的逻辑也都是相同的,如果想要使用不同的逻辑就需要再创建新的“开始”精灵素材,然后为其增加新的逻辑。​

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_57

我们要重新为“开始场景”创建一个“开始”按钮素材。在素材管理器中右键点击“开始”精灵,然后选择复制

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_58

这样就增加了一个新的“开始-1”精灵。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_59

我们修改一下其中的逻辑积木,为了便于区分将两个素材进行重命名,一个为“开始-开始场景”,另一个为“开始-游戏场景”。

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_60

游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发新手教程_61游戏开发新手入门教程14:整合到一起,做出小游戏_游戏开发教程_62

这样我们就有了两个“开始”精灵,并且每一个都带有自己的积木逻辑了。

最后,我们移除开始场景中原有的开始按钮,将新的“开始-开始场景”素材拖拽进来。

游戏开发新手入门教程14:整合到一起,做出小游戏_零基础学习做游戏_63

点击“预览场景”,看一下最终的效果:

游戏开发新手入门教程14:整合到一起,做出小游戏_微信小游戏开发教程_64

恭喜,你的第一个小游戏完成了。

总结一下:

我们按照“太空保卫者”的游戏设计方案,将游戏一步一步的做了出来,如果你之前从未有过游戏开发经验,那么这就是你人生中做出的第一个游戏了。

祝贺你!

​如果你最终没有做出预期的效果,那么你可能需要多读几遍,并且按照文中的截图认真比对看看哪里出了问题,如果有看不懂的积木逻辑,那么你可能需要回顾之前所学的与积木有关的内容。


我是会做游戏也会教你做游戏的小蚂蚁,想学习做游戏的话,关注我就对啦!欢迎关注公众号【​小蚂蚁教你做游戏​】,领取全网最全的微信小游戏开发原创教程资料,或者加小蚂蚁vx(xiaomayi6669),交个朋友。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK