COCOS:(飞机大战03)绑定触摸方法,控制主角的移动和移动边界的限制

飞机大战知识点总结

1.创建Player.ts文件,把该文件添加到Player组件上
在这里插入图片描述
2.编写Player.ts

import { _decorator, Component, EventTouch, Input, input, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Player')
export class Player extends Component {
    protected onLoad(): void {
    	// 1. 注册触摸事件
        input.on(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);
    }
    protected onDestroy(): void {
        // 2.注销触摸事件
        input.off(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);
    }

    // 触摸方法
    onTouchMove(event:EventTouch){
    	// this.node.position:获取自身Player的位置
        // event中 getDeltaX(),getDeltaY():用来获取移动过程中的位置偏移
        // 通过这个偏移,来控制Player的位置偏移
        // this.node.setPosition:设置x,y,z轴的位置 
        const p = this.node.position;
        this.node.setPosition(p.x+event.getDeltaX(),p.y+event.getDeltaY(),p.z)
    }
}

上述代码保存在编辑器里运行看下效果,会发现飞机会移动到视图外边,

下边就要限制移动边界的问题

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
通过触摸移动,得到了4个边界值,x轴为-230230,y轴为380-380
有个了这个边界值,需要再把Player.ts优化下代码。

import { _decorator, Component, EventTouch, Input, input, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Player')
export class Player extends Component {
    protected onLoad(): void {
        // 1. 注册触摸事件
        input.on(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);
    }
    protected onDestroy(): void {
        // 2.注销触摸事件
        input.off(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);
    }
    // 触摸方法
    onTouchMove(event:EventTouch){
        // this.node.position:获取自身Player的位置
        // event中 getDeltaX(),getDeltaY():用来获取移动过程中的位置偏移
        // 通过这个偏移,来控制Player的位置偏移
        // this.node.setPosition:设置x,y,z轴的位置 

        const p = this.node.position;

        // 要移动的:目标坐标
        let targetPos = new Vec3(p.x+event.getDeltaX(),p.y+event.getDeltaY(),p.z);

        if(targetPos.x < -230){
            targetPos.x = -230
        }

        if(targetPos.x > 230){
            targetPos.x = 230
        }

        if(targetPos.y < -380){
            targetPos.y = -380
        }

        if(targetPos.y > 380){
            targetPos.y = 380
        }
        
        this.node.setPosition(targetPos)
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值