[UI Programming in Unity] How to use a code framework to control a server server selection panel

This article was originally written by Zhiyuan

Included in the column:UI_Unity column

?Choose a server?

Article directory

• • ?Choose server?
  • Foreword
  • （==0==）Storage format of server data
  • • Write Excel and convert to Json
  • （==1==）Player data class
  • （==1==）District server data class
  • （==1==）Selection button data class
  • （==1==）Server selection button data class
  • （==1==）Server Panel
  • （==3==）Select to enter the panel
  • ?related articles?

Foreword

?****

（0）Storage format of server data

Write Excel and convert it to Json

###

• Excel to Json

[
{<!-- -->"ID":101,"name":"Broader Ocean 1","state":1,"isNew":"fasle"},
{<!-- -->"ID":102,"name":"Broader Sea and Sky 2","state":2,"isNew":"fasle"},
{<!-- -->"ID":103,"name":"Broader Sea and Sky 3","state":3,"isNew":"fasle"},
{<!-- -->"ID":104,"name":"Broader Sea and Sky 4","state":4,"isNew":"fasle"},
{<!-- -->"ID":105,"name":"Broader Sea and Sky 5","state":5,"isNew":"fasle"},
{<!-- -->"ID":106,"name":"Broader Sea and Sky 6","state":1,"isNew":"fasle"},
{<!-- -->"ID":107,"name":"Broad Sky 7","state":2,"isNew":"fasle"},
{<!-- -->"ID":108,"name":"Broad Sky 8","state":3,"isNew":"fasle"},
{<!-- -->"ID":109,"name":"Aion 1","state":4,"isNew":"fasle" },
{<!-- -->"ID":110,"name":"Aion 2","state":5,"isNew":"fasle" },
{<!-- -->"ID":111,"name":"Aion 3","state":1,"isNew":"fasle" },
{<!-- -->"ID":112,"name":"Aion 4","state":2,"isNew":"fasle" },
{<!-- -->"ID":113,"name":"Aion 5","state":3,"isNew":true},
{<!-- -->"ID":114,"name":"Aion 6","state":4,"isNew":true},
{<!-- -->"ID":115,"name":"Aion 7","state":5,"isNew":true},
{<!-- -->"ID":116,"name":"Aion 8","state":1,"isNew":true},
{<!-- -->"ID":117,"name":"Aion 9","state":2,"isNew":true},
{<!-- -->"ID":118,"name":"Aion 10","state":3,"isNew":true},
{<!-- -->"ID":119,"name":"Aion 11","state":4,"isNew":true},
{<!-- -->"ID":120,"name":"Aion 12","state":5,"isNew":true},
{<!-- -->"ID":121,"name":"Aion 13","state":1,"isNew":true},

]

• Create a Json file in the dynamic loading folder SteamingAsset folder and put the Json data converted from the Excel table into it.

（1）Player data class

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//-------------------------------------
//----------------------------------
//___________project:       
//___________ Function: Player data management
//___________Creator:______Zhiyuan______
//____________________________
//-------------------------------------
public class PlayerData
{<!-- -->
    public string userName;
    public string password;
    //Is this the first time to choose a server?
    public bool isNew = true;
    //Temporary server data
    public string presentServerData;
    //Select server data data
    public ServerData serverData;

}

（1）District server data class

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//-------------------------------------
//----------------------------------
//___________project:       ______________
//___________ function: District server data
//___________Creator:_______Zhiyuan______
//____________________________
//-------------------------------------
public class ServerData
{<!-- -->
    public int id; //ID area sequence
    public string name; //area name
    public int state; //state 1~5
    public bool isNew; //Is it a new server?

 
}

（1）Selection button data class

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
//-------------------------------------
//----------------------------------
//___________project:       ______________
//___________ Function: Left selection panel button logic
//___________Creator:______Zhiyuan______
//____________________________
//-------------------------------------
public class LeftItemData :MonoBehaviour
{<!-- -->
    public Button item;
    public Text rangeText;

    //Start zone server
    public int startIndex;
    public int endIndex;
        


    /// <summary>
    /// Listening event collection
    /// </summary>
    public void AllEvent()
    {<!-- -->
        //Listening for button click events
        item.onClick.AddListener(()=>
        {<!-- -->
            //Update the selection of regional server content
        });
    }
    /// <summary>
    /// Provide external methods to change the display area and server
    /// </summary>
    /// <param name=""></param>
    public void ChangeTextShow(int start, int end)
    {<!-- -->
        startIndex = start;
        endIndex = end;
        rangeText.text = start + "-" + end + "area";
    }

    
    public void UpdataServe()
    {<!-- -->

    }
}

（1）Server selection button data class

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.U2D;
using UnityEngine.UI;
//-------------------------------------
//----------------------------------
//___________project:      
//___________ Function: Single Button_Server Data
//___________Creator:______Zhiyuan_______
//____________________________
//-------------------------------------
public class ChooseItemData :MonoBehaviour
{<!-- -->
    //Information data of the current server
    public ServerData nowInfo;
    //Self button
    public Button slefBtu;
    //New server mark map
    public Image isNew;
    //Status mark map
    public Image state;
    //interval name
    public Text serverID;
    //Whether it is the last selected server
    public bool isLast = false;


