组件启动顺序_玩溜Cocos Creator入门学习（二）UI系统介绍 UI的组件

引言

作为触控科技旗下的新产品，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，并在微信中运行

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

步骤

1. 菜单CocosCreator->偏好设置->原生开发环境->选择WebchatGame程序路径

1. 菜单项目->配置信息->构建->运行

上述步骤完成以后点击运行会直接跳转到微信开发工具，将CocosCreator的项目创建成微信小程序的项目，至此第一个CocosCreator的程序完成

扩展

如果想将开发的微信小游戏分享出去，在右上角添加按钮出现分享的选项
Cocos Creator生成的WeChat项目，微信开发者工具打开，在main.js中添加

wx.showShareMenu({
withShareTicket: true
})

NextCocos Creator UI组件的使用

我也创建了个学习交流群 点击下面链接即可加入

正在跳转​links.jianshu.com

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