CocosCreator3.8稳定版入门（自用笔记更新中）

KUOKUO众享（bilibili）https://www.bilibili.com/video/BV1LN41187y7/?p=5&share_source=copy_web&vd_source=5adf6af5d0162584d8c6fd618cb6d6ea

1.组件与节点

import { _decorator, Component, Label, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('labelTest_js')
export class labelTest_js extends Component {
    start() {
        //组件的初始化，类似vue的生命周期
        console.log(this);//指向本身
        console.log(this.node);//相关的所有属性
        //获取label对象；tip 需要挂载到画布上；画布就是最大的组件，每一功能能或者是模块是它的分支
        const labeContent = this.node.getComponent(Label);
        /*console.log(this.node.getComponent(Label));       */
        //标签初始化的时候修改属性
        labeContent.string = "hello world";

    }
    update(deltaTime: number) {
    }
}

2.节点的位移

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

@ccclass('labelMove')
export class labelMove extends Component {
    //创建一个全局属性
    currentPos = new Vec3();
    start() {
        // this.node.setPosition(0, -200, 0);
        // console.log(this.node.position);
        //this.node.angle += 1; 设置旋转
        // this.node.setScale(2, 2)设置缩放倍数
    }

    update(deltaTime: number) {
        //1.cocos渲染机制，需要一个标识，告诉引擎数据变化了
        //2.deltaTime=1/电脑帧率 进行移动
        this.node.getPosition(this.currentPos);//获取当前位置
        this.currentPos.x += 100 * deltaTime;//x轴+100
        this.node.setPosition(this.currentPos)//改变位置
    }
}

3.鼠标键盘事件

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

@ccclass('imgs')
export class imgs extends Component {
    start() {

        //鼠标事件
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCance, this);

        //键盘输入事件
        input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        input.on(Input.EventType.KEY_UP, this.onKeyUp, this);

    }
    onTouchStart(event: EventTouch) {
        console.log("点击");
        this.node.setScale(0.9, 0.9)

        //将节点坐标转化为画布坐标
        const uiPos = event.getUILocation();
        const tranform = this.node.getComponent(UITransform);
        const nodePos = tranform.convertToNodeSpaceAR(new Vec3(uiPos.x, uiPos.y, 0))
        if (nodePos.x > 0) {
            this.node.setPosition(this.node.position.x + 50, this.node.position.y)
        } else {
            this.node.setPosition(this.node.position.x - 50, this.node.position.y)
        }

    }
    onTouchMove(event: EventTouch) {
        console.log("移动");
        //获取鼠标距离上一次事件移动在 UI 坐标系下的距离对象，对象包含 x 和 y 属性。
        const delta = event.getUIDelta();
        const dx = delta.x;
        const dy = delta.y;
        const x = this.node.position.x;
        const y = this.node.position.y;
        this.node.setPosition(x + dx, y + dy);

        console.log("-----实际的位置；会根据屏幕比例缩放------");
        console.log(this.node.position)
        console.log("-----在画布中的位置------");
        console.log(event.getUILocation())
    }
    onTouchEnd() {
        console.log("结束");
        this.node.setScale(1, 1)
    }
    onTouchCance() {
        console.log("取消");
        this.node.setScale(1, 1)
    }
    //键盘按下
    onKeyDown(event: EventKeyboard) {
        console.log("按下");
        console.log(event.keyCode == KeyCode.KEY_A);//判断按下的字符
        if (event.keyCode == KeyCode.KEY_A) {
            //如果按下的是A;该对象放大
            this.node.setScale(2, 2)
        }
    }
    //键盘弹起
    onKeyUp(event: EventKeyboard) {
        console.log("弹起");
        //松手该对象恢复原来大小
        this.node.setScale(1, 1)
    }
    update(deltaTime: number) {

    }
}

4.缓动系统

  4.1添加组件

4.2基本用法

import { _decorator, Component, Node, Vec3, tween, Label, EventTouch, Tween } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('test2')
export class test2 extends Component {
    //1.获取组件
    @property(Node) myimgs: Node;
    @property(Node) button: Node;
    @property(Node) btnright: Node;
    @property(Node) btnleft: Node;
    start() {
        this.button.on(Node.EventType.TOUCH_START, () => {
            this.myimgs.setScale(2, 2);
        }, this)
        this.button.on(Node.EventType.TOUCH_END, () => {
            this.myimgs.setScale(1, 1);
            this.myAnimation();
        }, this)
    }
    myAnimation() {
        //自定义例子
        let duration: number = 1.0;
        tween(this.myimgs).to(duration, { position: new Vec3(0, 200, 0) }, { easing: "backIn" }).start();


        
        //参考文档例子
        let tweenDuration: number = 1.0;  // 缓动的时长
        tween(this.node)
            .to(tweenDuration, { position: new Vec3(0, 10, 0) }, {  // 这里以node的位置信息坐标缓动的目标 
                easing: "backIn",                                   // 缓动函数，可以使用已有的，也可以传入自定义的函数。      
                onStart: (target?: object) => {                     // 回调，当缓动动作启动时触发。

                },
                onUpdate: (target: Vec3, ratio: number) => {        // onUpdate 接受当前缓动的进度
                    this.node.position = target;                    // 将缓动系统计算出的结果赋予 node 的位置
                },
                onComplete: (target?: object) => {                  // 回调，当缓动动作更新时触发。

                },
                progress: (start: number, end: number, current: number, ratio: number): number => {
                    // 返回自定义插值进度
                    return 0.0;
                }
            })
            .start();                                               // 调用 start 方法，开启缓动



    }

    update(deltaTime: number) {

    }
}

4.3缓动函数的嵌套：小球不停的上下跳动

import { _decorator, Component, Node, Vec3, tween, Label, EventTouch, Tween } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('test2')
export class test2 extends Component {
    //1.获取组件
    @property(Node) myimgs: Node;
    @property(Node) button: Node;
    @property(Node) btnright: Node;
    @property(Node) btnleft: Node;
    start() {

        this.button.on(Node.EventType.TOUCH_START, () => {
            this.myAnimation();
        }, this)

    }
    myAnimation() {
        const obj = {
            n: 0
        }
        tween(obj).to(0.5, { n: 200 }, {
            onUpdate: (target, ratio) => {
                this.myimgs.setPosition(0, obj.n, 0);
            },
            easing: 'quartOut',//跳起
        }).to(0.5, { n: 0 }, {
            onUpdate: (target, ratio) => {
                this.myimgs.setPosition(0, obj.n, 0);
            },
            easing: 'quadIn',//落下
        }).union().repeatForever().start();

        //  union	将上下文的缓动动作打包成一个
        //repeatForeve	一直重复执行

        //逻辑如下：
            //1.点击按钮，触发缓动函数；
            //2.先0.5秒跳起，然后0.5落下
            //3.union将这个动作合并为一个，
            //4.repeatForever将这个动作一直下去
    }

    update(deltaTime: number) {

    }
}