初识cocos creator，做一款H5小游戏-CSDN博客

本文介绍了Cocos Creator游戏开发工具的前世今生，详细讲解了基本开发环境，包括Cocos Creator的游戏开发流程、项目目录结构以及构建发布。通过小游戏场景制作和基础语法，展示了组件式开发的核心，如精灵组件、标签组件和脚本组件的使用。通过sunlands-cow demo的制作过程，涵盖了游戏场景搭建、牛的动画、套牛判定、结算逻辑等，最后探讨了构建H5和微信小游戏的流程。适合初学者了解Cocos Creator并动手实践。

摘要由CSDN通过智能技术生成

分享内容预览

小游戏体验。
cocos creator 前世今生。
基本开发环境的了解。
小游戏场景制作相关知识。
基础语法讲析。
sunlands-cow demo的讲解。
构建，发布。（h5, 微信小游戏）

小游戏体验:

web 星星：https://hytstart.github.io/star/
h5 小牛：https://hytstart.github.io/cow/

一、cocos creator 前世今生

Q：cocos creator 是什么，能干什么？
A：cocos creator是用来做游戏的，可以打包构建到web，h5，ios，android，微信小游戏等各端平台运行。

cocos creator是一套完整的游戏开发解决方案，包括了 cocos2d-x 引擎的 JavaScript 实现，在Cocos2d-x 基础上实现了脚本化，组件化和数据驱动等特点。
前世：简要介绍一下游戏引擎，Cocos2d-x。有助于了解cocos creator。

游戏引擎：指一些已编写好的可编辑电脑游戏的系统，或者一些交互式实时图像应用程序的核心组件，目的在于让游戏设计者能容易和快速地做出游戏，而不用由零开始。简单地说，我们作为开发者，可以直接使用已经封装好的各种系统（渲染引擎，物理引擎、碰撞检测系统等）方便开发。
Cocos2d-x：开源游戏引擎。可以使用 C++、Javascript 及 Lua 三种语言来进行游戏开发。

今生：Cocos creator的应用范围主要包括，游戏，少儿教育等。比如大家熟知的，欢乐坦克大战，欢乐麻将。

二、基本开发环境的了解【演示】

开发前的准备：组件与实体
Cocos Creator 的工作流程是以组件式开发为核心的，组件式架构也称作组件-实体系统（或 Entity-Component System），简单的说，就是以组合而不是继承的方式进行实体的构建。
参考：理解组件-实体-系统（ECS \CES）游戏编程模型

下面新建一个cocos creator项目工程，带着大家浏览一下creator场景编辑器相关，生成的项目目录文件，最终打包编译的文件。

1. Cocos Creator 游戏开发工具。

新建一个hello world项目。重点了解资源，场景（scene）, 场景中的节点（也就是实体），节点的相关属性，组件库（组件可以挂载到节点上）。

修改string label（数据驱动），或者脚本里的数据后预览。可以选择模拟器，也可以选择浏览器预览。最后都挂载到了canvas节点上。

这里的数据驱动，是creator的变革。所有场景都会被序列化为纯数据，在运行时使用这些纯数据来重新构建场景，界面，动画甚至组件等元素。
也就是说，在编辑器中的修改，会保存为json数据，保留在版本控制中，并在运行时起作用。

2. 了解生成的项目目录文件

新建的hello world项目目录

assets（资源文件夹）
1. 用来存放游戏中所有本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在资源管理器中。
2. assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件，.meta 文件相当于引擎识别图片的身份证，以及编辑器中设置的相关配置。
3. 版本控制。 √
library（资源库）
1. 这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。也就是预览中用到的资源。
2. 不需要进入版本控制，每次打开这个项目都会生成。 ×
settings（项目设置）
1. 项目相关的设置，如构建发布菜单里的包名、场景和平台选择等。
2. 加入版本控制。 √
project.json
1. cocos cretor识别项目的合法性标志，用来规定当前使用的引擎类型和插件存储位置。有了project.json和assets才能打开项目。
2. 版本控制。 √
bulid（构建目录）
1. 打包编译完的目录。
2. 版本控制。 ×

3. 编译后的文件

index.html，main.js 初始化相关，包括生成canvas根节点相关等。
res，记录文件的结构，和资源。
src，project.js（代码相关），setting.js（项目相关设置）

三、小游戏场景制作相关知识。【对上一节的具体阐述】

在 Cocos Creator 中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：

场景图像和文字（Sprite，Label）
角色
以组件形式附加在场景节点上的游戏逻辑脚本

当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础。

1. 以组件形式，附加在场景节点上。

如上面描述内容，Cocos Creator 的组件式结构，工作流程是以组件式开发为核心的。
节点（Node）是承载组件的实体，通过将具有各种功能的组件（Component）挂载到节点上，来让节点具有各式各样的表现和功能（注：一个节点上可以挂载多个组件，但是，一个节点上只能添加一个渲染组件，渲染组件包括 Sprite， Label，Particle等）。

举个例子，下图中，是在我们的hello world的工程中的节点（实体），node属性（Node 标题开始的部分就是节点的属性），组件及组件属性。

node属性包括了节点的位置、旋转、缩放、尺寸等变换信息和锚点、颜色、不透明度等其他信息。
组件属性，可以用来渲染图片，渲染文字，执行js脚本等，也就是经常用的的渲染组件，脚本组件。

节点、node属性、组件的关系也就是：节点的显示，是根据node属性调整（放大，缩小等）以及组件渲染共同决定的。

接下来具体介绍node属性以及组件相关。

2. 节点（node）属性

重点介绍rotation，anchor, position。

rotation，逆时针旋转。
anchor，锚点。决定了节点以自身约束框中的哪一个点作为整个节点的位置。我们选中节点后看到变换工具出现的位置就是节点的锚点位置。creator都是默认锚点是（0.5， 0.5）。
position，节点的位置，相对于父节点而言的。先来看一下creator中的坐标系。

坐标系：

世界坐标系（绝对坐标系）： Cocos Creator 游戏开发中表示场景空间内的统一坐标体系。
本地坐标系（相对坐标系）：是和节点相关联的坐标系。每个节点都有独立的坐标系。也就是说，我们在项目开发设置中，父子关系的层级结构，修改节点的位置（Position）属性，此时设定的节点位置是该节点相对于父节点的本地坐标系，而非世界坐标系。最后在绘制整个场景时，Cocos Creator 会把这些节点的本地坐标映射成世界坐标系坐标。

举个例子：所有子节点