【Cocos Creator 3.8.3】基础篇：飞机大战系列（飞机移动）

最近抗洪，没抽出时间学习，见谅见谅，哈哈就是又偷懒了,北方今年确实雨水大了点，体验了一把南方的闷闷湿湿的感觉

效果图

飞机喷气和移动的效果分别应用了Cocos的事件系统和动画系统

飞机和动画剪辑

创建飞机

在Canvas下创建Sprite精灵，将飞机图片拖入精灵属性检查器Sprite Frame，设置要初始位置。

动画剪辑

创建飞机后，添加飞机尾气喷射，让飞机看起来是在真正的飞行。

1. 创建动画剪辑脚本HeroPlaneAnim.anim，将动画剪辑挂载到飞机节点上
   
   

2. 准备两张图片
   

3. 打开动画编辑器
   动态效果是通过图片替换的方式来实现的，所有使用到了spiteFrame属性
   
   通过添加关键帧，将不同的图片插入到关键帧，对采样帧率和播放速度进行调整，实现动画效果
   
   根据运行效果调试完毕后，点击保存推出编辑界面

事件系统

事件系统分为输入事件、节点事件和屏幕事件系统等，飞机跟随鼠标或手指移动用到了输入事件，固定Web开发输入事件就是文本框相关事件，但是在Cocos Creator 输入事件是用来监听全局的系统输入事件，代替原有的systemEvent事件。

输入事件（Input）

输入事件包含：鼠标事件、触摸事件、键盘事件、设备重力传感事件，移动端开发所有事件选择是触摸事件。

飞机是如何跟随手指移动，通过手指开始触摸屏幕>获取飞机当前的位置>通过Cocos api 提供的 delta方法（获取触摸点距离上一次事件移动的距离对象）>飞机getDelta获取的差值来计算飞机飞行的距离

  //玩家飞机是Hero
  @property(Node)
  heroPlane: Node = null;

  start(){
   input.on(Input.EventType.TOUCH_MOVE, this._touchMove, this);
  }

  // 2D和3D在处理跟随手指移动的计算方式稍有不同
  _touchMove(event: EventTouch) {
    const _delta = event.getDelta();
    this.heroPlane.setPosition(
      this.heroPlane.position.x + _delta.x,
      this.heroPlane.position.y + _delta.y
    );
  }

完整代码（UIManager.ts）：

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

@ccclass("UIManager")
export class UIManager extends Component {
  @property(Node)
  heroPlane: Node = null;

  start() {
    this._setInputEventActive(true);
  }

  // 激活监听或卸载监听
  _setInputEventActive(active: boolean) {
    if (active) {
      input.on(Input.EventType.TOUCH_MOVE, this._touchMove, this);
    } else {
      input.off(Input.EventType.TOUCH_MOVE, this._touchMove, this);
    }
  }

  _touchMove(event: EventTouch) {
    const _delta = event.getDelta();
    this.heroPlane.setPosition(
      this.heroPlane.position.x + _delta.x,
      this.heroPlane.position.y + _delta.y
    );
  }

  update(deltaTime: number) {}
}

UIManager 主要存放用户所有的与操作相关的方法,是全局节点组件

点击保存运行，飞机就动起来了…

长按识别关注，交个朋友吧！