Cocos Creator制作一个虚拟摇杆

最新推荐文章于 2025-05-02 14:22:03 发布

plover.

最新推荐文章于 2025-05-02 14:22:03 发布

阅读量3.1k

点赞数 12

分类专栏： cocos-creator 文章标签： cocos-creator 游戏开发 ts 区域摇杆

本文链接：https://blog.youkuaiyun.com/wangyaoheng177/article/details/119674257

版权

1. 演示

版本：v2.4.3

语言：TS

演示GIF

在这里插入图片描述

2. 实现过程

素材

在这里插入图片描述

期望效果

类似于王者荣耀的那种小摇杆

摇杆中心位置为屏幕点击的位置

摇杆点击部分不会出界

过程

（1）摇杆跟随触摸

在这里插入图片描述

	this.Joystick = this.node.getChildByName("Joystick");
	// 此处监听的joystick为摇杆
    this.Joystick.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    onTouchMove(e: cc.Event.EventTouch) {
   
   		this.JoystickMove(e)
   	}
   	JoystickMove(e: cc.Event.EventTouch) {
   
        // 移动
        let delta = e.getDelta();
        let moveDistance = cc.v3(delta.x / this.node.scale, delta.y / this.node.scale) 
        // 此处增加缩放参数为了方便，使用时可以直接缩放大小
        this.Joystick.setPosition(this.Joystick.position.add(moveDistance)) 
   	}

在这里插入图片描述
此时可以实现触摸点跟随手指或者鼠标移动。getDelta函数是获取触点距离上一次事件移动的距离对象，返回的是一个Vec2。但此时摇杆不会自动归位。

（2）摇杆自动归位

	this.Joystick.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
	this.Joystick.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
	onTouchEnd(e: cc.Event.EventTouch) {
   
	    this.JoystickReset()
	}
	onTouchCancel(e: cc.Event.EventTouch) {
   
	    this.JoystickReset()
	}
	JoystickReset() {
   
	    cc.tween(this.Joystick)
	        .to(0.05, {
   x: 0, y: 0})
	        .start()
	}

在这里插入图片描述

TOUCH_END, TOUCH_CANCEL代表的状态为当手指在目标节点区域内离开屏幕时，当手指在目标节点区域外离开屏幕时。使用缓动使动画更流畅。

（3）限制摇杆不出界

原理：

此处思路来源于优快云章鱼仔，通过三角形的相似等比。
在这里插入图片描述
完善JoystickMove代码

JoystickMove(e: cc.Event.EventTouch) {
   
        // 移动
        let delta = e

最低0.47元/天解锁文章