【cocos creator 系列教程之二】脚本开发篇&常用示例整合

                        【Cocos Creator 】(千人群):  432818031

上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍。

所以希望童鞋们可以把我这两篇博文当成对组件、脚本两部分开发的整理与总结。

后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程。避免无用功。

下面直接放出代码,因为不是很难理解。所以不再一一赘述,都是常用的函数、事件监听、动作回调、定时器等开发过程中必接触的。

大致内容如下:

cc 属性介绍
获取组件的几种形式
全局变量的访问
模块之间的访问
在当前节点下添加一个组件
复制节点/或者复制 prefab
销毁节点(销毁节点并不会立刻发生,而是在当前 帧逻辑更新结束后,统一执行)
事件监听 on 4种形式(包括坐标获取)
关闭监听
发射事件(事件手动触发)
动作示例,类似c2dx api 基本无变化
计时器 (component)schedule (cc.Node 不包含计时器相关 API)
url raw资源获取

CC版本:0.7.1

源码下载地址: http://vdisk.weibo.com/s/yZxRoLm4Mnio3

主要两个js源码:

HelloWorld.js


cc.Class({
    extends: cc.Component,
 
    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        text: 'Hello, World!',
        
        t_prefab:{
            default:null,
            type:cc.Prefab
        },
        
        t_sprite:{//定义一个cc的类型,并定义上常用属性
            default:null,
            type:cc.SpriteFrame,//类型的定义
            // url:cc.Texture2D, //Raw Asset(cc.Texture2D, cc.Font, cc.AudioClip) 
            visible:true,//属性检查器中是否可见
            displayName:'himi',//属性检查器中属性的名字
            tooltip:"测试脚本",//属性检查器中停留此属性名称显示的提示文字
            readonly:false,//属性检查器中显示(readonly)且不可修改当前有bug,设定只读也能修改]
            serializable:true,//设置false就是临时变量
            editorOnly:false//导出项目前剔除此属性
        },
        
        t_url:{
            default:null,
            url:cc.Texture2D
        },
        
        t_count_2:200,//基础类型
        
        //可以只定义 get 方法,这样相当于一份 readonly 的属性。当前有bug,只设定get也能修改]
        t_getSet:{
            default:12, 
            get:function(){return this.t_getSet},//get
            set:function(value){this.t_getSet =value;}//set
        },
            
        
        t_array:{//定义一个数组
            default:],
            type:
        }
    },
 
    // use this for initialization
    onLoad: function () {
        
        //--->>> 获取组件的几种形式:
        //1. 通过属性检查器被赋值的label组件,直接拿到得到实例
        //2. 通过属性检查器被赋值的label组件所在的node节点,然后通过getComponent获取
        // this.label.string = this.text;
        
        //3. 获取当前this(node)节点上的label组件
        // var _label = this.getComponent(cc.Label);
        
        //4. 先获取目标组件所在的节点,然后通过getComponent获取目标组件
        var _label = cc.find("Canvas/label").getComponent(cc.Label);
        
        //5.也可以如下形式【注意此种方式,目前有BUG,无法正常使用 (0.7.1) 】
        // var _label = cc.find("Canvas/label<cc.Label>");
        
        console.log(_label.string);
        console.log(this.t_getSet);
        
        //--->>>全局变量的访问
        /* 任意脚本中定义如下:【注意不要有var哦】
        
            t_global = {
                tw:100,
                th:200
            };
        
        */
        t_global.th = 2000;
        console.log(t_global.th);
        
        //--->>>模块之间的访问
        /*任意脚本中定义如下 【注意关键字是module.exports】
        
            module.exports= {
                tme_pa1:"100",
                tme_pa2:333221
            };
            
        */
        //--->>>用 require + 文件名(不含路径) 来获取到其他 模块 的对象
        var tModuleData = require("testJs");
        tModuleData.tme_pa2 = 991;
        console.log(tModuleData.tme_pa2); 
        
        
        //--->>>在当前节点下添加一个组件
        var mySprite = new cc.Node().addComponent(cc.Sprite); 
        mySprite.spriteFrame = this.t_sprite;
        mySprite.node.parent = this.node;
        mySprite.node.setPosition(300,200);
        
        
        //--->>>复制节点/或者复制 prefab
        //复制节点
        var lLabel = cc.instantiate(this.label);
        lLabel.node.parent = this.node;
        lLabel.node.setPosition(-200,0);
        //复制prefab
        var tPrefab = cc.instantiate(this.t_prefab);
        tPrefab.parent = this.node;
        tPrefab.setPosition(-210,100);
        
        
        //--->>>  销毁节点(销毁节点并不会立刻发生,而是在当前 帧逻辑更新结束后,统一执行)
        if (cc.isValid(this.label.node) ) {
            console.log("有效存在,进行摧毁");
            this.label.destroy();
        }else{
            console.log("已摧毁");
        }
        
        //--->>> 事件监听 on 4种形式
        //枚举类型注册
        var tFun =function (event){
          console.log("touchend event:"+event.touch.getLocation().x +"|"+event.touch.getLocation().y); 
        };
        this.node.on(cc.Node.EventType.TOUCH_END,tFun,this); 
        
        //事件名注册
        // var tFun =function (event){
        //   console.log("touchend event"); 
        // };
        // this.node.on("touchend",tFun);
        
        // this.node.on("touchend",function (event){
        //   console.log("touchend event"); 
        // });
        
        // this.node.on("touchend",function (event){
        //   console.log("touchend event"); 
        // },this);
        
        // this.node.on("touchend",function (event){
        //   console.log("touchend event"); 
        // }.bind(this));
        
        //--->>> 一次性的事件监听 once
        // this.node.once("touchend",function (event){
        //   console.log("touchend event"); 
        // });
        
        
        //--->>> 关闭监听
        this.node.off("touchend",tFun,this);
        
        
        //--->>> 发射事件(事件手动触发)
        this.node.on("tEmitFun",function (event){ 
            console.log("tEmitFun event:"+event.detail.himi+"|"+event.detail.say); 
            
            //-->>> 事件中断,如下函数阻止事件向当前父级进行事件传递
            // event.stopPropagation();
        });
        this.node.emit("tEmitFun",{himi:27,say:"hello,cc!"});
        
        
        //--->>> 动作,类似c2dx api 基本无变化
        var mTo = cc.moveBy(1,-100, -200);
        var mAction = cc.repeatForever(cc.sequence(cc.moveBy(1,-100, -200),mTo.reverse(),cc.delayTime(0.5),cc.callFunc(function(action,data){
            console.log("action callback:"+data.himi);
        },this,{tx:100,himi:"i'm action callback and bring data"})));
        mySprite.node.runAction(mAction);
        //暂停动作
        mySprite.node.stopAction(mAction);
        
        
        //--->>> 计时器 (component)schedule (cc.Node 不包含计时器相关 API)
        //参数: call funtion/interval/repeat times/delay time
        //不延迟,永久重复
        this.schedule(function(){
            console.log("schedule log...");
        },1);
        
        //不延迟,有重复次数限定
        // this.schedule(function(){
        //     console.log("schedule log...");
        // },1,2);
        
        //重复2次,重复间隔为1秒,延迟1秒进行
        // this.schedule(function(){
        //     console.log("schedule log...");
        // },1,2,1);
        
        //一次性的计时器
        var mySch =function(){ console.log("schedule Once log..."); }
        this.scheduleOnce(mySch);
        
        //取消定时器
        this.unschedule(mySch);
        
        
        //--->>> url raw资源获取
        var mSf = new cc.Node().addComponent(cc.Sprite);
        mSf.spriteFrame = this.t_sprite;
        mSf.spriteFrame.setTexture(this.t_url);
        mSf.node.setPosition(400,0);
        mSf.node.parent = this.node;
        mSf.node.setScale(0.5);
        
        //获得 Raw Asset 的 url
        var mUrl = cc.textureCache.addImage(cc.url.raw("himi.png"));
        console.log("raw asset url:"+mUrl);
        
      
    },
 
    // called every frame
    update: function (dt) {
        // if (cc.isValid(this.label.node) ) {
        //     console.log("有效存在,进行摧毁");
        // }else{
        //     console.log("已摧毁");
        // }
    },
});

testJs.js


t_global = {
    tw:100,
    th:200
};
 
module.exports= {
    tme_pa1:"100",
    tme_pa2:333221
};

1赞

顶顶顶顶顶顶顶顶顶

:7::2::7:

:2::2::2:

//—>>>在当前节点下添加一个组件
var mySprite = new cc.Node().addComponent(cc.Sprite);
mySprite.spriteFrame = this.t_sprite;
mySprite.node.parent = this.node;
mySprite.node.setPosition(300,200);

有什么方法可以在新添加的节点mySprite下再添加一个组件?也就是像Button那样里面有个Label。感谢!

问一下如果我要在点击的地方出现hello world,而且在屏幕边缘时,不能显示的文字出现在屏幕另一边的js代码。

这个全局变量,无法用呀。

问题://当前有bug,只设定get也能修改]
t_getSet:{
default:12,
get:function(){return this.t_getSet},//get
set:function(value){this.t_getSet =value;}//set
},
建议修改为:
t_getSet:{
default:12,
get:function(){temp : t_getSet, return temp},//get
set:function(value){this.t_getSet =value;}//set
},

http://forum.cocos.com/t/cocos-creator/35603

文件已中枪,未通过审核…换个文件看看吧^_^…无法下载了