什么是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
  3. Widget：对齐挂件，类似于约束
  4. 调整大小： 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，苹果审核有一定风险

感受

• 易上手
• 支持的sdk较少
• 插件少
• 版本更新快、版本兼容性差