天天看點

【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

主要兩個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的類型,并定義上常用屬性

            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:{

            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){

        // });

        // },this);

        // }.bind(this));

        //--->>> 一次性的事件監聽 once

        // this.node.once("touchend",function (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秒進行

        // },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

繼續閱讀