码迷,mamicode.com
首页 > 其他好文 > 详细

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

时间:2016-02-01 22:37:18      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:教程   学习   creator   himi   cocos   

【Cocos Creator 】(千人群):  432818031

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

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

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

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

大致内容如下:

  1. cc 属性介绍

  2. 获取组件的几种形式

  3. 全局变量的访问

  4. 模块之间的访问

  5. 在当前节点下添加一个组件

  6. 复制节点/或者复制 prefab

  7. 销毁节点(销毁节点并不会立刻发生,而是在当前 帧逻辑更新结束后,统一执行)

  8. 事件监听 on 4种形式(包括坐标获取)

  9. 关闭监听

  10. 发射事件(事件手动触发)

  11. 动作示例,类似c2dx api 基本无变化

  12. 计时器 (component)schedule (cc.Node 不包含计时器相关 API)

  13. 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:[cc.Sprite]
        }
    },
 
    // 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
};


本文出自 “李华明Himi” 博客,请务必保留此出处http://xiaominghimi.blog.51cto.com/2614927/1740512

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

标签:教程   学习   creator   himi   cocos   

原文地址:http://xiaominghimi.blog.51cto.com/2614927/1740512

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!