• FairyGUI试用


    FairyGUI官网:https://www.fairygui.com/

    FairyGUI版本:2022.1.0p1

    cocos版本:2.4.4

    Laya收购了FairyGUI,看到某些公司也有在使用,下载下来看看。

    FairyGUI优点:

    1.提供了更丰富的组件。比cocos自带组件要多,例如虚拟列表

    2.一套UI多个游戏引擎可用。比如unity做手游,cocos发小游戏平台的。或者玩多个平台的游戏开发者,只学fairygui不用再去细学每个引擎的UI了。

    3.drawcall优化方案。采用矩形碰撞判断组件是否遮挡,调整深度排序,尽量将同纹理的图片摆在一起,减少dc数。

    4.多国语言和分支。根据语言类型替换文本和图片,而且在编辑UI时就能看到显示效果。

    下载FairyGUI

    https://www.fairygui.com/download

    绿色版,不需要安装,在这个编辑器下编辑UI。

    发现个bug输入法不能打字,必须将编辑器置于后台,然后再置于前台才能打字。

    下载FairyGUI的演示Demo

    https://github.com/fairygui/FairyGUI-cocoscreator

    可以看看fairygui都支持哪些UI,大致心里有个数,可以看到就是游戏中常用的UI。

    cocos到现在都没有官方的虚拟列表... 

    在cocos中使用fairygui运行库

    新建一个cocos空项目,把从github上下载的demo中fairygui运行库复制到新项目中。

    可以看到这个库有将近800kb,构建项目发布后有350kb左右。

    在cocos中选择fairygui.js,在属性面板勾选允许编辑器加载

    在vscode中输入fgui有提示,则表示导入成功了。

    使用FairyGUI编辑一个简单页面

    创建了一个登录页,比较简单,只有背景、开始按钮、版本文本。

    编辑后,发布得到两个文件,图片已经自动合图了。

    将这2个文件放入cocos中

     

    代码中创建这个登录页

        onLoad() {
            //创建UI根节点
            fgui.GRoot.create();
            //加载UI包
            fgui.UIPackage.loadPackage("UI/Login", function (err) {
                let view: fgui.GComponent = fgui.UIPackage.createObject("Login", "LoginScene").asCom;
                fgui.GRoot.inst.addChild(view);
            });
        }
    

    显示效果

    获取组件通过getchild获取

    const { ccclass, property } = cc._decorator;
    
    @ccclass
    export default class MainScene extends cc.Component {
    
        onLoad() {
            //创建UI根节点
            fgui.GRoot.create();
            //加载UI包
            fgui.UIPackage.loadPackage("UI/Login", function (err) {
                let view: fgui.GComponent = fgui.UIPackage.createObject("Login", "LoginScene").asCom;
                fgui.GRoot.inst.addChild(view);
    
                //按钮
                view.getChild("startBtn").onClick(() => {
                    console.log("点击开始");
                }, this);
    
                //文本
                view.getChild("verLab").asTextField.text = "v1.2.3";
            });
        }
    }
    

     

    到此一个简单的fairygui界面就制作完成了... ... 

     

  • 相关阅读:
    兄弟连学python——MongoDB相关
    兄弟连学python——redis相关
    python学习——tkinter实战(猜价格)
    python学习——tkinter实战(计算器)
    python学习——while实战小练习
    python学习——循环结构
    python学习——数据类型转换
    python学习——通过while循环语句实现九九乘法表的四种表达方式
    python—Html表单
    python—Redis简介及应用
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/16160000.html
Copyright © 2020-2023  润新知