自己毕设的Cocos Creator小分析设计

参考部分网络数据
本款游戏软件主要用来消遣娱乐。因此规则上要求简单容易上手。故确定为横版的闯关类游戏。同时优化游戏兼容性使之可以在Android平台上运行，这样就能满足广大群众的需求。

可行性分析

可行性研究的目的是检测是否可以在最短的时间内以最低的成本解决问题。验证本质上是系统分析和设计过程的更高层次的抽象过程。
1.技术可行性：使用Windows10操作系统，对计算机配置没有太高要求，一般学校或者个人电脑安装相应软件就可以满足要求，通过Cocos Creator的一站式编程和Visual Studio Code（下面简称为VS Code）的脚本开发软件，开发一款横版闯关游戏，界面友善功能齐全并实现在安卓手机上完整且准确的运行。
2.经济可行性：如今，安卓系统在移动设备上的占有率已经稳稳坐牢第一的位置，短时间内很难有其他的系统能超越安卓系统。有很多厂商在这方面投入资本，也获得了丰厚的利润。Cocos Creator是市面上一款免费游戏开发编辑器，搭配VS Code脚本编辑器能够实现在现有PC机就能提供系统开发工作需要的所有硬件设备环境，经济方面需求较少，主要是精力的投入并且能获得丰富的开发经验。
3.社会可行性：随着信息时代的到来，各种移动设备已不新鲜，安卓手机基本普遍化，除了用这些设备来处理一些工作上的事情以外还能用来放松，也就是各种娱乐活动，比如：听音乐、聊天、看电影、玩游戏…所以开发一款安卓系统的独立休闲小游戏是最符合当前人民生活需求的。

需求分析

本款游戏为单机游戏，目前只能允许单用户。属于闯关游戏，在进入游戏后，有背景音乐，同时有场景，有陷阱，然后跨越一个个的陷阱，最终到达传送点，可以进入下一关卡。初始页面为主页面，在选择开始后玩家控制人物，通过触屏按钮实现人物的移动的跳跃，使用前只要明白游戏规则、部分按钮的功能然后在游戏过程中避免游戏死亡机制如触碰陷阱死亡直到通关进入下一关即可。
因此应该有如下需求：
1.要求游戏主界面简洁美观，提示恰当，响应事件速度要快。
2.平台上应该有游戏说明帮助初学者游玩以便获得良好的游戏体验。
3.游戏地图中各个物体颜色要分明，陷阱图形要清晰便于玩家判断。
4.为了增强娱乐性，游戏要添加背景音乐功能和各种事件响应音效。
5.为了塑造游戏氛围设置存档点并且即时保存玩家历史数据。

功能小分析

1.显示主菜单和功能
游戏需要提供一个主菜单场景能够让玩家进行游戏场景的选择，同时能够把地图按键等图像信息显示在游戏界面上，方便玩家操作。
2.实现键盘操作功能
无论在浏览器和手机上都能够接收到输入的方向键信息，并且根据左右两个方向键把人物移动到响应的位置，例如，当用户按方向键“左”时，如果向左的未知是可移动的，那么就当把游戏人物向左移动一个数值。
3.把碰撞事件进行显示
当玩家把响应事件时，需要把这个事件进行显示响应。这样就能够明确直观地反映出该人物发生了什么事情。
4.游戏胜负判断功能
在游戏中，当玩家控制人物到传送点时，玩家通过传送切换场景，进行下一场景的闯关，如果玩家无法触碰传送点或触碰陷阱导致死亡时，GameOver，可以选择重新进行当前场景的游戏，并且根据存档点存档位置继续挑战。
5.游戏提供支持背景音乐功能
通过主菜单在游戏开始后，播放背景音乐。并根据玩家操作播放各种游戏音效。
6.游戏提供说明
在游戏菜单中，提供一个游戏说明项，以方便对本游戏不了解的玩家对游戏操作有一个大致了解并能正确操作。

游戏界面模块设计

1.游戏开始菜单界面：启动游戏应用时候进入的第一个界面，有3个按钮分别对应进入的场景：开始游戏、游戏难度选择和游戏说明。
2.游戏主界面：开始游戏的界面。即进入此界面时玩家即可操纵人物进行闯关。
3.游戏难度界面：在此界面进行闯关的难度选择，难度根据存档点设计。
4.游戏说明界面：对游戏操作进行说明，让玩家快速上手并了解游戏内容。
5.游戏死亡界面：触碰陷阱死亡后显示游戏GameOver界面。
6.游戏Boss界面：闯关成功后进入Boss界面，开始挑战Boss，注意避开Boss攻击。
7.游戏通关界面：打败Boss后进入游戏通关界面。

游戏功能模块设计

