Cocos Creater学习之手指虚拟摇杆控制角色移动

代码狗中狗

已于 2023-06-13 13:47:40 修改

阅读量1k

点赞数 1

文章标签： javascript cocos2d

于 2023-06-13 11:50:47 首次发布

本文链接：https://blog.csdn.net/qq_39843833/article/details/131185289

版权

该代码示例展示了如何在cc.js环境中通过监听触摸事件来控制游戏中的Node节点移动。玩家按住屏幕时，根据触摸的移动方向更新移动方向变量，松开手指时重置方向。移动速度和方向通过属性设置，update循环中调用移动方法实现角色的连续移动。

摘要由CSDN通过智能技术生成

一、国际惯例引入各种组件

import { _decorator, Component, CCInteger, Node, input, Input, EventTouch, Vec2} from 'cc';
const { ccclass, property } = _decorator;

二、预设各种Node节点，变量

	// 玩家移动
	@property(Node)
	playerMove : Node
	// 移动速度
	@property({ type: CCInteger })
	public Speed : number = 200;
	// 方向
	dir : Vec2 = new Vec2(0, 0)

三、加载各种输入事件

	onLoad() {
		//节点初始位置,每次触摸结束更新
		const nodePos = this.playerMove.getPosition();
		//触摸监听(this.node.parent是屏幕)
		//想达到按住节点，节点才能移动的效果，将监听函数注册到 this.node 上，去掉  .parent 即可
		this.playerMove.parent.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
		this.playerMove.parent.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
		this.playerMove.parent.on(Input.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
		console.log('TOUCH_MOVE加载' + nodePos + 'dir是什么,' + this.dir.x + this.dir.y)
	}

四、方向控制

	//方向控制；
	onTouchMove(event) {
		const delta = event.getDelta(); //获取移动的差值
		console.log('TOUCH_MOVE' + delta.x + delta.y)  //例行打印
		// 通过移动的差值判断方向
		if(delta.x > 0){
			console.log('右移')
			this.dir.x = 1
		}else if(delta.x < -0){
			console.log('左移')
			this.dir.x = -1
		}else if(delta.x == 0){
			console.log('左右停止')
			this.dir.x = 0
		}
		if(delta.y > 0){
			console.log('上移')
			this.dir.y = 1
		}else if(delta.y < -0){
			console.log('下移')
			this.dir.y = -1
		}else if(delta.y == 0){
			console.log('上下停止')
			this.dir.y = 0
		}
	}

五、移开手指还原变量

	onTouchEnd() {
		this.dir = new Vec2(0, 0);
		console.log('重置方向')
	}
	onTouchCancel() {
		this.dir = new Vec2(0, 0);
		console.log('重置方向')
	}

六、移动方法，根据方向和预设的速度移动

Moving(){
		const pos = this.playerMove.position;
		this.playerMove.setPosition(pos.x + 0.01 * this.dir.x * this.Speed, pos.y + 0.01 * this.dir.y * this.Speed)
	}

七、走内置的update持续执行移动方法实现角色移动

	update(deltaTime : number) {
		this.Moving()
	}

完整代码：

import { _decorator, Component, CCInteger, Node, input, Input, EventTouch, Vec2} from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PlayerController')
export class PlayerController extends Component {
	// 玩家移动
	@property(Node)
	playerMove : Node
	// 移动速度
	@property({ type: CCInteger })
	public Speed : number = 200;
	// 方向
	dir : Vec2 = new Vec2(0, 0)

	onLoad() {
		//节点初始位置,每次触摸结束更新
		const nodePos = this.playerMove.getPosition();
		//触摸监听(this.node.parent是屏幕)
		//想达到按住节点，节点才能移动的效果，将监听函数注册到 this.node 上，去掉  .parent 即可
		this.playerMove.parent.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
		this.playerMove.parent.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
		this.playerMove.parent.on(Input.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
		console.log('TOUCH_MOVE加载' + nodePos + 'dir是什么,' + this.dir.x + this.dir.y)
	}
	//方向控制；
	onTouchMove(event) {
		const delta = event.getDelta(); //获取移动的差值
		console.log('TOUCH_MOVE' + delta.x + delta.y)  //例行打印
		// 通过移动的差值判断方向
		if(delta.x > 0){
			console.log('右移')
			this.dir.x = 1
		}else if(delta.x < -0){
			console.log('左移')
			this.dir.x = -1
		}else if(delta.x == 0){
			console.log('左右停止')
			this.dir.x = 0
		}
		if(delta.y > 0){
			console.log('上移')
			this.dir.y = 1
		}else if(delta.y < -0){
			console.log('下移')
			this.dir.y = -1
		}else if(delta.y == 0){
			console.log('上下停止')
			this.dir.y = 0
		}
	}
	onTouchEnd() {
		this.dir = new Vec2(0, 0);
		console.log('重置方向')
	}
	onTouchCancel() {
		this.dir = new Vec2(0, 0);
		console.log('重置方向')
	}
	Moving(){
		const pos = this.playerMove.position;
		this.playerMove.setPosition(pos.x + 0.01 * this.dir.x * this.Speed, pos.y + 0.01 * this.dir.y * this.Speed)
	}

	update(deltaTime : number) {
		this.Moving()
	}
}