六、cocos creator笔记

1、在IDE中创建脚本比较方便。由于大部分时间我们都是在编辑组件脚本,所以这里就围绕组件脚本来展开。

2、cocos creator中组件的使用方式一般是

(1)在预制件资源或场景资源中创建好节点node,然后把组件挂到node上,这是最常见的一种。

(2)在脚本编辑过程中,实例化组件,并挂到已知节点上。这种方式不常用,但有时候也是有必要的,比如‘女生快跑’中的人物和道具,需要动态的添加或删除,就没办法直接在场景资源中事先挂好了。另外,组件实例化过程中有一些细节,在(1)中已经让引擎处理了,但在这里需要我们自己处理。

(3)瞬间动态添加多个节点,容易造成性能问题,比如“植物大战海盗”中的listview,目前还没找到最佳优化方案。

3、类型声明,实例化

var Sprite = cc.Class({

    name: "sprite",

    ctor: function (typeStr) {//构造函数,

this.type = typeStr;

        cc.log(this instanceof Sprite);    // true

    }

    print: function () { //实例方法

cc.log(this instanceof Sprite);

    }

});

var obj = new Sprite('typeStr');//实例化

注意:实例化需要传入参数时,就可以编辑构造函数,比如‘植物大战海盗’中的UIBuildingInfo、UIBuildingLvup和UITraining。但使用构造函数容易漏写new,不优雅,通常我们会专门写一个showWith方法或creatorwith方法来避免这种麻烦。

4、继承

var subSprite = cc.Class({

    extends: Sprite,

    ctor: function () {

        cc.log("subSprite");  //不需要显式调用父类构造方法,cc.class内部已经自动实现了

    }

});

var subSprite = new subSprite();//依次输出true和subSprite

当然,继承不是必须的,有时候我们就是可以设计一个工具类,不需要继承任何类,比如‘植物大战海盗’中的TimeFormat类。

5、声明属性:对于组件(其它的不行),我们有特殊的声明属性的方式,通过这种方式声明的属性,可以在IDE中看到对应的属性,就可以进行可视化编辑了。

cc.Class({

    extends: cc.Component,

    properties: {

        userID: 20,

        userName: "Foobar",

pos: cc.Vec2,

color: new cc.Color(255, 255, 255, 128),

strings: [cc.String],

score: {

        default: 0,

        displayName: "Score (player)",

        tooltip: "The score of player",

},

width: {

        get: function () {

            return this._width;

        },

        set: function (value) {

            this._width = value;

        }

}

    }

});

(1)当属性为基本的js类型时,可直接赋值默认值。

(2)若为引擎特有类型,则填写他们的构造函数

(3)当声明属性是一个数组时,可以在声明处填写他们的类型或构造函数来完成声明,

(4)自定义属性,需要完整的声明,如上面的score属性

(5)get/set方法也是很有用的

6、进行完整的属性声明时,有很多参数可以配置,最常用的有:

(1)default: 设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到

(2)type: 限定属性的数据类型,详见 CCClass 进阶参考:type 参数

(3)visible: 设为 false 则不在 属性检查器 面板中显示该属性

(4)serializable: 设为 false 则不序列化(保存)该属性

(5)displayName: 在 属性检查器 面板中显示成指定名字

(6)tooltip: 在 属性检查器 面板中添加属性的 Tooltip

(7)完整的,参考:http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html

7、访问节点和组件:基础的就不说了,说几个用的少但很有用的

(1)访问组件所在节点的其它组件,我一般用this.node.getComponent(),其实组件自身也有这个功能,可以直接this.getComponent()。

(2)查找子节点一般用this.node.getChildByName(),如果子节点的层次较深,你还可以使用 cc.find("Cannon 01/Barrel/SFX", this.node)。注意,当 cc.find 只传入第一个参数时,将从场景根节点开始逐级查找,如:cc.find("Canvas/Menu/Back");

8、访问已有变量的值,有两种形式:通过全局变量window,通过require模块来获取中的变量。当然,通过全局变量来访问会方便很多,‘植物大战僵尸’里就有不少例子。

9、关于模块的编辑:最重要的一点就是,要使用module.exports导出变量

10、声明周期:http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html

(1)主要包括ctor、onLoad、start、update等

(2)参考我在UITraining、ViewCommon中的做法,我人为的添加了几个生命周期阶段,用于处理进出场动画问题。

11、节点的创建和销毁:

(1)脚本中动态创建脚本:‘女神快跑’中的actor就是用的这种方式

createTestNode: function () {

    var node = new cc.Node('SpriteNode');

    var sp = node.addComponent(cc.Sprite);

    sp.spriteFrame = this.sprite;

    node.parent = this.node;

  },

(2)克隆已有节点:‘女神快跑’中的actor使用这种方式也许还会简单些

properties: {

    target: {

      default: null,

      type: cc.Node,

    },

  },

start: function () {

    var scene = cc.director.getScene();

    var node = cc.instantiate(this.target);

    node.parent = scene;

    node.setPosition(0, 0);

  },

(3)通过预制件创建节点:最常用,不多说

