Cocos Creator:处理触摸事件

推荐：将NSDT场景编辑器加入你的3D工具链

3D工具链：NSDT简石数字孪生

如果我们希望我们的游戏在移动设备上运行，我们需要处理触摸事件而不是鼠标单击事件，因为后者仅在 PC 上触发。

在 Cocos Creator 中，我们可以通过监听事件来处理屏幕上的触摸事件。Input.EventType.TOUCH_START

有两种方法可以使用。

• 使用input.on
• 使用方法侦听节点内容大小内发生的触摸事件node.on

我们将屏幕分成两边，当用户触摸左侧时，玩家移动一步，当他们触摸右侧时，玩家移动两步。最好在这种情况下使用。node.on

接下来，让我们来看看如何完成它。

在节点下，创建两个节点并将它们命名为 和 。UICanvasLeftTouchRightTouch

设置它们的位置和内容大小，如下所示。

返回到 ，添加以下属性以引用触摸节点。PlayerController

@property(Node)
leftTouch: Node = null;

@property(Node)
rightTouch: Node = null;

选择节点，然后将之前创建的节点拖到上面添加的相应属性上。Player

在 中添加以下代码。PlayerController

侦听触摸事件：

  setInputActive(active: boolean) {
      if (active) {
          //for pc
          input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
          //for mobile
          this.leftTouch.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
          this.rightTouch.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
      } else { 
          //for pc
          input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this);
          //for mobile
          this.leftTouch.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
          this.rightTouch.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
      }
  }

添加用于处理触摸事件的方法

  onTouchStart(event: EventTouch) {
      const target = event.target as Node;    
      if (target?.name == 'LeftTouch') {
          this.jumpByStep(1);
      } else {
          this.jumpByStep(2);
      }
  }

target是 类型，所以我们需要使用它将其转换为类型。anyasNode

获得被触摸的目标节点后，我们可以根据它的名称来确定它是在左侧还是右侧触摸。

现在，您可以使用浏览器在手机上运行游戏，扫描Cocos Creator操作栏上的QR码，如下所示。

注意：运行 Cocos Creator 的计算机和移动设备必须连接到同一局域网。

的完整代码如下所示。PlayerController

import { _decorator, Component, Vec3, EventMouse, input, Input, Animation, EventTouch, Node } from "cc";
const { ccclass, property } = _decorator;

export const BLOCK_SIZE = 40;

@ccclass("PlayerController")
export class PlayerController extends Component {

    @property(Animation)
    BodyAnim: Animation = null;

    private _startJump: boolean = false;
    private _jumpStep: number = 0;
    private _curJumpTime: number = 0;
    private _jumpTime: number = 0.3;
    private _curJumpSpeed: number = 0;
    private _curPos: Vec3 = new Vec3();
    private _deltaPos: Vec3 = new Vec3(0, 0, 0);
    private _targetPos: Vec3 = new Vec3();
    private _curMoveIndex = 0;

    @property(Node)
    leftTouch: Node = null;

    @property(Node)
    rightTouch: Node = null;

    start() {
        //input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
    }

    setInputActive(active: boolean) {
        if (active) {
            input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
            this.leftTouch.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
            this.rightTouch.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
        } else {
            input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this);
            this.leftTouch.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
            this.rightTouch.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
        }
    }

    reset() {
        this._curMoveIndex = 0;
    }

    onTouchStart(event: EventTouch) {
        const target = event.target as Node;        
        if (target?.name == 'LeftTouch') {
            this.jumpByStep(1);
        } else {
            this.jumpByStep(2);
        }
    }

    onMouseUp(event: EventMouse) {
        if (event.getButton() === 0) {
            this.jumpByStep(1);
        } else if (event.getButton() === 2) {
            this.jumpByStep(2);
        }

    }

    jumpByStep(step: number) {
        if (this._startJump) {
            return;
        }
        this._startJump = true;
        this._jumpStep = step;
        this._curJumpTime = 0;

        const clipName = step == 1 ? 'oneStep' : 'twoStep';
        const state = this.BodyAnim.getState(clipName);
        this._jumpTime = state.duration;

        this._curJumpSpeed = this._jumpStep * BLOCK_SIZE / this._jumpTime;
        this.node.getPosition(this._curPos);
        Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep * BLOCK_SIZE, 0, 0));

        if (this.BodyAnim) {
            if (step === 1) {
                this.BodyAnim.play('oneStep');
            } else if (step === 2) {
                this.BodyAnim.play('twoStep');
            }
        }

        this._curMoveIndex += step;
    }


    onOnceJumpEnd() {
        this.node.emit('JumpEnd', this._curMoveIndex);
    }

    update(deltaTime: number) {
        if (this._startJump) {
            this._curJumpTime += deltaTime;
            if (this._curJumpTime > this._jumpTime) {
                // end
                this.node.setPosition(this._targetPos);
                this._startJump = false;
                this.onOnceJumpEnd();
            } else {
                // tween
                this.node.getPosition(this._curPos);
                this._deltaPos.x = this._curJumpSpeed * deltaTime;
                Vec3.add(this._curPos, this._curPos, this._deltaPos);
                this.node.setPosition(this._curPos);
            }
        }
    }
}

3D建模学习工作室整理翻译，转载请标明出处！

上一篇：Cocos Creator:3D 游戏示例 (mvrlink.com)

下一篇：Cocos Creator:添加光、影和骨架动画 (mvrlink.com)