什么是Cocos Creator？

是Cocos2d-x引擎的 JavaScript 实现
是一个一体化的编辑器，包含设计、开发、调试、发布
支持发布游戏到Web、iOS、Android、小游戏、pc等平台

语言

JavaScript
TypeScript

上手步骤：

安装环境
场景
资源
进阶使用

安装环境

下载cocos creator
下载代码编辑器

creator中可以直接添加代码提示、编译任务等屏幕快照 2019-11-21 下午2.55.57.png

场景

节点、组件
1.一个场景就是由摄像机和节点组成的
2.节点类似于一个view，它的属性也是一些最基本坐标、大小、锚点、颜色等
3.creator特点就是组件化，而承载组件的就是节点
坐标

1. 屏幕快照 2019-11-21 下午3.12.43.png
2.锚点默认是(0.5，0.5)
适配
1.fit height：高度自动撑满屏幕，宽度根据设计分辨率缩放

屏幕快照 2019-11-21 下午3.22.53.png
2.fit width ：宽度自动撑满屏幕，高度根据设计分辨率缩放

屏幕快照 2019-11-21 下午3.23.46.png
1. Widget：对齐挂件，类似于约束
2. 调整大小： WeChata663b846965363a227d4c341433a0b03.png
  
  特殊的一些界面还是需要手动根据屏幕宽度计算大小

资源：

场景布置好了就可以放上资源了
创建Node-添加组件-赋予资源

WeChat064a2dd1aa637edc3e1678080f302e09.png

资源分类

WeChat9e9e303b4ab278e4402a26f4bc94c88b.png

WeChat1e6d643f9c2c51ca63c17c8080f3b286.png

静态引用

屏幕快照 2019-11-21 下午3.42.23.png
屏幕快照 2019-11-27 下午2.09.47.png

动态加载
需要将资源放到resources文件夹下

image

然后通过类似于读取文件的方式读取资源，注意动态加载都是异步的

 cc.loader.loadRes("test assets/prefab", function (err, prefab) {
  var newNode = cc.instantiate(prefab);
  cc.director.getScene().addChild(newNode);
});

脚本资源：

WeChat19da9fc62f5484ff95cff0fb64132d4d.png

进阶使用

热更新
1.原理
- 资源的差异性
  通过文件的md5信息来判断文件有改动需要更新
- 资源的替换
  设置资源搜索路径，全部资源文件都在res、src下
  下载的资源是存在于本地沙盒内

2.流程

WeChat1b657f106f8c192642878becfb5a717a.png

与原生交互
利用JavaScript反射机制，调用 Java 、Objective-C的静态方法
1.java: 类型签名只支持int、float、boolean、String四种
2.iOS: respondsToSelector: 和 performSelector: 是反射机制使用的核心 API，苹果审核有一定风险