cocos creator基礎(chǔ)-cc.Node(二)事件響應(yīng)

觸摸事件

1: 觸摸事件類型: START, MOVED, ENDED(物體內(nèi)), CANCEL(物體外);

2: 監(jiān)聽觸摸事件: node.on(類型, callback, target(回掉函數(shù)的this), [useCapture]);

3: 關(guān)閉觸摸事件: node.off(類型, callback, target(回掉函數(shù)的this), [useCapture]);

4: targetOff (target): 移除所有的注冊事件;

5: 回掉函數(shù)的參數(shù)設(shè)置 function(t(cc.Touch))

6: cc.Touch: getLocation返回觸摸的位置;getDelta返回距離上次的偏移;

7: cc.Event: stopPropagationImmediate/stopPropagation 停止事件的傳遞;

8: 事件冒泡: 觸摸事件支持節(jié)點樹的事件冒泡,會從當(dāng)前前天往上一層一層的向父節(jié)點傳送;

9: 完成物體跟隨手指觸摸的案例;

// touch事件

cc.Class({

? ? extends: cc.Component,

? ? properties: {

? ? },

? ? /*

? ? t: --> cc.Touch

? ? 觸摸的位置: 屏幕坐標(biāo),左小角(0, 0); getLocation();

? ? */

? ? on_touch_move: function(t) {

? ? ? ? // 位置

? ? ? ? console.log("cc.Node.EventType.TOUCH_MOVE called");

? ? ? ? console.log(t.getLocation());

? ? ? ? var w_pos = t.getLocation(); // cc.Vec2 {x, y}

? ? ? ? console.log(w_pos, w_pos.x, w_pos.y);

? ? ? ? // 距離上一次觸摸變化了多少;

? ? ? ? var delta = t.getDelta(); // x, y各變化了多少cc.Vec2(x, y)

? ? ? ? this.node.x += delta.x;

? ? ? ? this.node.y += delta.y;

? ? },

? ? // use this for initialization

? ? onLoad: function () {

? ? ? ? // (1) 監(jiān)聽對應(yīng)的觸摸事件: 像引擎底層注冊一個回掉函數(shù)责蝠,當(dāng)有觸摸事件發(fā)生的時候掉這個回掉函數(shù);

? ? ? ? // cc.Node.EventType.TOUCH_START: 觸摸開始

? ? ? ? // cc.Node.EventType.TOUCH_MOVE: 觸摸移動

? ? ? ? // cc.Node.EventType.TOUCH_END: 觸摸結(jié)束, (物體內(nèi)部結(jié)束)

? ? ? ? // cc.Node.EventType.TOUCH_CANCEL: 觸摸結(jié)束, (物體外部結(jié)束)

? ? ? ? /*

? ? ? ? (2) 回掉函數(shù)的格式? function(t)? --> cc.Touch對象觸摸事件對象 {觸摸信息译红,事件信息}

? ? ? ? call --> this, this指向誰就是這個target;你要綁那個對象作為你回掉函數(shù)的this, 可以為空

? ? ? ? function () {}.bind(this);?


? ? ? ? */

? ? ? ? this.node.on(cc.Node.EventType.TOUCH_START, function(t) {

? ? ? ? ? ? console.log("cc.Node.EventType.TOUCH_START called");

? ? ? ? ? ? // this 函數(shù)里面的this,

? ? ? ? ? ? // 停止事件傳遞

? ? ? ? ? ? t.stopPropagationImmediate();?

? ? ? ? }, this);

? ? ? ? this.node.on(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);


? ? ? ? this.node.on(cc.Node.EventType.TOUCH_END, function(t) {

? ? ? ? ? ? console.log("cc.Node.EventType.TOUCH_END called");

? ? ? ? }, this);

? ? ? ? this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(t) {

? ? ? ? ? ? console.log("cc.Node.EventType.TOUCH_CANCEL called");

? ? ? ? }, this);

? ? ? ? // 移除

? ? ? ? // this.node.off(cc.Node.EventType.TOUCH_MOVE, this.on_touch_move, this);

? ? ? ? // 移除target上所有的注冊事件

? ? ? ? // this.node.targetOff(this);

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // update: function (dt) {

? ? // },

});

