cocos-creator 学习笔记 1 编辑器了解

系统是 mac osx

1.前期准备

官方给出的入门网址

http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html

1）安装 cocos-creator

2) 下载 vscode 并设置为 默认编辑器（其它也可以）

3) 点击 开发者 》vs code 工作流 》安装安装 vs code 拓展插件 完成 api 安装

4) *下载谷歌浏览器 

2.编辑器

1）层级管理器

canvas 下包含 节点（node）节点是场景的基础组成成分。节点之间可存在上下关系。

定义一个 z 值：表示图片显示的高度（覆盖）

下方节点 z 值高

2）属性检查器

橙色的勾表示 节点 是否处于 active 状态

上方是节点的默认参数。 

position: 节点位于画布的位置

rotation：旋转角

scale: 缩放比例

skew: 透视（就是会变斜，具体可以自行操作）

比较重要的参数

anchor: 默认 0.5 0.5 位于中心

group: 分组。可以通过组别来设置碰撞事件。

正下方可以添加组件。

组件一般为 javascript 脚本，有默认组件和自定义两种。可以直接添加或在资源管理器中创建后添加。

3）资源管理器

添加资源的地方。位于 assets 文件下。

组件的基础创建模式：

1.在资源管理器下创建 javascript 脚本并打开

2.默认如下

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    // update (dt) {},
});

cc.Class 是对 Cocos Creator 中的类的声明 http://docs.cocos.com/creator/manual/zh/scripting/class.html

extends 继承了 component 类证明这个脚本文件是一个组件

properties 下就是脚本的属性。也就是上方书行管理器中右边的值。

下方的 start() 是脚本的其中一个生命周期函数 具体有：

onLoad 被初始化

start 组件第一次激活前，也就是第一次执行 update 之前触发

onEnable active 属性从 false 变成 true

onDisable 和上面相反

onDestroy 调用了 destroy() 

update 每一帧更新物体时

lateUpdate 所有 update 都执行完之后调用

可以查看官方文档 更加详细 http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html

property 中可以放置普通的变量以及定义的特殊变量

例如：

num:0 // or num: cc.Integer

string:" " // or sring: cc.String

数组变量要指定类型

array:[cc.Integer]

mySprite: cc.sprite

myNode: cc.node

myCollider: cc.boxCollider

私有变量 和 公有 getter and setter 配套

就是这段

bar: {

// get () {

// return this._bar;

// },

// set (value) {

// this._bar = value;

// }

// },

定义了之后，通过添加组件可以在右侧的属性检查中看到。