本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocos-creator/1959.html

【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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

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

1
2
3
4
5
6
7
8
9

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

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

  1. STM32MP157系列教程连载-Linux应用开发篇1:STM32MP1微处理器之Ubuntu安装与体验

    STM32MP157系列教程连载-Linux应用开发篇1:STM32MP1微处理器之Ubuntu安装与体验 截至目前上传的博文已经有6篇了(硬件4篇,安装环境2篇),最近手头在搞STM32MP157C ...

  2. Vue学习(二)动态绑定与事件监听

    v-bind&v-on Day1 文章目录 v-bind&v-on 前言 一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...

  3. unity2d游戏开发系列教程:二、新建工程并熟悉Unity编辑器常用功能

    目录 unity2d游戏开发系列教程:一.环境安装 第一步.打开项目 耐心等待一小会 工程界面 第二步.创建第一个场景(第一关)进行试玩 点击图中标号1的运行按钮,即可简单试玩感受,操作如下 移动A, ...

  4. 【COCOS CREATOR 系列教程之三】PREFAB讲解CC项目如何多开与分享

    还有几天就要过年了,今天Himi就要坐车回老家了,这里提前祝福各位新年快乐.家庭和睦.万事如意. 进入主题,今天讲解下的小伙伴比较在意的几点问题:(当前使用的版本 0.7.1) 1. 关于Prefab ...

  5. 微信程序开发系列教程(二)微信订阅号+人工智能问答服务

    我的前一篇文章**微信程序开发系列教程(一)**开发环境搭建 已经介绍了微信服务器的开发环境搭建.本文作为开发系列的第二篇文章,介绍如何给您的微信订阅号开发一个最简单的问答服务,非常好玩. 这个系列的 ...

  6. Laravel大型项目系列教程(二)之用户管理

    Laravel大型项目系列教程(二) 一.前言 本节教程将大概实现用户的注册.修改个人信息.管理用户功能 二.Let's go 1.创建用户注册视图 <span style="font ...

  7. html5游戏制作入门系列教程(二)

    今天,我们继续html5游戏制作入门系列的系列文章.今天,我们将继续基础知识(也许甚至是高级技巧的基础).我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要 ...

  8. CAA教程——CATIA二次开发环境搭建

    CAA教程--CATIA二次开发环境搭建 前言 开发环境搭建所需资源 安装注意事项 安装完成后的一些操作 测试程序的运行效果 CATIA帮助文档的设置 VS里利用CATIA帮助文档的查询接口功能 编译 ...

  9. 2D游戏引擎Allegro 系列教程(二) Hello world!

    本系列文章由sky编写,转载请注明出处. http://blog.csdn.net/qq573011406/article/details/8172949 作者:袁全伟   邮箱: qq5730114 ...

最新文章

  1. pthred()多线程计算派
  2. 如何将visual studio 2010编辑模式改为插入???
  3. Java对象序列化为什么要使用SerialversionUID
  4. CCF201409-5 拼图(30分)
  5. 0x00000000指令引用的内存不能为written_JVM03——对象实例化,内存布局,访问定位...
  6. AWS 开战 MongoDB!
  7. 阿里重磅开源中后台UI解决方案Fusion
  8. XCode: 如何添加自定义代码片段
  9. http 网页突然报502 bad gateway,平台宕掉
  10. dnf喇叭怎么设置不显示服务器,《DNF》屏蔽广告喇叭方法 广告喇叭怎么关掉
  11. 怎样限制Word文档被复制粘贴?word限制编辑的使用技巧
  12. 反射之前奏Oracle简单版
  13. 深刻对比一下阿里云服务器和腾讯云服务器的优劣和区别
  14. 依据前端传递的数字等生成二维码图片
  15. 检查android sdk是否安装成功,Android判断手机是否安装微信
  16. 猜年龄python实现
  17. blob格式照片在前端页面的显示
  18. 为视图或函数指定的列名比其定义中的列多
  19. 微信小程序web-view使用audio标签播放音频文件时无法自动播放的问题
  20. 选定区域着色html,一种提取html页面选定区域内容的方法

热门文章

  1. 监听Hierachy、Project等视图结构变化的事件
  2. pytorch简单框架
  3. WinSxS文件夹瘦身
  4. TCP为什么要三次握手和四次挥手
  5. 【Alpha阶段汇总】成果展示与体验总结
  6. 在Android命令行启动程序的方法
  7. VUE组件 之 Drawer 抽屉
  8. Underscore.js常用方法介绍
  9. d3.js 入门指南
  10. js改变select下拉框默认选择的option