FairyGUI学习记录

创建UI

使用FGUI创建UI界面的时候,可以选择创建用UIPackage创建组件,然后GRoot.inst添加到Stage里,层级根据子对象的排列顺序显示;
也可以选择创建GameObject添加UIPanel脚本,在UIPanel里赋值包名和组件名显示UI界面,但是需要手动设置层级,不能直接使用UIPanel的sortingOrder属性设置层级,需要使用SetSortingOrder(1, true)设置,第一个参数是层级,第二个设置为true才能使用层级,不然会重复显示UI;

UI管理

我的项目里使用Lua进行管理,设置FairyGUIManager = {};
Lua表可以根据下标访问,表结构为FairyGUIManager = { [1] = { componentName = “UI名” , panel = panel (此处panel是添加的UIpanel脚本,方便后续对UI的管理,可以直接使用gameObject访问UI的游戏对象,也可以使用panel.ui访问FairyGUI的ui组件 ) } }

创建UIPanel

设置变量UISortingLayer = 1;
table.insert(FairyGUIManager, { componentName = “UI名” , panel = panel })
panel:SetSortingOrder(UISortingLayer, true);
UISortingLayer = UISortingLayer + 1 ;

卸载UIPanel

for i = #FairyGUIManager , 1, -1 do
if FairyGUIManager[i].componentName = “UI名” then
UnityEngine.GameObject.Destroy(FairyGUIManager[i].panel.gameObject);
table.remove(FairyGUIManager[i]);
end
end
UISortingLayer = UISortingLayer - 1;

Lua表下标自动排列,新界面的层级会放置到最高一个;

FairyGUIManager.lua代码

我这里使用UIPanel方式创建,若项目弹出界面可以使用Popup的方式创建UI;

