egret学习记录(二)--fairyGUI实例学习以及重点(一)(2018/03/08)

fairyGUI有个导出代码的功能,类似于MornUI生成UI文件,写代码的时候能够直接点出对应组件来,不用再按名字去取了。这个功能觉得方便的可以用,觉得多一堆文件累赘的可以不用。



注意这里,如果不想包里所有的组件都在创建的时候实例化,请勾选“不生成使用默认名称的成员”,然后需要能够点出来的组件请自己重命名。这里推荐不勾选“使用名称获取成员对象”,这样会使用索引来从包里创建组件。点击发布,我们就由如下目录结构:

得到如下几个文件:


然后开始写代码,在项目入口类Main.ts中,我们需要在addPackage之后添加类扩展,即实例化时用生成的类代替包中的组件。

    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
        fairygui.UIPackage.addPackage("test");
        Test.TestBinder.bindAll();

        this.addChild(fairygui.GRoot.inst.displayObject);

        let mainPanel:MainPanel = new MainPanel();
    }

MainPanel类中,就可以不再自己写从包中创建组件的代码,直接实例化fairyGUI打包生成的类即可,示例代码如下:

class MainPanel {
    private _view:Test.Test = Test.Test.createInstance();
    private cc:fairygui.Controller;
    public constructor() {
        this._view.setSize(fairygui.GRoot.inst.width, fairygui.GRoot.inst.height);
        fairygui.GRoot.inst.addChild(this._view);
        this.cc = this._view.xuanzhong;
        this.cc.selectedIndex = 3;
        this._view.btn_1.addClickListener(this.onClick1, this);
        this._view.btn_2.addClickListener(this.onClick2, this);
        this._view.btn_3.addClickListener(this.onClick3, this);
    }

    private onClick1(evt:MouseEvent):void
    {
        this.cc.selectedIndex = 0;
    }
    private onClick2(evt:MouseEvent):void
    {
        this.cc.selectedIndex = 1;
    }
    private onClick3(evt:MouseEvent):void
    {
        this.cc.selectedIndex = 2;
    }
}

感兴趣的同学可以使用这种方法。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值