第八课 事件系统与计时器

一.如何访问别的节点

1.通过属性检查器设置节点来访问别的节点

2.通过代码子节点父节点的访问

①通过子节点名字访问

②通过子节点数组访问

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {
        //sp2脚本挂载在cavans节点下
        //①通过子节点的名字访问子节点
        console.log("输出cavans节点下子节点background", this.node.getChildByName("background"));
        //②通过子节点数组访问子节点
        console.log("输出cavans节点下第0个子节点", this.node.children[0]);
        console.log("输出cavans节点下第1个子节点", this.node.children[1]);
        console.log("输出cavans节点下第2个子节点", this.node.children[2]);
        console.log("输出cavans节点下第3个子节点", this.node.children[3]);
    }
}

③通过属性访问父节点

④通过方法访问父节点

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //③通过属性访问父节点
        console.log("输出cavans节点的父节点cc.Scene", this.node.parent);
        //④通过方法访问父节点
        console.log("输出cavans节点的父节点cc.Scene", this.node.getParent());
    }
}

⑤通过场景节点树路径访问节点

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //通过节点树访问Cavans的子节点cocoslogo
        let cocoslogo = cc.find("Canvas/cocoslogo");
        console.log(cocoslogo);
    }
}

3.Cavans与Camera

①Cavans:用来做屏幕适配,建议所有UI节点及可渲染节点都放在Cavans节点下.

②:Camera:RPG游戏用于锁定主角视角

二.节点的常用属性与修改

1.节点常用属性

①Position→位置

②Rotation→旋转

③Scale→缩放

④Anchor→锚点

⑤Size→尺寸

⑥Color→颜色

⑦Opacity→不透明度

⑧Skew→倾斜度

⑨Group→组

2.节点常用属性修改

this:当前的脚本组件

this.node:当前脚本所绑定的节点

①直接修改属性值

②调用set方法

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        console.log("cavans属性", this.node);
        //①直接修改属性值
        this.node.opacity = 100
        //②调用set方法修改属性值
        this.node.setScale(1.2,1.2);
    }
}

三.计时器

1.定时计时器

①局部函数方法

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //开启定时计时器 参数1:局部函数 参数2:时间
        this.schedule(
            function () {
                console.log("定时执行计时器");
            }
            , 5)
    }
}

②类的成员函数方法

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //开启定时计时器 参数1:成员函数 参数2:时间
        this.schedule(this.CallFun, 3)
    }
    CallFun(){
        console.log("成员函数方法执行计时器")
    }
}

2.执行一次的计时器

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //只执行一次的计时器 参数1:函数 参数2:时间
        this.scheduleOnce(
            function () {
                console.log("只执行一次的计时器");
            }
            , 3)
    }
}

3.关闭计时器

①关闭指定定时器

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    onLoad() {    //sp2脚本挂载在cavans节点下
        //开启定时器
        this.schedule(this.CallFun, 3)
        this.scheduleOnce(function () {
            console.log("关闭计时器");
            //关闭计时器 参数1:callFun函数
            this.unschedule(this.CallFun);
        }.bind(this)
            , 8
        )
    }
    CallFun() {
        console.log("成员函数方法执行计时器")
    }
}

②关闭当前组件所有计时器

        //关闭当前组件所有定时器
        this.unscheduleAllCallbacks();

四.切换场景

cc.director.loadScene("场景名")

五.事件系统

鼠标事件

触摸事件

键盘事件

重力传感事件

自定义事件

六.自定义事件详解

全局事件分发器只有一个,把接受到的事件分发给不同的事件监听器,事件监听器调用回调函数进行处理.

1.创建事件监听

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    start() {
        //创建事件监听器
        let ec=new cc.EventTarget();
        //事件监听 参数1:事件名 参数2:事件回调函数
        ec.on("Dead",function(p1,p2,p3,p4){
            console.log("监听到了Dead事件")
            console.log("参数1是",p1,"\n参数2是",p2,"\n参数3是",p3,"\n参数4是",p4)
        })
        //发送事件 参数1:事件名 参数2:后续参数是回调函数的参数
        ec.emit("Dead",1,2,3,"参数4");
    }
}

2.取消事件监听

//参数1:事件名
ec.off("Dead");

3.跨脚本监听事件

①创建全局事件监听管理类

//全局自定义事件发送接收管理类
//在scr文件夹下创建Mar文件夹
//在Mar文件夹下创建eventTargetMar.ts
export default class eventTargetMar {
    static ins: cc.EventTarget;
    static getInstance() {
        if (!this.ins) {
            //没有初始化 先进行初始化
            this.ins = new cc.EventTarget();
        }
        return this.ins;
    }
}

②sp2脚本进行监听事件

//引入eventTargetMar类
import eventTargetMar from "./Mar/eventTargetMar";
const { ccclass, property } = cc._decorator;

@ccclass
export default class sp2 extends cc.Component {
    start() {
        //获取全局自定义单实例类赋值成变量ecMar
        let ecMar=eventTargetMar.getInstance();
        //事件监听 参数1:事件名 参数2:事件回调函数
        ecMar.on("Dead",function(p1,p2,p3,p4){
            console.log("跨脚本成功监听到了Dead事件")
            console.log("参数1是",p1,"\n参数2是",p2,"\n参数3是",p3,"\n参数4是",p4)
        })
    }
}

③sp1脚本进行发送事件

import eventTargetMar from "./Mar/eventTargetMar";

const { ccclass, property } = cc._decorator;

@ccclass
export default class sp1 extends cc.Component {
    start() {
        let evMar = eventTargetMar.getInstance();
        //事件发送
        evMar.emit("Dead", 1, 2, 3, "参数4");
    }
}