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

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

下方是一张素材的清单:

精灵:

- 太空背景图

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

- 开始按钮

- 战机

- 敌机

- 敌机爆炸动画

- 子弹

- 游戏结束

- 用于记分的数字

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

声音:

- 背景音乐

- 发射子弹的声音

- 敌机爆炸的声音

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

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

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

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

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

最后,背景音效我们选用“经典飞机大战”中的bgm。

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

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

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

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

选择从素材库添加。

选择“彩色飞机大战”中的“红色敌机-动画”,然后点击“导入”按钮。

这样敌机就包含两个造型了,一个是正常状态,一个是爆炸时的动画。

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

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

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

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

场景区中会增加一个新的场景,默认名字为“场景2”,我们将其重命名为“开始场景”。

接着,我们点击开始场景右上角的三个点,然后选择“设置为主场景”。

你会发现,在“开始场景”的左上角多了一个小房子的图标,这个图标标识了当前的场景为主场景。所谓的“主场景”是指进入游戏后首先显示的场景,因为进入游戏后我们首先展示“开始场景”,所以,这里将“开始场景”设置为“主场景”。

我们将场景1重新命名为“游戏场景”,这样两个场景就划分好了。

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

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

布置一下位置,然后调整一下基础文字的属性,这里我们通过调整了字体的大小,粗细和颜色让它看起来更像一个标题。

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

选择“开始_1”,然后在积木区点击“添加事件”按钮,选择“当精灵被点击时”。

接着,添加“控制”中的“切换场景到游戏场景”积木块。

看起来是这样,当我们点击“开始”按钮后,就会切换到“游戏场景”了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

首先,我们先要配置游戏中需要用到的“变量”和“通知”。如果你对这两个概念没有印象了,请去回顾 变量 和 通知。

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

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

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

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

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

积木块的逻辑清晰明了,在此就不再做多余的解释了,如果对碰撞有关的积木块感到疑惑,请回顾 游戏积木之碰撞。

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

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

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

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

选中“蓝色子弹”,为其添加如下的积木块。与“重复执行”和“如果”相关的积木块,请回顾 游戏积木之逻辑,与“克隆”相关的积木块,请回顾 游戏积木之克隆。

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

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

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

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

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

选中“敌机”为其添加如下的积木块。与动画有关的积木块,请回顾 游戏积木之动画。

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

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

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

选中“白色数字”,为其添加如下的积木块。与通知有关的积木块,请回顾 游戏积木之通知。

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

所有的逻辑部分都处理完了,在预览场景之前,我们再做一点儿调整。

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

点击“预览场景”看一下效果吧!

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

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

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

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

添加完行为后,你会发现在图层属性区的下方出现了“循环滚动”的条目。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结一下:

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

祝贺你!

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

有任何的疑问,欢迎给我留言。另外,如果你觉得这个系列教程对你来说有价值,欢迎点赞和分享,让它有机会被更多的人看到。

最后,欢迎关注我的微信公众号:小蚂蚁游戏开发。了解更多与游戏开发相关的教程。

微信小游戏开发新手教程14-整合到一起,做出你的小游戏相关推荐

  1. 微信小游戏开发新手教程8-有事儿的话,记得@我

    这一节我们主要学习游戏开发中的一种常用的工具---通知,也称事件. 之前提到过,通知可以理解为给别人发信息,这个过程需要有两方的参与,一个发送方,一个接收方.发送方负责发送通知,而接收方决定收到通知后 ...

  2. 微信公众平台开发新手教程(图文具体解释)

    因为微信的大热.为了更好的方便使用微信的用户查询一些信息.这篇文章是入门级的微信公众平台开发教程,须要的朋友能够參考下 在这篇新手教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络 ...

  3. 微信小程序开发基础教程

    文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...

  4. 微信小程序开发系列教程三:微信小程序的调试方法

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

  5. C#微信公众号开发系列教程二(新手接入指南)

    此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教 ...

  6. UE4课堂笔记——《UE4C++游戏开发入门教程!》第一期开场,C++必须了解小知识

    <UE4C++游戏开发入门教程!>第一期 UE4C++游戏开发入门教程!(第一期) 学习ue4 c++可以更好理解ue4,但需要已经了解或掌握至少以下两点: 已有编程经验 了解蓝图 所以可 ...

  7. 视频教程-微信小程序开发培训教程-微信开发

    微信小程序开发培训教程 本人计算机专业,毕业工作已经10多年,从事过的行业有,安防,通讯,Gps定位,信息统计分析,互联网电商等,从事过的职位. 代码工程师(使用过的语言C#,PHP,Java),Ap ...

  8. 2d unity 多物体 射线_24小时入门Unity游戏开发系列教程

    版权声明: 本系列教程来自Unity Game Development in 24 Hours, Sams Teach Yourself(出版日期:2013年12月6日) 教程内容仅供个人学习参考,版 ...

  9. C#微信公众号开发系列教程三(消息体签名及加解密)

    http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...

最新文章

  1. Apache2.4.x下proxy_module、proxy_fcgi_module结合PHP-FPM解决内存不足问题
  2. 前后端分离的思考与实践(三)
  3. Structure-from-Motion Revisited
  4. 删除vsftp虚拟用户脚本
  5. php执行dmidecode,Python:Dmidecode系统信息
  6. 解决:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...
  7. python中小数_比较python中的小数
  8. python的excell库_Python中使用第三方库xlrd来写入Excel文件示例
  9. jquery 如何获取动态添加的元素
  10. 数组之间的比较应当用Arrays.equals()
  11. 我是如何从大三开始实现财务自由的
  12. 论文篇-----基于机器学习的交通流预测技术的研究与应用
  13. java gzip解压请求_使用 gzip 压缩请求正文
  14. 删库跑路 php,程序员删库跑路事件,php中文网的几点声明!
  15. Finite State Transducer(FST)in NLP
  16. RecyclerView.Adapter notifyDataSetChanged 不起作用
  17. HTTP协议及GET、POST的差异
  18. 六个基础措施可确保企业数据安全
  19. Java基于JSP的小区物业管理系统
  20. 四相开关磁阻电机Maxwell+Simplorer联合仿真性能及其波形

热门文章

  1. python自动化之淘宝自动清空购物车
  2. el-tree处理大量数据
  3. 基于SSM的大学生创业众筹平台网站 毕业设计-附源码212000
  4. fabric1.4 baas平台以及运维管理sdk
  5. JESD204B SUBCLASS1确定性延时参数的计算
  6. wifidog 整体分析
  7. 强化学习RL学习笔记2-概述(2)
  8. Jupyter notebook使用类错误提示 takes no arguments
  9. amigo幸运字符什么意思_史上最全python字符串操作指南
  10. 【阿里云云计算工程师ACP认证】什么是ACP