---
--- Generated by EmmyLua(https://github.com/EmmyLua)
--- Created by 乄风铃彡.
--- DateTime: 2020/6/10 16:55
---

FairyGUIManager = {}
FalryGuIManager. FairyGUIPanel = {}; -- 层级管理, FairyGUIManager = { [1] = { componentName = "UIPanelName"(string 类型名字), panel = panel(UIPanel 脚本)}}
local FairyGUlInit = 0;
local UIPanelNum = 1;
function FairyGUIManager.Init ()
    FairyGurInit = 1;
    -- 去除相机UI层
    UnityEngine.Camer.main.cullingMask = bit.band(UnityEngine.Camera.main.cullingask, bit.bnot(bit.lshift(1, UnityEngine.LayerMask.NameToLayer("UI"))));
    FairyGurManager.Root = UnityEngine.Gameobject.New();
    FalryGuIManager.Root.name = "FairyGUIManager";
    UnityEngine.Gameobject.DontDestroyonLoad(FairyGUIManager.Root);
    --FairyGUI适配缩放
    GRoot.inst.width = UnityEngine.Screen.width;
    GRoot.inst.height = UnityEngine.Screen.height;
    GRoot.inst:SetContentscaleFactor(UnityEngine.Screen.width, UnityEngine.Screen.height, FairyGUI.UIContentscaler.ScreenMlatchMlode.Matchwidth);
    -- 设计分辨率是1920 * 1080
    FairyGUIManager.ScreenScale = (UnityEngine.Screen.width * 1.0) / 1920;
    --剪裁方案适配
    GRoot.inst:SetcontentscaleFactor((FairyGUIManager.Screenscale));
end
function FairyGUIManager.Createpanel(packageName, componentName)
    if FairyGUlInit == 0 then
        FairyGUIManager.Init();
    end
    --创建UIPanel
    local panelObj = UnityEngine.Gameobject.New();
    panelObj.layer = UnityEngine.LayerMask.NameToLayer("UI");
    panelObj.name = componentName;
    panelObj.transform:SetParent(FairyGUIManager.Root, true);
    local panel = panelObj:Addcomponent(typeof(UIPanel));
    panel.fitScreen = FairyGUI.Fitscreen.Fitsize;
    UIPackage.AddPackage('UI/' .. packageName);
    panel.packageName = packageName;
    panel.componentName = componentName;
    panel:CreateUI();
    --设置成射线检测类型
    panel:SetHitTestMode(HitTestModeRaycast);
    --panel.ui:SetSize(unityEngine.Screen.width, UnityEngine.Screen.height);
    panel.ui:MakeFullscreen();
    local tmpVector = panel:Getcomponent(typeof(UnityEngine.BoxCollider)).size;
    --全局缩小方案适配
    --tmpVector.x = UnityEngine.Screen.width;
    --tmpVector.y = UnityEngine.Screen.height;
    -- 建材方案适配
    tmpVector.x = 1920;
    tmpVector.y = 1920 / (UnityEngine.Screen.width / UnityEngine.Screen.height);
    panel:Getcomponent(typeof(UnityEngine.BoxCollider)).size = tmpVector;
    panel:Getcomponent(typeof(UnityEngine.BoxCollider)).center = Vector3.New(tmpVector.x / 2, -tmpVector.y / 2, 0);

    FairyGUIManager.FairyGUIPanel[UIPanelNum] = { componentName = componentName, panel = panel };
    FairyGUIManager.FairyGUIPanel[UIPanelNum].panel:SetSortingOrder(UIPanelNum, true);
    UIPanelNum = UIPanelNum + 1;
    return panel.ui;
end
--todo 设成对象池加载界面动态创建Gameobject
function FairyGUIManager.DisposePanel(componentName)
    local hasCom = false;
    for i = 1, #FairyGUIManager.FairyGUIPanel do
        if FairyGUIManager.FairyGUIPanel[i].componentName == componentName then
            UnityEngine.Gameobject.Destroy(FairyGUIManager.FairyGUIPanel[i].panel.gameobject);
            table.remove(FairyGUIManager.FairyGUIPanel[i]);
            UIPanelNum = UIPanelNum - 1;
            --return
            hascom = true;
        end
        if hascom then
            if i == #FairyGUIManager.FairyPanel then
                return ;
            end
            FairyGUIManager.FairyGUIPanel[i] = FairyGUIManager.FairyGUIPanel[i + 1];
        end
    end
end
function FairyGUIManager.Createcomponent(packageName, componentName)
    if FairyGurInit == 0 then
        FairyGUIManager.Init();
    end
    UIPackage.AddPackage('UI/' .. packageName);
    local view = UIPackage.CreateObj(packageName, componentName);
    -- Fairy大小适配
    view:SetSize(GRoot.inst.width, GRoot.inst.height);
    GRoot.inst:AddChild(view);
    -- FairyGUIManager 表管理UI界面
    FairyGUIManager.FairyGUIPanel[componentName] = view;
    return view;
end

function FairyGUIManager.DisposeComponent(componentName)
    FairyGUIManager.FairyGUIPanel[componentName]:Dispose();
    FairyGUIManager.FairyGUIPanel[componentName] = nil;
end
return FairyGUIManager;

ToLua使用

functions.lua 里添加一个方法

--- multiphandler方法,可以输入更多变量,用于FGUI里的按钮Add方法(如果你使用的是ToLua,在Scripting Define Symbols里加上 FAIRYGUI_TOLUA。XLUA则不需要。)
--- 例如:self.view.onClick:Add(multiphandler(self, self.BtnClick, self.view.name));
--- 把self.view.name 当作参数传到self.BtnClick方法里;
--- 使用:
--function Test:BtnClick( ... )
--    local val = select(1, ... );
--    local data = val[1];
--    print("第一个参数是" .. data);
--end

function multiphandler( ... )
    local val = { ... };
    local val2 = {select(3, ... )};
    return function(...)
        val[2](val[1], val2);
    end
end

猜你喜欢

转载自blog.csdn.net/weixin_44054505/article/details/107189827