cocos creator 简单实战

项目地址：https://github.com/Iroha1024/...

一个小游戏的demo，如下简单地介绍了我关于cocos creator的一点理解和开发流程

版本：cocos creator v2.0.9

编辑器：vscode

---

准备篇

一、新建目录
res存放资源，scenes存放场景，scripts存放脚本

二、新建scene

三、双击左键，打开scene

改变了当前场景内容记住及时ctrl+s保存！

---

背景篇

一、在canvas节点下建立空节点background（做为全部背景的父节点），在父节点下建立渲染节点sprite。子节点会随父节点移动

二、点击建立的bg1节点，右侧"属性检查器"出现bg1相关信息。将准备好的图片资源拖至正确位置

三、肯定background锚点（Anchor）

锚点（Anchor）是节点的另外一个重要属性，它决定了节点以自身约束框中的哪个点做为整个节点的位置。

Anchor：https://docs.cocos.com/creato...

锚点位置肯定后，全部子节点就会以 父节点锚点所在位置做为坐标系原点。
由于本游戏设计为从上至下，因此background的锚点值设置为（0.5, 1）

四、设置background Y值为320（canvas Y值的一半），点击bg1节点、拖动蓝色矩形或在属性检查器中改变position值导致背景与紫色矩形（camera节点）吻合（X值为0，即为居中）。游戏初始画面为camera中内容。

五、观察实际效果

如下为实际效果，左侧打开栏目为不一样手机分辨率模式。选择后会发现画面上方出现黑边、一样旋转（rotate）也会有同样情况。
巨坑：由于分辨率发生变化，致使canvas节点大小、位置都会发生变化。所以，一开始全部的对齐都成无用功。

六、点击background，在属性检查器中点击“添加组件”，选择UI的widget组件。点击top（将background与父节点上边界对齐）

widget组件：https://docs.cocos.com/creato...

改变canvas的屏幕适应（以宽度为标准撑满屏幕）。

如今全部分辨率下都不会出现问题

---

脚本篇

一、建立小球节点（步骤同背景篇），更改player节点position坐标、ball节点图片

二、在scripts文件夹下新建javascript，ball.js

三、双击ball.js进入编辑器，编辑小球属性

cc.Class声明：https://docs.cocos.com/creato...

四、在ball节点，属性检查器中“添加组件”，选择用户脚本组件-->ball
将层级管理器中“Main Camera”和“background”节点分别拖至相应位置，便可在ball.js脚本中访问相应节点的实例化对象

五、编辑ball.js方法

生命周期回调：https://docs.cocos.com/creato...

六、使用js和官方提供的API编写自定义函数来实现你想实现的功能

Cocos Creator v2.0 用户手册：https://docs.cocos.com/creato...
API参考：https://docs.cocos.com/creato...

---

追加

如下为我未在上面讲述，可是比较重要的内容，官方教程这些地方很详细

预制资源：https://docs.cocos.com/creato...

碰撞系统：https://docs.cocos.com/creato...

动画系统：https://docs.cocos.com/creato...

动画编辑完点击在“场景编辑器”保存，不编辑点击关闭。一个Animation组件挂载多个clip，编辑时在“动画编辑器”左下角切换

音乐和音效：https://docs.cocos.com/creato...

感谢阅读至此