Fabrication of fairygui simple Backpack

FairyGUI Making of simple Backpack

Results the preview ：

One 、 Create a new project

Rename it

Two 、 Make backpack pop-up

1、 Create a new container component for the backpack （BagWindow）

2、 Create a new window frame component （WindowFrame）

3、 Import material resources

Click here to download

4、 stay WindowFrame In the operation

（1） Drag into the background of the backpack

And will n0 Rename it to BG（ Backpack background ）

（2） New close button （ButtonClose）

（3） Create a new graphic as a placeholder （dragArea—— Drag area ）

5、 stay BagWindow In the operation

（1） take WindowFrame Drag in BagWindow, And set its component size

（2） Drag into the list to load game objects

（3） Make a grid in the list —— The new button Item

（4） edit Item

Drag into the background

Drag in Title


Drag loader

6、 stay Main In the operation

（1） Make a picture display button ItemView

（2） Yes ItemView Make some improvements

（3） New backpack pop-up button BagButton

（4） double-click BagButton Button to edit it

7、 go back to BagWindow, Assign a value to

rename , Make some small changes .

3、 ... and 、 Package, export and publish

Four 、Unity It shows that

1、 newly build Unity project

2、 Download from the resource store FairyGUI

 When importing after downloading , You need to pay attention to , To put Examples Below Bag Delete the . Because it was not deleted before importing , It leads to some strange phenomena behind .

3、Unity It shows that

5、 ... and 、 Code control

1、 Create two new scripts

 One is the backpack pop-up script BagWindow, One is the main script Bag.

2、 Edit script

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、 Running effect

4、 Load the contents of the backpack

（1） Change my BagWindow List names in ：itemList, as well as ItemView Inside title, And redistribute

（2） Continue coding to realize the function

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);  // Set the initial position where the backpack pop-up window appears 
        mainUI.GetChild("bagButton").onClick.Add(() => {
     bagWindow.Show(); });
    }

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

6、 ... and 、 Final rendering