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;
// }
// },









猜你喜欢

转载自blog.csdn.net/weixin_42271658/article/details/80518825