此内容来源于Cocos官方网站
Cocos是一款游戏开发引擎，提供了一套完整的游戏开发解决方案，包括渲染引擎、物理引擎、UI编辑器、动画编辑器等，支持多种开发语言并且可以发布到不同的平台。
刚开始接触，看着互联网上各种版本的资料，一头雾水，好几个版本究竟该学哪个用哪个，都有啥区别。
随着Cocos的发展，出现了不同的版本，Cocos2d-x,Cocos2d-js,Cocos Creator。
Cocos2d-js是Cocos2d-x的子集，Cocos2d-x支持 C++、Javascript 及 Lua 三种语言来进行游戏开发，并且支持所有常见平台，包括 iOS、Android、Windows、macOS、Linux。
Cocos Creator 3.x底层使用全新3D内核重写，是当前Cocos Creator最新版本，与2.x版本的api不完全兼容，存在很多差异，这也导致查看网络上很多教程的时候使用2.x在3.x中无法调用。
Cocos Creator 2.x底层基于Cocos2d-x的精简版本，已经停止更新。
| 特性 | Cocos2d-x | Cocos Creator |
|---|---|---|
| 编程语言 | C++, Lua, JavaScript | JavaScript, TypeScript |
| 平台支持 | iOS, Android, Windows, macOS, Linux, HTML5 | iOS, Android, Windows, macOS, Linux, HTML5 |
| 渲染引擎 | Cocos2d-x 自带渲染引擎 | Cocos2d-x-lite, Cocos3D |
| UI编辑器 | Cocos Studio (已停止更新) | Cocos Creator 内置 UI 编辑器 |
| 动画编辑器 | Cocos Studio (已停止更新) | Cocos Creator 内置动画编辑器 |
| 状态 | 发布于 2010 年，2019 年停止更新 | 发布于 2021 年初，3.x是当前 Cocos Creator 的最新版本 |
之后的内容是以Cocos Creator 编辑器为2.4x版本为基础。
之前是做iOS开发（基本纯代码）， 在着手Cocos Creator之前，要先转变一个观念： iOS是以代码为驱动。Cocos Creator 是以数据为驱动。 官方解释
简单理解：
Cocos Creator中有很多内容是通过拖拽的方式进行位置、大小，层级、属性关联等设置来完成，类似iOS的storykeyboard。
而iOS在纯代码的情况下大多数都是通过，init、setFrame、addSubmits等步骤完成。
基本概念
场景（Scene）
就是APP的页面，一个页面一个场景，所有的元素都添加在场景中
菜单（Menu Item）
可以简单的理解为 按钮等可以交互的组件
标签（Labels）
就是文字展示内容
精灵（Sprite）
是一个能通过改变自身的属性：角度，位置，缩放，颜色等，变成可控制动画的 2D 图像。
就是可以控制的元素，比如游戏角色（超级玛丽种的玛丽）
游戏中的怪 不算精灵
多边形精灵(Polygon Sprite)
为提高性能而产生的概念。是一种高性能绘制的方案
锚点（anchor point）
控制精灵的位置
动作（Action）
就是控制精灵怎么运动的。
序列（Sequence）
序列就是多个动作按照特定顺序的一个排列。作用是用来控制精灵坐连续动作的，可以理解为动作数组、一系列的动作。
节点（Node）
节点是场景中的基本单位，它代表一个游戏对象，如角色、道具等。节点可以包含其他节点，形成一个树形结构。节点具有位置、缩放、旋转等属性，可以通过改变这些属性来控制游戏对象的表现。
图片、文字、按钮等都是节点（Node）的一种。
节点关系
节点关系，是被附属和附属的关系，就像数据结构中的父子关系。如果两个节点被添加到一个父子关系中，那么父节点的属性变化会被自动应用到子节点中。
如果改变了父节点的属性，那么子节点也会发生变化。比如改变父节点的旋转角度，子节点也会发生变化。
但是改变父节点的锚点。子节点不会发生变化。
图集(Sprite Sheet)
通过专门的工具将多张图片合并成一张大图，并通过 plist 等格式的文件索引的资源，使用图集比使用多个独立图像占用的磁盘空间更少，还会有更好的性能。这种方式已经是游戏行业中提高游戏性能的标准方法之一。
创建图集工具
其中 Texture Packer 有一个专门为 Cocos2d-x 写的图集创建指南。传送门
预制件（Prefab）
预制件是预先设计好的游戏对象模板，可以在场景中快速创建和复制。预制件包含了节点、组件和资源的配置信息，方便在游戏中重复使用。
把写好的内容抽离成组件，下次直接使用这个已经实现的组件，而不是再次cv复制一次该节点。
组件（Component）
组件是附加在节点上的脚本或功能模块，用于定义节点的行为。例如，一个角色节点可以附加一个移动组件来控制角色的移动。组件之间可以相互通信，实现复杂的游戏逻辑。
在cocos中，ts脚本也是一个Component，例如新建一个ts控制器，添加给这个角色后就可以通过这个ts脚本去控制这个角色。
代码
在场景中加入元素
scene -> addChild(图片元素，-2)；
精灵(Sprite)
auto mySprite = Sprite::create("mysprite.png"); // 创建
// 创建并加入缓存
auto mysprite = Sprite::createWithSpriteFrameName("mysprite.png");
// 从缓存中取出并创建
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("Blue_Front1.png");
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);
mySprite->setPosition(Vec2(500, 0)); // 设置位置
mySprite->setScale(2.0); // 设置缩放比例--2.0表示放大2倍
mySprite->setRotation(40); // 设置旋转角度 正：顺时针，负：逆时针（根据锚点的位置转）
mySprite->setAnchorPoint(Vec2(0, 0)); // 设置锚点的位置（默认为左下角（0，0）， 左上角（0，1） 右下角（1，0）， 右上角（1，1））
mySprite->setScaleX(2.0); // 设置X方向的缩放比例
mySprite->setScaleY(2.0); // 设置Y方向的缩放比例
mySprite->setSkewX(20.0f); // 设置X方向的倾斜
mySprite->setSkewY(20.0f); // 设置Y方向的倾斜
mySprite->setColor(Color3B(255, 255, 255)); // 设置颜色
mySprite->setOpacity(30); // 设置透明度（范围0-255）
锚点的位置对比
动作（Action）
// 位移
auto mySprite = Sprite::create("Blue_Front1.png");
auto moveBy = MoveBy::create(2, Vec2(50,10)); // 从当前位置向右50、向上10的位置。动作时间为2s
mySprite->runAction(moveBy); // 开始执行动作
auto moveTo = MoveTo::create(2, Vec2(50,10)); // 从当前位置移动到50、10的位置。动作时间为2s
mySprite->runAction(moveTo); // 开始执行动作
// 缩放
auto scaleBy = ScaleBy::create(2.0f, 3.0f); // 2s缩放到3倍
auto scaleBy = ScaleBy::create(2.0f, 5.0f, 3.0f); // Scale X by 5 and Y by 3x over 2 seconds
auto scaleTo = ScaleTo::create(2.0f, 5.0f, 3.0f);
// 淡入淡出
auto fadeIn = FadeIn::create(1.0f); // 1s内淡入
mySprite->runAction(fadeIn);
auto fadeOut = FadeOut::create(2.0f); // 2s内淡出
mySprite->runAction(fadeOut);
序列（Sequence）
auto mySprite = Node::create();
auto moveTo1 = MoveTo::create(2, Vec2(50,10)); // 2s移动到指定指定位置
auto moveBy1 = MoveBy::create(2, Vec2(100,10)); // 2s移动指定距离
auto moveTo2 = MoveTo::create(2, Vec2(150,10)); // 2s移动到指定指定位置
auto delay = DelayTime::create(1); // 时间间隔1s
mySprite->runAction(Sequence::create(moveTo1, delay, moveBy1, delay.clone(),
moveTo2, nullptr)); //开始按顺序、时间间隔执行这些动作
myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2, nullptr)); // 同时执行多个动作
图集（Sprite Sheet）
// 图集是全局单例
auto spritecache = SpriteFrameCache::getInstance();
// 将plist的索引文件加入图集
spritecache->addSpriteFramesWithFile("sprites.plist");
多边形精灵(Polygon Sprite)
AutoPolygon 是一个工具类，它可以在程序运行时，通过跟踪关键点和三角测量，将一个矩形图像划分成一系列小三角形块。
首先将图像资源传入 AutoPolygon 进行处理，然后我们使用它生成的对象进行精灵的创建就能得到多边形精灵。
auto pinfo = AutoPolygon::generatePolygon("filename.png");
auto sprite = Sprite::create(pinfo);
帧动画
auto mySprite = Sprite::create("mysprite.png");
Vector<SpriteFrame*> animFrames;
animFrames.reserve(12);
// 一系列动画
animFrames.pushBack(SpriteFrame::create("Blue_Front1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Front3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Left3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Back3.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right1.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right2.png", Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create("Blue_Right3.png", Rect(0,0,65,81)));
// create the animation out of the frames
Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.1f);
Animate* animate = Animate::create(animation);
// run it and repeat it forever
mySprite->runAction(RepeatForever::create(animate));