    private void Awake()
    {<!-- -->
        slefBtu = GetComponent<Button>(); //Load its own Button control
        state = transform.GetChild(2).GetComponent<Image>(); //Initialization
        isNew = transform.GetChild(1).GetComponent<Image>(); //Load new server image
        AllEvent();
    }


    /// <summary>
    /// Load the data of the current item
    /// </summary>
    /// <param name="ItemData"></param>
    public void UpdataItemInfo(ServerData ItemData)
    {<!-- -->
        serverID.text = ItemData.id.ToString() + "area" + ItemData.name; //Splicing the complete area server name
        if (!ItemData.isNew)//If it is not Xinfu, leave the picture empty
        {<!-- -->
            isNew.enabled = false;
        }
        SpriteAtlas atlas = Resources.Load<SpriteAtlas>("Sprite/Atlas1"); //Load the atlas
        Debug.Log(ItemData.state);
        switch(ItemData.state)
        {<!-- -->
            case 1:
                state.gameObject.SetActive(false);
                break;
            case 2:
                state.sprite = atlas.GetSprite("hot");
                break;
            case 3:
                state.sprite = atlas.GetSprite("buzzy");
                break;
            case 4:
                state.sprite = atlas.GetSprite("smoothy");
                break;
            case 5:
                state.sprite = atlas.GetSprite("recover");
                break;
            default:
                break;
        }
        //Give the server data to the current
        nowInfo = ItemData;
                 
    }
    
    /// <summary>
    /// All event listeners
    /// </summary>
    public void AllEvent()
    {<!-- -->
        slefBtu.onClick.AddListener(()=>
        {<!-- -->
            if (nowInfo !=null ) //The premise is that the information is loaded successfully
            {<!-- -->
                UIManager.GetInstance().RemovePanel("ChooseServerPanel"); //Remove the current panel
                DataContorl.GetInstance().foreverPalyerdata.serverData = nowInfo;
                DataContorl.GetInstance().foreverPalyerdata.isNew = false; //Cancel the status of the first server at this time
                DataContorl.GetInstance().foreverPalyerdata.persentServerData = serverID.text; //The regional service string selected by the mattress for easy display
                //DataContorl.GetInstance().temparyItem = nowInfo; //Pass the item script selected at this time
                UIManager.GetInstance().ShowPanel<SelectPanel>("SelectPanel"); //Show the selection panel
            }
        }
      );
    }
}

（1）Server Panel

using System.Collections;
using System.Collections.Generic;
using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.UI;
//-------------------------------------
//----------------------------------
//___________project:       ______________
//___________Function: Select server panel
//___________Creator:______Zhiyuan_______
//____________________________
//-------------------------------------
public class ChooseServerPanel : BasePanel
{<!-- -->

    private List<ServerData> ServerLists; //Declare server data set
    
    public ScrollRect LeftServe,RightServe; //Declare the view frames of the left and right areas
    private CanvasGroup PanelGroup;
    private Text textRange;

    private List<GameObject> rightItemList = new List<GameObject>(); //Storage the right Item collection
    private GameObject[] temporaryList = new GameObject[5]; //Storage the displayed temporary Item collection



    protected override void Awake()
    {<!-- -->
        base.Awake();
        textRange = GetControl<Text>("showTextRange"); //Initialize display of server-wide text
        PanelGroup = GetComponent<CanvasGroup>();
        if (!PanelGroup)
        {<!-- -->
            PanelGroup = gameObject.AddComponent<CanvasGroup>();
        }
        ServerLists = DataContorl.GetInstance().ServerLists; //Pass the regional server data in the data manager
        AotuLoadLeftItem(); //Automatically create items in the left area

    }

    public override void ShowMe()
    {<!-- -->
        Fade(true, PanelGroup);
        base.ShowMe();
        //Is this the first time to choose a server?
        if( !DataContorl.GetInstance().foreverPalyerdata.isNew ) ///If it is not the first time to choose a server
        {<!-- -->
            GetControl<Button>("PastBut").gameObject.SetActive(true);
            ChooseItemData chooseItemData = GetControl<Button>("PastBut").GetComponent<ChooseItemData>();

            chooseItemData.UpdataItemInfo(DataContorl.GetInstance().foreverPalyerdata.serverData ); //Update the last selected data
        }
        else
        {<!-- -->
            GetControl<Button>("PastBut").gameObject.SetActive(false);
        }
        ActiveTrue(1, 5);//Display regional servers 1 to 5 first
    }