1.游戏主循环模块：负责游戏中各种动画的播放和帧的循环处理。
2.游戏地图模块：加载在TiledMap上设计的瓦片地图和图层。
3.游戏物理引擎模块：使游戏具有物理属性，也就是模拟物理世界。
4.游戏碰撞模块：在游戏场景里面添加碰撞事件，使人物触碰陷阱时能死亡，选择跳跃和存档时能响应事件另外还添加鼠标事件、键盘事件、事件回调等等。
5.游戏控制模块：人物角色、子弹、跳跃、存档等控制的创建、控制、移动和计时存档。
6.游戏音效模块：能够使游戏拥有各种音效并确保进行游戏时能听到。
7.游戏弹幕模块：Boss战主要攻击方式由各种函数编写。

系统设计实现

根据上面系统的整体设计，我们可以从官方文档里的设计标准介绍目录如下：
animClip：存放动画文件（.anim）。
font：存放字体文件。
prefab：存放不需要动态加载的预制体。
texture：存放用于贴图资源。
texture/ui_common：保存公共UI资源的图集文件。
texture/ui_module：每个功能/模块使用的资源分别打包后的图集文件。例如主场景里面的是单独打包的，然后勾选自动释放资源，这样在切换场景时，会自动释放不必要的场景。（如果未在其他地方引用）
resources：保存动态加载（cc.load.loadRes）所需的所有资源。
有些资源放在resources中，有些资源放在外面。原因是：
（1）resources文件夹中的资源可以与其他外部资源一起引用，因此没什么问题。
（2）只能使用resources文件夹中的资源才可用cc.loader.loadRes动态加载。
（3）在构建时，将resources文件夹中的所有资源与resources文件夹外部的资源连接并导出，并且在构建过程中会自动删除项目中不必要的资源。
（4）resources文件夹中的资源增加了包主体和settings.js的大小，并且还影响了自动JSON合并策略，因此无法最大程度地合并JSON。
设计好了之后我们可以根据以上制作场景和各个节点大致内容，然后制作游戏流程，用来细化一下游戏设计。先说说场景制作。
1.瓦片地图Tiled Map。使用Tiled Map调整可以用计算机全屏显示的地图的整体大小，并将其设置为800X608。如此方便的使用Tiled Map创建地图。图像数据可以直接放入图块中，并且大小可以自由调整。例如：所有地图图块均设置为30X30像素，因此典型的土壤和草大小为30X30。
2.设置图层。
在此界面中，您可以创建多个图层和属性来放置其他图块。例如块和刺是分开的两个图层。不同意义的刺分别的一个图层，例如直接可见的刺、隐藏的刺与可以触发的刺也是不同的图层。地图上直接可见的刺和并非直接可见的需要触发条件的。通过在图层设置中设置一个属性来使新图层覆盖具有相同属性的图层，从而在导入图层时更加方便（可以使用掩码来遮挡）。或者省略部分操作后续直接依靠代码运行显示等操作。

基本设计实现

根据上面的界面和系统设计可以制作出游戏的流程图，具体如下所示：

要点：
UI界面重构：可以把设计稿作为最底层节点，逐步把节点对齐设计稿，这样可以免计算节点位置。
使用VS Code激活脚本编译（快捷键ctrl+p）。
另外少使用active属性，使用其会触发递归遍历场景，开销较大，可以通过设置opacity，scale，或者修改位移达到隐藏和显示的效果。
Label文字组件添加描边：LabelOutline组件
对象浅拷贝与深拷贝：
浅拷贝：

var obj1 = {name:'lily',age:12}
var obj2 = obj1
obj2.age = 13 //obj1,obj2的age都变成13

深拷贝：

var obj1 = {name:'lily',age:12}
var obj2 = obj1
obj2.age = 13 //obj1,obj2的age都变成13
深拷贝：
function copy(obj){
    var newObj = {}
    for(var attr in obj){
        newObj[attr] = obj[attr]  }
    return newObj   }
var obj1 = {name:'lily',age:12}
var obj2 = copy(obj1)
obj2.age = 13

锚点anchor：左下角是（0，0），右上角是（1，1）
当在陷阱游戏中出现各种动画时，譬如：根据陷阱或者自己触发事件，倘若属于陷阱命中，该通过不应该出现。导致动画执行错误，此时，需要添加一些判断条件，是否触碰了，以防止在触碰时参数改变导致存档死亡出错。
新场景将切换时，内存使用量将增加。除了使用cc.loader.release和其API准确关闭未使用的资源外，还可以使用场景自动释放功能在场景的属性管理器中设置自动释放资源选项。
对于打包Android以及其他平台后，修改页面时出现的Cocos Creator官方的loading样式，修改该样式的方法（mac和Windows原理一样）：
1.右键点击Cocos Creator软件选择“打开包内容”
2.去到文件路径：Contents/Resources/static/build-templates/shares/下修改style-mobile.css对应样式
新建资源和删除资源要从Cocos Creator中进行操作，不要在VS Code编辑器中操作，因为在VS Code中操作删除只是删除了一个文件，没有把相应的.meta文件删掉。
碰撞检测：
a.在编辑器中添加Collider，根据物体形状进行选择，使用矩形，圆形还是多边形碰撞。
b.在项目-项目设置-分组管理中添加分组，然后勾选会进行碰撞的组，例如灯和人，然后在编辑器中的Node中的Group中选择相对应的碰撞分组
c.给碰撞对象绑定组件，并在组件中添加碰撞检测代码，并做相应碰撞效果处理：

