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

本站文章均为 李华明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

};

 

时间: 2024-09-24 13:36:18

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

【COCOS CREATOR 系列教程之一】CC尝鲜小总结及组件使用需注意的几点细节

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1936.html   从今天起,Himi将陆续的会持续更新一些Cocos Creator的文章 一起学习交流的可以加我的QQ群 Cocos Creator :432818031     貌似好久没有来写原创博文了,不知道还有多少认识Himi的- 当然也有不少群里的人问我都在忙什么,这里简单先八卦一下: 去年去了网

【COCOS CREATOR 系列教程之四】基于0.7.1先简单制作一个PAGEVIEW

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1999.html 由于当前版本还没有发布1.0,因此还有不少组件没有发布,那么Himi也看到Cocos Creator群里有几个童鞋问起过PageView的问题,那么Himi正好借此练手,基于当前版本制作一个PageView. 本文分为两部分进行讲解: 1. 制作PageView     2. 如何使用 一. 制

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

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1985.html 还有几天就要过年了,今天Himi就要坐车回老家了,这里提前祝福各位新年快乐.家庭和睦.万事如意. 进入主题,今天讲解下的小伙伴比较在意的几点问题:(当前使用的版本 0.7.1)          1. 关于Prefab的使用与概述          2. Cocos Creator 如何同时打开多

Android应用开发:电话监听和录音代码示例_Android

在oncreate 中执行: 复制代码 代码如下: public void onCreate() {  super.onCreate();  Log.i("TAG", "服务启动了");   // 对电话的来电状态进行监听  TelephonyManager telManager = (TelephonyManager) this    .getSystemService(Context.TELEPHONY_SERVICE);  // 注册一个监听器对电话状态进行监

Android应用开发:电话监听和录音代码示例

在oncreate 中执行:复制代码 代码如下:public void onCreate() {  super.onCreate();  Log.i("TAG", "服务启动了"); // 对电话的来电状态进行监听  TelephonyManager telManager = (TelephonyManager) this    .getSystemService(Context.TELEPHONY_SERVICE);  // 注册一个监听器对电话状态进行监听  t

大华摄像头二次开发能登录监录像不能显示在控件上,保存视频文格式是什么

问题描述 大华摄像头二次开发能登录监录像不能显示在控件上,保存视频文格式是什么 private void Form1_Load(object sender, EventArgs e) { pictureBox1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle; pictureBox1.Dock = System.Windows.Forms.DockStyle.Fill; pictureBox1.Location = new S

android开发 如何实现 监听点击屏幕任意位置事件

问题描述 android开发 如何实现 监听点击屏幕任意位置事件 好比一个导航页,当滑倒最后一页时,提示用户点击屏幕的任意位置进入MainActivity.这种点击事件如何响应? 解决方案 原来是这样的啊啊,这下我知道啦 解决方案二: 最简单的就是,在视图最上面加个控件(全屏显示),背景设置为透明,先设置为gone,滑动到最后页面,显示出来就可以了,然后给这个控件加个事件--

iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)_IOS

在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式 方式一: 全局通知 1.注册通知 在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV

【Xamarin挖墙脚系列:对设备/模拟器的查看调试监听】

原文:[Xamarin挖墙脚系列:对设备/模拟器的查看调试监听]   有时候我们需要查看模拟器中的文件,比如进行了文件IO操作,sqlite数据库的操作等.我们想查看内容,这时候,如何将内容导出来?由于Android的系统是Linux内核,其文件的组织方式也是跟随Linux的. 在Linux系统中,所有的设备 数据块 目录 快捷方式  文件等都是以文件的方式组织的,对的,在Linux中,所有的所有都是文件! 文件根Root开始,以倒树的形式进行组织排列.每个文件都是树的节点Node.(熟悉Lin