Cocos Creator-初次接触

 在Cocos官网下载了Cocos Creator工具,第一次打开开发工具，整体看着挺舒服，各个布局基本上一看就知道是干什么用的。今天主要说一下整个Cocos Creator的大致功能区域。

1. 层级管理器

层级管理器

 层级管理器中包括当前打开场景中的所有节点，可以在这里选择、创建和删除节点，也可以通过拖拽一个节点到另一个上面来建立节点父子关系。
点击来选中节点，被选中的节点会以蓝底色高亮显示。当前选中的节点会在 场景编辑器 中显示蓝色边框，并更新 属性检查器 中的内容。
 可以点击+来新建节点，如果当前选择的有节点，那么新建的就是当前选择节点的子节点，如果没有选中任何节点，则新建的就是和最高层级平级的一个节点，也可以在对应节点上鼠标右键进行新建节点。
 在搜索的时候，可以点击来设置搜索的类型，可以根据搜索类型来搜索所需的节点或者组件等。

• 节点 类型时 可在搜索栏中输入需要查找的节点名称搜索。
• 组件 类型时 搜索栏中会出现 t: 的符号，在后面输入需要查找的组件名称即可（例如 t:cc.Camera）。
• 引用资源 UUID 的节点 搜索栏中会出现 used: 的符号，在后面输入需要查找的 UUID，即可搜索出有使用到该 UUID 的节点。

右键点击节点弹出的菜单里还包括下列操作：

• 拷贝/粘贴：将节点复制到剪贴板上，然后可以粘贴到另外的位置，或打开另一个场景来粘贴刚才拷贝的节点。
• 复制节点：生成和选中节点完全相同的节点副本，生成节点和选中节点在同一层级中。
• 重命名：将节点改名。
• 显示节点 UUID 和路径：在复杂场景中，我们有时候需要获取节点的完整层级路径，以便在脚本运行时访问该节点。点击这个选项，就可以在 控制台 中看到当前选中节点的路径以及节点的 UUID。
• 锁定节点：鼠标移到节点上，左侧会有一个锁定按钮，节点锁定后无法在 场景编辑器 内选中该节点。

2. 属性检查器

属性检查器

 这个版块默认就在窗口的右侧，在 场景编辑器、层级管理器 中选中节点或者在 资源管理器 中选中资源，就会在 属性检查器 中显示它们的属性，可供查询和编辑。
 最顶层左上角的复选框表示节点的激活状态，使用节点处于非激活状态时，节点上所有图像渲染相关的组件都会被关闭，整个节点包括子节点就会被有效的隐藏。
节点激活开关右边显示的是节点的名称，和 层级管理器 中的节点显示名称一致。
 节点属性下面，会列出节点上挂载的所有组件和组件的属性，最下面会列出挂载在节点上的脚本。

3. 控件库

控件库

 控件库 是一个非常简单直接的可视化控件仓库，您可以将这里列出的控件拖拽到 场景编辑器 或 层级管理器 中，快速完成预设控件的创建。使用默认窗口布局时，控件库会默认显示在编辑器中，如果您之前使用的编辑器布局中没有包括控件库，您可以通过主菜单的 面板->控件库 来打开控件库，并拖拽它到编辑器中您希望的任意位置。
 控件库里除了系统给我们封装好的基本的控件外，我们可以添加自定义预制控件，只需要从 资源管理器 中拖拽相应的预制资源（Prefab）到自定义控件分页，即可完成创建。右键点击自定义控件中的元素，可以选择重命名、从控件库中删除该控件以及更换控件图标。之后您就可以像使用内置控件一样，用拖拽的方式在场景中创建您自定义的控件了！

4. 控制台

控制台

 控制台会显示报错、警告或其他 Cocos Creator 编辑器和引擎生成的日志信息，不同重要级别的信息会以不同颜色显示。为了方便调试，可以打印一些log调试信息出来追踪变化。

5. 实战一个简单的动画

5.1 新建一个空白项目

新建空的项目

 项目建好后，是个非常干净的工程，需要根据自己的习惯进行一些文件夹的分类，可以在资源管理器中assets新建Images、Script等文件来放自己的内容。我这里新建了images文件夹来放一些图片资源，script文件夹来放脚本。在网上随便找了一个球的图片，拖进images文件夹，然后从资源管理器中拖到层级管理器的Canvas下，自动生成节点。

5.2 创建脚本并绑定节点

在script文件夹中新建ball.js脚本，层级管理器中选中刚才生成的节点，然后拖动ball.js文件到右侧属性检查器中，就将该脚本绑定在了节点上。

脚本绑定到节点上

5.3 编写脚本

 简单写个可以让球上下移动的脚本

cc.Class({
    extends: cc.Component,
    properties: {
        up:true,
    },
    start () {

    },

    update: function(dt) {
        // console.log('进来了');
        let  moveNode = this.node;
        let yEnd = moveNode.y;
        let hei = cc.view.getVisibleSize().width;
        if (this.up) {
            yEnd -= 1;
            if (yEnd < - hei) {
                console.log('小于0了');
                yEnd += 2;
                this.up = false;
            }
        }
        else
        {
            yEnd += 1;
            if (yEnd > hei) {
                this.up = true;
                yEnd -= 2;
            }
        }
        console.log('当前值：' + yEnd + '\n屏幕高度：' + hei);
        moveNode.y = yEnd;
    },
});

运行查看最终效果:

运行效果

 至此，简单接触到了Cocos开发的开发工具Cocos Creator以及脚本如何让某个节点联动起来的。