Cocos Creator2D游戏开发(5)-飞机大战(3)-手指操作玩家飞机移动

  1. 添加玩家飞机
    1.创建player_node节点
    2.将资源中Player图片拖入player_node节点
    3.将Player的Position属性值调整为(0,-300) Content Size属性调整为(100 100)
    4.点击运行,飞机在屏幕上了

    2 用手指拖着飞机跑流程
    ① 要监听手指按下
    ②判断手指是否在飞机上
    ③移动飞机
    ④监听手指离开

    创建一个脚本Player.ts , 场景节点选player_node节点, 将Player.ts拖入右边属性检查器,保存;
    Player.ts脚本
csharp 复制代码
import { _decorator, Component, EventTouch, Input, input, UITransform} from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Player')
export class Player extends Component {

    private isPress; //是否按下
    start() {
        this.isPress = false;
    }

    onLoad() {
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);  //注册按下事件
        input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);  // 注册移动事件
        input.on(Input.EventType.TOUCH_END, this.onToucheEnd, this); // 注册离开事件
    }

    onToucheEnd(event: EventTouch) {
        this.isPress = false;
    }


    onTouchMove(event: EventTouch) {
        if (!this.isPress) {
            return;
        }
        const player = this.node.getChildByName("Player"); // 获取指定的组件
        if (player === null) {
            return;
        }
        const uiPos = event.getUILocation(); //获取世界坐标
        player.setWorldPosition( uiPos.x,uiPos.y,0); // 设置指定坐标
    }

    onTouchStart(event: EventTouch) {
        const player = this.node.getChildByName("Player");
        if (player === null) {
            return;
        }

        const transform = player.getComponent(UITransform);
        const newRect = transform.getBoundingBoxToWorld(); //获取player组件框框
        if(newRect.contains(event.getUILocation())){
            this.isPress= true;
        }

    }

    update(deltaTime: number) {

    }
}
相关推荐
爱你的魔1 个月前
cocosCreator视频web模式播放踩坑解决
cocoscreator
爱你的魔2 个月前
cocosCreator Tab内容布局组件(支持编辑器环节使用)
cocoscreator
w风雨无阻w4 个月前
CocosCreator3.8 IOS 构建插屏无法去除的解决方案
ios·cocoscreator·cocoscreator3.8·插屏
w风雨无阻w4 个月前
CocosCreator 3.8 IOS 热更新失败问题解决方案
android·ios·cocoscreator·热更新·cocoscreator3.8
椰子糖莫莫4 个月前
游戏引擎详解——图片
游戏引擎·cocoscreator
Fuly10244 个月前
Cocos Creator2D游戏开发(14)---CocosCreator常用组件详解
cocoscreator
天马流星27194 个月前
cocosCreator3.X android 真机wifi 调试远程死活无效的问题
android·android studio·cocoscreator
Fuly10245 个月前
Cocos Creator2D游戏开发(4)-飞机大战(2)-编辑器界面
cocoscreator
平淡风云10 个月前
cocos creator 3.7.2使用shader实现图片扫光特效
前端·typescript·cocoscreator·游戏开发·shader·玩游戏·扫光