Fairygui loop list

FairyGUI Loop list

 Realization effect ： stay Unity in , You can cycle through the list with the mouse , And when browsing the current page , It has an effect of being close to big and far away .

One 、 Import resources

Two 、 The new button

3、 ... and 、 Design list

Four 、 Loader dynamic load picture button

 If there are tens of thousands of buttons , We can't create one by one , It's time to be in Unity Resources for dynamically loading picture buttons in , Therefore, the loader is introduced .

Button size is 248×378, Then the loader should also be 248×378. Then classify its position as 0,0.


Enter the list again , Add a few more objects to it .

5、 ... and 、 Packaging releases

6、 ... and 、Unity It shows that

7、 ... and 、 Write code

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

public class LoopList : MonoBehaviour
{
    
    private GComponent mainUI;
    private GList list;
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("n0").asList;  //n0 yes FairyGUI List in 
        list.SetVirtualAndLoop();  // Set the list as a virtual list （FGUI Regulations ： If you use lists , You must use a virtual list ）
        list.itemRenderer = RenderListItem;  // call list The rendering function inside , It is a delegate type variable , So assign it a method 
        list.numItems = 5;  // Set the length of the list 
    }
    
    private void RenderListItem(int index, GObject obj)
    {
    
        GButton button = obj.asButton;
        button.icon = UIPackage.GetItemURL("LoopList", "n" + (index + 1));  // Get dynamic URL
    }
}

Compile operation , go back to Unity Found an error . Originally in FairyGUI Forgot to drag project resources into , Manually drag it .


Republish it again

here , go back to Unity, The operation results are as follows . Find out “ Chapter two ”、“ The third chapter ” The pictures below are “ Chapter one ” The picture below . What's the reason ？ Because before we were FairyGUI I have been given Button1 A rendering , Obviously this is not possible . So we need to render and delete its own image . Directly through icon Just load it .



Another place is , find LoopList list , Set its overflow handling to “ Horizontal scrolling ”.

Release again , All working well .

8、 ... and 、 Running effect

Nine 、 Further refinement —— Special effects of near, far and small

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

public class LoopList : MonoBehaviour
{
    
    private GComponent mainUI;
    private GList list;
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("n0").asList;  //n0 yes FairyGUI List in 
        list.SetVirtualAndLoop();  // Set the list as a virtual list （FGUI Regulations ： If you use lists , You must use a virtual list ）
        list.itemRenderer = RenderListItem;  // call list The rendering function inside , It is a delegate type variable , So assign it a method 
        list.numItems = 5;

        list.scrollPane.onScroll.Add(DoSpecialEffect);
        DoSpecialEffect();
    }

    private void DoSpecialEffect()
    {
    
        float listCenter = list.scrollPane.posX + list.viewWidth / 2;
        //scrollPane Is the width of the current list ;viewWidth Is the width of the list itself 
        for (int i = 0; i < list.numChildren; i++)  //numChildren Is the currently rendered object , That's the runtime Game The number that can be seen in 
        {
    
            GObject item = list.GetChildAt(i);
            float itemCenter = item.x + item.width / 2;
            float itemWidth = item.width;
            float distance = Mathf.Abs(listCenter - itemCenter);
            if (distance < itemWidth)
            {
    
                float distanceRange = 1 + (1 - distance / itemWidth) * 0.2f;
                item.SetScale(distanceRange, distanceRange);
            }
            else
            {
    
                item.SetScale(1, 1);
            }
        }
    }
    private void RenderListItem(int index, GObject obj)
    {
    
        GButton button = obj.asButton;
        button.SetPivot(0.5f, 0.5f);  // Set the anchor point as the center 
        button.icon = UIPackage.GetItemURL("LoopList", "n" + (index + 1));  // Get dynamic URL
    }
}

Associate the list and button with the container respectively

After being released in Unity There will be no problem in running .

Ten 、 The final perfect rendering