引言

作为触控科技旗下的新产品，Cocos Creator有鲜明的特色

面向JavaScript指令码化开发元件化和资料驱动的全新工作流元件化和资料驱动的优势

分离资料与功能给予美术策划直接生产和管理的能力解放程式猿生产力，专注于更有技术含量的功能开发官方视讯的话：功能开发和内容的关系从未如此和谐有待验证！

Cocos Creator的基本结构

资源管理器

资源管理里面包含了，工程的所有资源列表，看起来像是ide中的档案，其实这个是一个数据库，汇入的资源最后会自动分配一个uuid，以后不管怎么移动、改名，都不会影响场景和指令码中的呼叫

包括专案中所有资源和指令码档案，为了每个资源分配UUID，解决改名和移动时的索引问题场景档案

在Cocos2d中最重要的档案就是场景档案，场景是独立的档案资源，可以跟开启psd档案一样，双击就能开启。资料驱动的开发流程，最主要的区别在于游戏启动是通过读取场景中的资源和指令码而不是通过一段入口的程式

场景档案是资料驱动工作流的核心场景中包括影象资源、动画、特效以及驱动游戏逻辑和表现的指令码双击开启场景编辑器和层级管理器都会出现相应的内容，对于美术人员场景就是PS中的画布，层级管理器就好比是图层列表

场景编辑器

场景编辑器里面我们可以所建即所得的方式去编辑场景中影象元素的一些属性包括位置、旋转、大小这样场景美术人员，就可以在这个界面搭建场景和预览特效，

层级管理器

可以进行影象元素渲染顺序的调整和层级调整

我们可以将任何的元素拖拽到一个节点下面，建立父子关系、父子关系可以调整层级结构之外，父节点的属性变化还会影响子节点，比如说位置、旋转、大小这些，通过层级管理器可以很直观的检视和调整所有节点的层级关系而且在场景元素很多的时候，在这里可以精确的选中需要的元素，排除干扰层级管理器使用拖拽操作变更节点层级关系，调整节点渲染顺序

属性检查器

通过工具编辑调整节点的位置和旋转时，实际上是修改节点的属性，当前选中节点的属性都会列出在属性检查器里属性检查器和场景编辑器里的影象预览和操作是完全同步的在属性检查器中输入准确的数值，来定位节点元件化开发

对比Cocos2dx

是以继承的形式来扩充套件功能，使用者想要给节点新增功能就必须新建一个类来继承node节点类，需要多少个不同的节点就要写多少个类

基于继承的功能开发结构复杂，扩充套件成本高

元件式开发

在CocosCreator里写好的指令码是以元件的形式新增到节点上面的，可以在资源管理器中检视相应的指令码档案

将功能分解为独立的单元，通过组合创造无限可能，避免重复程式码

下面拿到官方事例，Hello World 开启HelloWorld.js来检视这个指令码做了什么事情

cc.Class({

extends: cc.Component,

properties: {

label: {

default: null,

type: cc.Label

}, // 定义了一个文字型别的引用，这个引用可以获取到场景中一个文字节点的一个例项

// defaults, set visually when attaching this script to the Canvas

text: Hello, World! // 定义了一个字串型别作为HellWorld的这个程式的问候语，

},

// use this for initialization

onLoad: function () {

this.label.string = this.text;

}, // 然后在载入这个场景的时候，会自动执行onLoad这个方法里面，我们文字元素来设定

// called every frame

update: function (dt) {

},

});

属性是字串或数字等非引用型别时，可以忽略型别宣告onload会在场景载入后自动执行，一般每个元件的初始化程式放到这里面新建立的官方事例，选中你的场景档案，如果有修改需要储存你的场景，选择选单专案->执行预览，或者Command+P 得到执行结果

打包释出一个WechatGame（微信小游戏）

因为目前并没有去开发一款游戏，而是为了学习怎么去使用CocosCreator，本次只是将官方事例HelloWorld构建释出到WeChatGame，并在微信中执行

配置你的原生开发环境，我需要编译出来微信小游戏，构建版本的时候需要新增微信开发者工具没有的小伙伴可以去下载安装一个

步骤

选单CocosCreator->偏好设定->原生开发环境->选择WebchatGame程式路径

选单专案->配置资讯->构建->执行

上述步骤完成以后点选执行会直接跳转到微信开发工具，将CocosCreator的专案建立成微信小程式的专案，至此第一个CocosCreator的程式完成

扩充套件

Cocos Creator生成的WeChat专案，微信开发者工具开启，在main.js中新增

wx.showShareMenu({

withShareTicket: true

})

Next

Cocos Creator UI元件的使用

作者：struggle3g

来源：简书

宣告：释出此文是出于传递更多知识以供交流学习之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与我们联络，我们将及时更正、删除，谢谢