onCollisionEnter (other, self) {
   console.log('on collision enter')
   },
onCollisionStay (other, self) {
  console.log('on collision stay')
},
onCollisionExit (other, self) {
   console.log('on collision exit')
  }

d.并开启碰撞检测前面已经讲过这边不再过多叙述。
e.如果需要去掉相同预制节点中不需要进行碰撞检测的节点，可以指定节点关闭

node.getComponent(cc.CircleCollider).enabled = false

难点：
二连跳技能：用物理引擎的话，通过设置速度实现，因为有重力的作用，所以它在垂直方向上的速度会慢慢衰减，直到最高点时速度为0。而在跳的过程中再按下跳跃键可以把垂直方向上的速度又设置为初始的速度，这样又会再向上运动一段距离实现二连跳。
弹窗事件穿透：对遮罩层添加默认事件

node.on(cc.Node.EventType.TOUCH_START, () => { })

Cocos Creator中开启背景音乐的时候默认场景间会共享这个音乐，如果需要跨场景关闭音乐，可全局保存一个audioId，用来关闭。以下是需要用到的控件：

根据流程图和游戏制作的进度，人物设计也清晰了起来，故顺便制作一下人物的框架图，具体如下所示：

根据框架大致上可以做出游戏流程，对场景和事件进行修改以达到自己想要的效果。
人物图层。创建图层时，需要添加对象图层以创建矩形，然后在地图上的任意位置绘制所需大小的矩形来代表人物。或直接添加人物模块。
特殊层。由于i wanna游戏的特殊性，通常还会有其他隐藏的刺。这部分首先需要在不同层中实现，这需要它的触发层。检查框中的图层顺序。当前位置是游戏地图中普通图层的位置。也就是说，土壤块将隐藏刺的可见性所隐藏。调整顺序后，便能看到隐藏的刺。地图中部分图层的作用是确定角色当前位置的x坐标是否等于图层之一。在同一情况下，会触发刺的移动事件。
当可见图块弹出或在触发图块移动时，当玩家在地图上触碰图块时，该触发层会响应事件进行移动，例如刺的弹出。
在导入隐藏刺图块的同时设置冒出的移动事件，当角色与刺所在的触发图块接触，刺冒出。碰撞事件响应。
1.人物操作指南
基本操作：
（1）浏览器版本：
← →键——左和右；
Shift——跳（可二段跳，跳跃的高度与按shift的力度有关）；
Z——射击（射击存档点进行存档也可攻击Boss，【存档只存位置不存机关】）；
Q——自杀；
R——重来；
S——skip（跳过片头或动画）；
F2——重置；
（2）安卓手机版本：
← →键——左和右；
B键——跳（可二段跳，跳跃的高度与按shift的力度有关）；
A键——射击（射击存档点存档，存档只存位置不存机关，机关将会重新等待触发）；
✖——自杀；
☇——重新开始。

1.建立物理世界。实现物理引擎。
2.重力的添加以及改变。添加在创建物理世界时写入。
3.添加不同的刚体。普通的刚体，是矩形的。由于刺是三角形，因此必须将其更改为三角形的三个顶点，并将其附加到作为刚体的三角形对象上。
4.3种掩码。类别掩码setCategoryBitMask、触敏掩码setContactTestBitmask、碰撞掩码setCollisionBitmask。执行两个对象的类别掩码和接触检测掩码的逻辑和操作，以确定是否触发了每个接触事件，以及它是否会穿透或者碰撞。
5.重新启动。丢弃当前场景，重新生成一个新场景，然后替换它。
6.键盘事件。角色可以执行一些操作，例如左前，右前，跳跃和射子弹。对于此功能用不同的函数以执行对应的触摸事件和键盘事件。
7.添加标签。请设置其他标签，以使函数在导入图层时易于判断。向界面添加游戏结束图像，以使角色与刺碰撞并触发游戏结束，可以按R重新启动。在最后切换场景时，有一个隐藏的触发层响应传送事件，从而可以在场景之间进行切换。
8.计时器函数。进行场景中物理引擎的手动更新。
9.碰撞检测。利用三种掩码进行判断。人物与土块。进行判断后为不可穿透。