第十二课 斗地主项目课 ② 大厅场景搭建

一.blockinputevents组件

防止触摸事件穿透底层节点冒泡分发

this.node.addComponent(cc.BlockInputEvents);//通过代码添加cc.BlockInputEvents组件

二.typescript模块

1.引入脚本,加载脚本模块

①import + 模块名字+ from+模块来源的ts文件路径

import eventTargetMar from "./mar/eventTargetMar"

②引入nameArr数组和yearArr数组

//assets/script/mar/test02.ts
import { nameArr,yearArr } from "../test01";
const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    start () {
        console.log(nameArr,yearArr);
    }
}

③从test01.ts文件内引入全部导出的变量并将这些变量命名到test01Com下

//assets/script/mar/test02.ts
import * as test01Com from "../test01"
const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    start() {
        console.log("全部引用的变量", test01Com.nameArr, test01Com.yearArr);
    }
}

2.导出

①默认导出整个模块

export default

②普通导出模块内变量

//assets/script/test01.ts
export let nameArr=[
    "小赵","小钱","小孙"
]
export let yearArr=[
    18,22,41
]

三.箭头函数

箭头函数是局部函数的一种写法

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    start() {
        //局部函数声明方法①
        let func1 = function () {
            console.log("这是一个局部函数111");
        }
        func1();//执行函数

        //局部函数声明方法②
        function func2() {
            console.log("这是一个局部函数222")
        }
        func2();//执行函数

        let func3 = () => {
            console.log("这是一个局部函数333")
        }
        func3();
        let func4 = () => {console.log("这是一个局部函数444") };
        func4()
        let func5 = () => { return '局部函数555' };
        console.log("局部函数5的返回值是",func5())
        let func6 = (a, b) => a + b
        console.log("局部函数6的值是",func6(2,3))
    }
}

四.在vscode中打cocoscreator断点

开发者 vs code工作流 安装vs code插件 debugger for chrome 添加chrome debug配置 打开vs code 运行和调试 creator debug lauch chrome

五.mvc架构

工厂 单实例 修饰 mvc mvvm

model:功能模块

view:UI模块

controller:连接view与model

六.大厅子功能模块开发

七.cocoscreator游戏的挂脚本方式

1.通过cocoscreator属性检查器挂脚本

2.通过代码挂脚本

        //在mall节点挂载test01脚本
        let mallnode01=cc.find("Canvas/hallBg/mall")
        mallnode01.addComponent(test01);

3.调用子节点的成员方法

//hallTS.ts
import mallTS from "./mallTS";
const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {
    //声明任务,商城,活动按钮变量
    @property(cc.Node)
    hallMisson: cc.Node = null;
    @property(cc.Node)
    hallMall: cc.Node = null;
    @property(cc.Node)
    hallActivities: cc.Node = null;
    //声明商城面板变量
    @property(cc.Node)
    hallMallPanel: cc.Node = null;

    onLoad() {
        let self = this;
        //获取任务,商城,活动按钮节点
        this.hallMisson = cc.find("Canvas/hallBg/dating_xiakuang/dating_renwu");
        this.hallMall = cc.find("Canvas/hallBg/dating_xiakuang/dating_shangchen");
        this.hallActivities = cc.find("Canvas/hallBg/dating_xiakuang/dating_huodong");
        //获取商城面板节点
        this.hallMallPanel = cc.find("Canvas/hallBg/mall");
        //商城按钮回调事件
        this.hallMall.on(cc.Node.EventType.TOUCH_START, function () {
            self.hallMallPanel.active = true;//激活商城面板
        })
        //在商城面板添加脚本
        this.hallMallPanel.addComponent(mallTS);
        //获取商城面板子节点脚本
        let hallmalpanelsrc = this.hallMallPanel.getComponent(mallTS)
        //调用商城面板子节点方法getmallname
        hallmalpanelsrc.getmallname();
    }
}

//mallTS.ts
const {ccclass, property} = cc._decorator;
@ccclass
export default class mallTS extends cc.Component {
    getmallname(){
        console.log("调用mallTS脚本的getmallname方法")
    }
}