前提:
- 触摸节点已设置符合需求的尺寸
- 触摸节点已挂载脚本组件
实现步骤:
一、先给触摸节点添加事件监听
onLoad() {
// 开始触摸
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchEvt, this);
// 结束触摸
this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEvt, this);
}
二、实现触摸事件回调
/** 当前的触摸ID */
touchingID: number = 0;
onTouchEvt(evt: cc.Event.EventTouch) {
const touch = evt.touch;
const tid = touch.getID();
const touchingID = this.touchingID;
if (evt.type === cc.Node.EventType.TOUCH_START) {
// 开始触摸
if (touchingID) return; // 当前已有触摸,忽略之
touchingID = tid;
} else {
// 结束触摸
if (touchingID && touchingID !== tid) return; // 不是正触摸的点,忽略之
// 得到滑动向量
const vec = touch.getLocation().sub(touch.getStartLocation());
if (vec.mag() < 10) {
// 滑动距离太短,可认为是点击
// your code...
} else {
// 得到滑动的方向
// 右:(1, 0)
// 左:(-1, 0)
// 上:(0, 1)
// 下:(0, -1)
const dir = this.getVecDir(vec);
// your code...
}
this.touchingID = 0; // 注意有this.
}
}
三、实现计算向量方向的方法
getVecDir(vec: cc.Vec2): cc.Vec2 {
if (Math.abs(vec.x) > Math.abs(vec.y)) { // 略嫌这里的判断不够高雅
// 水平滑动
if (vec.x > 0) {
// 右
return cc.Vec2.RIGHT;
} else {
// 左(即右的取反)
return cc.Vec2.RIGHT.negSelf();
}
} else {
// 垂直滑动
if (vec.y > 0) {
// 上
return cc.Vec2.UP;
} else {
// 下
return cc.Vec2.UP.negSelf();
}
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。