博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合
阅读量:6577 次
发布时间:2019-06-24

本文共 7064 字,大约阅读时间需要 23 分钟。

【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

源码下载地址:                        

主要两个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
");                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};

转载地址:http://cjyno.baihongyu.com/

你可能感兴趣的文章
JVM原理讲解和调优
查看>>
你为什么一定要去美国?给我一个理由
查看>>
JS -------------------设置弹出框位置屏幕的中间
查看>>
几个内核有关的命令
查看>>
【运维分享】全方位管理你的小机
查看>>
第一章 大网 GNS3 使用
查看>>
性能测试 vbs使用(一)
查看>>
46Exchange 2010升级到Exchange 2013-移除总部CAS2010
查看>>
1.2 linux哲学思想
查看>>
基于PXE自动化部署操作系统
查看>>
windows运维趣事
查看>>
python用户输入(三)
查看>>
Android机子屏幕适配最简单最全面方案
查看>>
spring拦截器中的事务管理
查看>>
有信网络电话被KC网络电话收购了吗?
查看>>
智慧重于门第
查看>>
InnoDB 引擎独立表空间 innodb_file_per_table
查看>>
hibernate 组成关系的映射
查看>>
菜鸟学mysql:列的增加、修改、删除
查看>>
经典面试题
查看>>