(4)如果一个节点不再使用了,请直接调用它的 destroy 而不是 removeFromParent

12、资源获取和加载

(1)Assert资源:Creator 提供了名为 "Asset" 的资源类型,cc.SpriteFrame, cc.AnimationClip, cc.Prefab 等资源都属于 Asset。Asset 的加载是统一并且自动化的,相互依赖的 Asset 能够被自动预加载。

(2)Cocos2d 的一些旧 API 并没有使用上面提到的 Asset 对象,而是直接用 URL 字符串指代资源。为了兼容这些 API,我们把这类资源叫做 "Raw Asset"。图片(cc.Texture2D),声音(cc.AudioClip),粒子(cc.ParticleAsset)等资源都是 Raw Asset。Raw Asset 在脚本里由一个 url 字符串来表示,当你要在引擎中使用 Raw Asset,只要把 url 传给引擎的 API,引擎内部会自动加载这个 url 对应的资源。

cc.Class({

    extends: cc.Component,

    properties: {

        textureURL: {

            default: "",

            url: cc.Texture2D //注意,这里用的url,不是type

        }

    }

});

(3)不论是 Asset 还是 Raw Asset,只要在脚本中定义好类型,就能直接在 属性检查器 很方便地设置资源

(4)通过脚本动态加载:要注意两点,一是所有需要通过脚本动态加载的资源,都必须放置在 resources 文件夹或它的子文件夹下。resources 需要在 assets 文件夹中手工创建,并且必须位于 assets 的根目录。第二个要注意的是 Creator 相比之前的 Cocos2d-html5,资源动态加载的时都是异步的,需要在回调函数中获得载入的资源。另外,动态加载两种资源的方式有所不同,参考:http://docs.cocos.com/creator/manual/zh/scripting/load-assets.html

13、资源的释放:

(1)在加载完资源之后,所有的资源都会临时被缓存到 cc.loader 中,以避免重复加载资源时发送无意义的 http 请求,当然,缓存的内容都会占用内存,有些资源可能用户不再需要了,想要释放它们。

(2)由于js无法跟踪对象引用,我们只能根据游戏逻辑来选择资源释放的时机。

14、事件监听和发射:

(1)普通监听:this.node.on('mousedown', function ( event ){})

(2)监听到一次就关闭监听:this.node.once('mousedown', function ( event ){})

(3)关闭监听:this.node.off('say-hello', this.sayHello, this)

(4)发射事件:this.node.emit('say-hello', { msg: 'Hello, this is Cocos Creator'});

(5)派送事件:dispatchEvent 方法,通过该方法发射的事件,会进入事件派送阶段。在 Cocos Creator 的事件派送系统中,我们采用冒泡派送的方式。冒泡派送会将事件从事件发起节点,不断地向上传递给他的父级节点,直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()。

派送:this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

中断处理:this.node.on('foobar', function (event) {event.stopPropagation();});

(6)系统内置事件:http://docs.cocos.com/creator/manual/zh/scripting/internal-events.html

(7)玩家输入事件:http://docs.cocos.com/creator/manual/zh/scripting/player-controls.html

15、动作:http://docs.cocos.com/creator/manual/zh/scripting/actions.html

需要注意的是,动作系统并不能取代动画系统,动作系统提供的是面向程序员的 API 接口,而动画系统则是提供在编辑器中来设计的。同时,他们服务于不同的使用场景,动作系统比较适合来制作简单的形变和位移动画,而动画系统则强大许多,美术可以用编辑器制作支持各种属性,包含运动轨迹和缓动的复杂动画。

16、计时器:之前都用setTimeout 和 setInterval,其实cc.Scheduler更加强大好用

17、对象池:http://docs.cocos.com/creator/manual/zh/scripting/pooling.html,聊天界面的cell复用,其实就是用了对象池的思想,现在可以着手换成好用的对象池了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,932评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,554评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 145,894评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,442评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,347评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,899评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,325评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,980评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,196评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,163评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,085评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,826评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,389评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,501评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,753评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,171评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,616评论 2 339

推荐阅读更多精彩内容

  • 1.除了方法, 其他东西都要扔到properties里面了, 并且要给出属性的默认值或者属性的存取的方法 1) 首...
    视掘阅读 1,320评论 0 0
  • (一)节点和组件 标签(空格分隔): 内容创作工作流程 Cocos Creator 的工作流程是以组件式开发为核心...
    菜鸟_一枚阅读 931评论 0 2
  • 接触Cocos-JS开发10多天以来,渐渐熟悉了Cocos的一些东西,当然也遇到了一些埂,官方的文档还是挺详细的,...
    不做需要减肥的人阅读 1,082评论 0 3
  • 这里的百合指的是女同性恋。 同性恋(homosexual,现在普遍称gay、玻璃、BL(对男同性恋的简称)lesb...
    小蛮历险记阅读 372评论 0 1
  • 文字/大大虹 图片/网络 1 “老公,你在干嘛?” “我在想你啊。” “媳妇儿,你想吃什么,我明天下班买过去给你。...
    我是吴呱呱阅读 293评论 0 0