觸摸事件
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交流群】