鍵盤事件

1:cc.SystemEvent.on(type, function, target, useCapture);

type: cc.SystemEvent.EventType.KEY_DOWN 按鍵按下;

cc.SystemEvent.EventType.KEY_UP 按鍵彈起;

2: cc.SystemEvent.on(type, function, target, useCapture);

3: 監(jiān)聽的時候,我們需要一個cc.SystemEvent類的實例,我們有一個全局的實例cc.systemEvent,小寫開頭

3: 鍵盤回掉函數(shù): function(event) {

event.keyCode [cc.KEY.left, ...cc.KEY.xxxx]

// kb_event.js 注冊引擎事件

cc.Class({

? ? extends: cc.Component,

? ? properties: {

? ? ? ? // foo: {

? ? ? ? //? ? default: null,? ? ? // The default value will be used only when the component attaching

? ? ? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ?to a node for the first time

? ? ? ? //? ? url: cc.Texture2D,? // optional, default is typeof default

? ? ? ? //? ? serializable: true, // optional, default is true

? ? ? ? //? ? visible: true,? ? ? // optional, default is true

? ? ? ? //? ? displayName: 'Foo', // optional

? ? ? ? //? ? readonly: false,? ? // optional, default is false

? ? ? ? // },

? ? ? ? // ...

? ? },

? ? // use this for initialization

? ? // (1)向引擎注冊一個事件類型的回掉函數(shù),?

? ? // (2) 按鍵時間的類型: cc.SystemEvent.EventType.KEY_DOWN, cc.SystemEvent.EventType.KEY_UP;

? ? // (3) 配置的回掉函數(shù): function(event) {} target, 目標(biāo)

? ? // (4) 每一個按鍵痊项,都會對應(yīng)一個按鍵碼, space, A, B, C, event對象 event.keyCode;

? ? // (5) cc.systemEvent 小寫開頭胳赌,不是大寫, 大寫SystemEvent類, systemEvent 全局一個實例

? ? onLoad: function () {

? ? ? ? // console.log(cc.systemEvent);

? ? ? ? // 按鍵被按下

? ? ? ? cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.on_key_down, this);

? ? ? ? // 按鍵彈起

? ? ? ? cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.on_key_up, this);

? ? },

? ? on_key_down: function(event) {

? ? ? ? switch(event.keyCode) {

? ? ? ? ? ? case cc.KEY.space:

? ? ? ? ? ? ? ? console.log("space key down!");

? ? ? ? ? ? break;

? ? ? ? }

? ? },

? ? on_key_up: function(event) {

? ? ? ? switch(event.keyCode) {

? ? ? ? ? ? case cc.KEY.space:

? ? ? ? ? ? ? ? console.log("space key up!");

? ? ? ? ? ? break;

? ? ? ? }

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // update: function (dt) {

? ? // },

});

自定義事件

1:監(jiān)聽: this.node.on(“自定義事件名稱”, function, target, useCapture);

2: 自派送: emit(“事件名稱”, [detail]); 只有自己能夠收到;

3: 冒泡派送: dispatchEvent(new cc.Event.EventCustom(“name”, 是否冒泡傳遞));

// custom_event.js 發(fā)送消息