    /// <summary>
    /// Dynamically load the left Item
    /// </summary>
    public void AotuLoadLeftItem()
    {<!-- -->
        int num = ServerLists.Count / 5 + 1; //How many server set button items are divided into
        for (int i = 1; i <= num; i + + )
        {<!-- -->
            //Load prefab
            GameObject leftItem = Instantiate(Resources.Load<GameObject>("UI/UIItem/leftItem1"));

            leftItem.transform.SetParent(LeftServe.content); //Fix its parent object

            LeftItemData serverData = leftItem.GetComponent<LeftItemData>();

            //Set the display range of each Item
            int star, end;
            star = (i-1) * 5 + 1;
            end = i * 5;
            if (i * 5 >= ServerLists.Count )
            {<!-- -->
                end = ServerLists.Count;
            }
            serverData.ChangeTextShow(star, end); //Update the displayed range text

            Button leftItemButton = leftItem.GetComponent<Button>(); //Add a listener to the button and update the area on the right after clicking it

            //AotuLoadRightItem(star, end); //Update the corresponding interval server set
            AotuLoadRightItem(star, end);
            //Press to activate
            leftItemButton.onClick.AddListener(() =>
            {<!-- -->
        
                ActiveTrue(star, end);
            });

        }
    }

    /// <summary>
    /// Dynamically load the Item on the right
    /// </summary>
    /// <param name="start"></param>
    /// <param name="end"></param>
    public void AotuLoadRightItem(int start,int end)
    {<!-- -->
        for (int i = start; i <= end; i + + )
        {<!-- -->

            GameObject rightItem = Instantiate(Resources.Load<GameObject>("UI/UIItem/ChooseItem1"));
            rightItem.transform.SetParent(RightServe.content,false); //Fix its parent object
           // rightItem.transform.localScale = Vector3.one;
            ChooseItemData serverData = rightItem.GetComponent<ChooseItemData>();

            serverData.UpdataItemInfo(ServerLists[i-1]); //Update server data

            serverData.gameObject.SetActive(false);//Deactivate all first

            rightItemList.Add(rightItem);//Then store it in the List list
        }
    }


    /// <summary>
    /// Activation, (the benefit reduces the performance consumption of Destory)
    /// </summary>
    /// <param name="start"></param>
    /// <param name="end"></param>
    public void ActiveTrue(int start, int end)
    {<!-- -->
        textRange.text = "server" + start + "-" + end; //Update the displayed range text
        for (int i = 0; i < 5; i + + )
        {<!-- -->
            if (temparyList[ i ]!= null)
            {<!-- -->
                temporaryList[i].SetActive(false);
            }
        }

        for (int i = start, j = 0; i <= end; i + + ,j + + )
        {<!-- -->

            rightItemList[i - 1].SetActive(true); //Activate
            temporaryList[ j ] = rightItemList[ i - 1 ]; //Record the last displayed data
        }
    }

}

（3）Select to enter the panel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
//-------------------------------------
//----------------------------------
//___________project:       ______________
//___________ Function: Server selection confirmation panel
//___________Creator:______Zhiyuan_______
//____________________________
//-------------------------------------
public class SelectPanel : BasePanel
{<!-- -->
    private Text showServer; //Show the currently selected regional server
    protected override void Awake()
    {<!-- -->
        base.Awake();
        showServer = GetControl<Text>("SelectText");
        AllEvent();
       
    }

    public override void ShowMe()
    {<!-- -->
        base.ShowMe();
        //Pass in the selected regional server data in the global data
        if (DataContorl.GetInstance().foreverPalyerdata.isNew == false )
        {<!-- -->
            showServer.text = showServer.text = DataContorl.GetInstance().foreverPalyerdata.persentServerData;
        }
        else
        {<!-- -->
            showServer.text = "Please select a regional server";
        }

    }

    public void AllEvent()
    {<!-- -->
        //The logic executed when pressing the return button
        GetControl<Button>("BackBtu").onClick.AddListener( () =>
        {<!-- -->
            UIManager.GetInstance().ShowPanel<LoginPanel>("LoginPanel");
            UIManager.GetInstance().RemovePanel("SelectPanel");
        });

        //The logic executed by pressing the enter game button
        GetControl<Button>("EnterBtu").onClick.AddListener(
           ()=>
           {<!-- -->
               UIManager.GetInstance().RemovePanel();
               //At this time, the current player's personal global information is stored.
               DataContorl.GetInstance().UpdataPlayerInfo();
           } );

        //The logic executed when pressing the zone change button
        GetControl<Button>("SelectBtu").onClick.AddListener(()=>
           {<!-- -->
               UIManager.GetInstance().RemovePanel("SelectPanel");
               //Show selection panel
               UIManager.GetInstance().ShowPanel<ChooseServerPanel>("ChooseServerPanel");
           });
    }

    /// <summary>
    /// For external areas to change the currently selected area server information
    /// </summary>
    /// <param name="serverName"></param>
    public void ChangeText(string serverName)
    {<!-- -->
        GetControl<Text>("SelectText").text = serverName;
    }
}

?Related articles?

? A complete collection of high-frequency test points for software designers?

? Unity’s C# Special Topic – System Strong Foundation?

Your likes Favorites? Messages Follows? are the biggest motivation for me to continue to create and output high-quality content. power!