【Cocos TypeScript 零基础 5.1】

本笔记是学习记录
SIKI学院 视频原地址 点击跳转

创建玩家

玩家飞机 后面简称玩家

玩家图片

先创建一个空节点

把玩家飞机图片丢进空节点

系统自动生成一个 canvas 和 camera
这是不对的 再把玩家图片丢进上一个 camera 下
未创建新的,再移动到 空节点 下
最终样子

初始位置 及大小 看自己高兴,右边属性自己改
我改成0.7

玩家动画

动画添加到空节点上

1. 进入动画编辑器
2. 选择新建动画 ( 在玩家飞机图片上 空节点用来写飞机逻辑代码)
3. 命名保存
4. 添加关键帧
5. 循环播放 和 加载后播放

完整差不多如下图

差不多可以试运行一下看看动画有无异常

玩家移动

玩家移动,现在我能想到的三种方式

1. 遥感式
2. 跟随触摸式 (手指在哪里飞机在哪里)
3. 触摸增量式 (手指在任意位置飞机跟随移动增量)

老师用的就是第三种,先创建一个TS脚本,把TS脚本绑定到 空父节点 上

进行代码编辑

@ccclass('player')
export class player extends Component {
   
   
    
    protected onLoad(): void {
   
     //  打开触摸移动监听
        input.on(
            Input.EventType.TOUCH_MOVE, //  设置获取的类型
            this.onmove,    //  赋值给onmove函数
            this
        )
    }
    protected onDestroy(): void {
   
      //  关闭
        input.off(
            Input.EventType.TOUCH_MOVE,
            this.onmove,
            this
        )
    }
    onmove(event:EventTouch){
   
   
        const p = this.node.position;   //  获取坐标
        this.node.setPosition(  //  设置位置
            p.x + event.getDeltaX(),    //  当前X坐标 + 移动的X坐标
            p.y + event.getDeltaY(),
            p.z //  2d z轴无关,不填好像也可以
        )
    }
}

保存运行一下看是否能控制移动
这里有一个问题,飞机能移动出屏幕外,所以要加以限制
坐标我调了好久都不对,发现是我脚本挂在父空节点上,
图片是子节点,所以我们动的是父节点,查看坐标也应该是父节点坐标

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

@ccclass('player')
export class player extends Component {
   
   
    
    protected onLoad(): void {
   
     //  打开触摸移动监听
        input.on(
            Input.EventType.TOUCH_MOVE, //  设置获取的类型
            this.onmove,    //  赋值给onmove函数
            this
        )
    }
    protected onDestroy(): void {
   
      //  关闭
        input.off(
            Input.EventType.TOUCH_MOVE