cc.Class({

? ? extends: cc.Component,

? ? properties: {

? ? ? ? // foo: {

? ? ? ? //? ? default: null,? ? ? // The default value will be used only when the component attaching

? ? ? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ?to a node for the first time

? ? ? ? //? ? url: cc.Texture2D,? // optional, default is typeof default

? ? ? ? //? ? serializable: true, // optional, default is true

? ? ? ? //? ? visible: true,? ? ? // optional, default is true

? ? ? ? //? ? displayName: 'Foo', // optional

? ? ? ? //? ? readonly: false,? ? // optional, default is false

? ? ? ? // },

? ? ? ? // ...

? ? },

? ? // use this for initialization

? ? onLoad: function () {

? ? ? ? // 接收者

? ? ? ? // 事件類型,是你自定義的字符串;

? ? ? ? // 回掉函數(shù): function(e) {} e--> cc.Event.EventCustom的實例

? ? ? ? this.node.on("pkg_event", function(e){

? ? ? ? ? ? console.log("pkg_event", e.detail);

? ? ? ? }, this);

? ? ? ? // end

? ? },

? ? start: function() {

? ? ? ? // 派發(fā)者,只能傳遞給自己,不會向上傳遞

? ? ? ? this.node.emit("pkg_event", {blake: "huang"});

? ? ? ? // end??

? ? ? ? // 派送者夏醉,不只是發(fā)給自己爽锥,發(fā)給我們這個體系;

? ? ? ? // true/false, true向上傳遞, false不向向上傳遞

? ? ? ? var e = new cc.Event.EventCustom("pkg_event", true);

? ? ? ? e.detail = {blake: "huang"};

? ? ? ? this.node.dispatchEvent(e);

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // update: function (dt) {

? ? // },

});

recv_event.js

// recv_event.js 父類接收消息

cc.Class({

? ? extends: cc.Component,

? ? properties: {

? ? ? ? // foo: {

? ? ? ? //? ? default: null,? ? ? // The default value will be used only when the component attaching

? ? ? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ?to a node for the first time

? ? ? ? //? ? url: cc.Texture2D,? // optional, default is typeof default

? ? ? ? //? ? serializable: true, // optional, default is true

? ? ? ? //? ? visible: true,? ? ? // optional, default is true

? ? ? ? //? ? displayName: 'Foo', // optional

? ? ? ? //? ? readonly: false,? ? // optional, default is false

? ? ? ? // },

? ? ? ? // ...

? ? },

? ? // use this for initialization

? ? onLoad: function () {

? ? ? ? this.node.on("pkg_event", function(e){

? ? ? ? ? ? console.log("recv pkg_event", e.detail);

? ? ? ? }, this);

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // update: function (dt) {

? ? // },

});

我也創(chuàng)建了個cocos creator的學(xué)習(xí)交流群歡迎大家一起來討論點擊鏈接加入群聊【cocos/unity交流群】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市畔柔,隨后出現(xiàn)的幾起案子氯夷,更是在濱河造成了極大的恐慌,老刑警劉巖靶擦,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腮考,死亡現(xiàn)場離奇詭異,居然都是意外死亡玄捕,警方通過查閱死者的電腦和手機踩蔚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來枚粘,“玉大人馅闽,你說我怎么就攤上這事♀善” “怎么了福也?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長柬姚。 經(jīng)常有香客問我拟杉,道長,這世上最難降的妖魔是什么量承? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任搬设,我火速辦了婚禮,結(jié)果婚禮上撕捍,老公的妹妹穿的比我還像新娘拿穴。我一直安慰自己,他們只是感情好忧风,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布默色。 她就那樣靜靜地躺著,像睡著了一般狮腿。 火紅的嫁衣襯著肌膚如雪腿宰。 梳的紋絲不亂的頭發(fā)上呕诉,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天,我揣著相機與錄音吃度,去河邊找鬼甩挫。 笑死,一個胖子當(dāng)著我的面吹牛椿每,可吹牛的內(nèi)容都是我干的伊者。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼间护,長吁一口氣:“原來是場噩夢啊……” “哼亦渗!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起汁尺,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤法精,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后痴突,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亿虽,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年苞也,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粘秆。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡如迟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出攻走,到底是詐尸還是另有隱情殷勘,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布昔搂,位于F島的核電站玲销,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏摘符。R本人自食惡果不足惜贤斜,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逛裤。 院中可真熱鬧瘩绒,春花似錦、人聲如沸带族。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蝙砌。三九已至阳堕,卻和暖如春跋理,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背恬总。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工前普, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人越驻。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓汁政,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缀旁。 傳聞我的和親對象是個殘疾皇子记劈,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容