FairyGUI简单背包的制作

FairyGUI简单背包的制作

效果预览：

一、创建新项目

重命名一下

二、制作背包弹窗

1、新建背包的容器组件（BagWindow）

2、新建窗口框架组件（WindowFrame）

3、导入素材资源

点击此处下载获取

4、在WindowFrame中操作

（1）拖入背包的背景

并将n0重命名为BG（即背包背景）

（2）新建关闭按钮（ButtonClose）

（3）新建图形作为一个占位（dragArea——拖拽区域）

5、在BagWindow中操作

（1）将WindowFrame拖入BagWindow，并设置其组件大小

（2）拖入列表承载游戏物体

（3）在列表中制作格子——新建按钮Item

（4）编辑Item

拖入背景图

拖入Title


拖入装载器

6、在Main中操作

（1）制作图片显示按钮ItemView

（2）对ItemView做一些完善

（3）新建背包弹窗按钮BagButton

（4）双击BagButton按钮对它进行编辑

7、回到BagWindow，对其赋值

重命名，做一些小小的更改。

三、打包导出发布

四、Unity中显示

1、新建Unity项目

2、下载资源商店里的FairyGUI

下载后导入时，需要注意一下，要把Examples下面的Bag删除掉。因为之前导入的时候就是没有删除，导致后面出现一些奇奇怪怪的现象。

3、Unity中显示

五、代码控制

1、新建两个脚本

一个是背包弹窗脚本BagWindow，一个是主要脚本Bag。

2、编辑脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class BagWindow : Window
{
    public  BagWindow()
    {

    }
    
    protected override void OnInit()
    {
        this.contentPane = UIPackage.CreateObject("Bag", "BagWindow").asCom;
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class Bag : MonoBehaviour
{
    private GComponent mainUI;
    private GButton playerView;
    private BagWindow bagWindow;
    void Start()
    {
        mainUI = GetComponent<UIPanel>().ui;
        playerView = mainUI.GetChild("playerView").asButton;
        playerView.onClick.Add(UseItem);
        bagWindow = new BagWindow();
        mainUI.GetChild("bagButton").onClick.Add(() => { bagWindow.Show(); });
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    private void UseItem()
    {

    }
}

3、运行效果

4、加载背包里的内容

（1）更改一下BagWindow里的列表名字：itemList，以及ItemView里的title，并重新发布

（2）继续编码实现功能

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class BagWindow : Window
{
    private GList list;
    private GButton playerView;
    public BagWindow(GButton targetButton)
    {
        playerView = targetButton;
    }
    
    protected override void OnInit()
    {
        this.contentPane = UIPackage.CreateObject("Bag", "BagWindow").asCom;
        list = this.contentPane.GetChild("itemList").asList;
        list.itemRenderer = RenderListItem;
        list.numItems = 20;
        for (int i = 0; i < list.numItems - 10; i++) 
        {
            GButton button = list.GetChildAt(i).asButton;
            button.onClick.Add(() => { ClickItem(button); });
        }
    }

    private void RenderListItem(int index, GObject obj)
    {
        GButton button = obj.asButton;
        button.icon = UIPackage.GetItemURL("Bag", "i" + index);
        button.title = index.ToString();
    }

    private void ClickItem(GButton button)
    {
        playerView.title = button.title;
        playerView.icon = button.icon;
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class Bag : MonoBehaviour
{
    private GComponent mainUI;
    private GButton playerView;
    private BagWindow bagWindow;
    
    void Start()
    {
        mainUI = GetComponent<UIPanel>().ui;
        playerView = mainUI.GetChild("playerView").asButton;
        playerView.onClick.Add(UseItem);
        bagWindow = new BagWindow(playerView);
        bagWindow.SetXY(121, 63);  //设置背包弹窗出现的初始位置
        mainUI.GetChild("bagButton").onClick.Add(() => { bagWindow.Show(); });
    }

    private void UseItem()
    {
        playerView.icon = null;
        playerView.title = "空白";
    }
}

六、最终效果图