8.服务器面板

UI系统 > UGUI > UGUI实践项目实践项目 UI系统 UGUI

发布时间 : 2024-03-13 10:32

字数:1.8k 阅读 :

评论:

8.服务器面板

8.服务器面板

8.1 拼面板

创建一个Panel取名为ServerPanel作为服务器面板，ServerPanel下创建一个image作为面板的拖拽提示面板示意图，修改透明度对着来拼。背景图后面可以做一个专门显示背景面板的预制体，先拼其他控件就行。给登录面板添加CanvasGroup组件用于淡入淡出。

创建选服按钮和上面的文字，进入游戏按钮，返回按钮

8.2 功能制作

服务器面板类图和流程图相关

创建服务器面板ServerPanel脚本，继承面板基类，注意名字要和场景中的对象一致，因为UI管理器是根据这个名字进行管理的。挂载到场景中的服务器面板上。

ServerPanel脚本中声明开始游戏、切换服务器和返回按钮的公共变量btnStart、btnChange和btnBack。声明服务器名字的公共变量txtName。在外面关联。

public Button btnStart;
public Button btnChange;
public Button btnBack;

public Text txtName;

ServerPanel脚本中重写Init方法，为返回按钮添加点击事件监听，显示登录面板，隐藏当前服务器面板。为开始游戏按钮添加点击事件监听，隐藏当前服务器面板。切换场景到”GameScene”。为切换服务器按钮添加点击事件监听，隐藏当前服务器面板，显示选服面板的逻辑待补充。

public override void Init()
{
    btnBack.onClick.AddListener(()=> {
        //显示登录面板
        UIManager.Instance.ShowPanel<LoginPanel>();
        //隐藏自己
        UIManager.Instance.HidePanel<ServerPanel>();
    });

    btnStart.onClick.AddListener(()=> {
        //进入游戏
        //由于过场景 Canvas对象不会被移除 所以 下面的面板应该也要隐藏了
        //隐藏自己
        UIManager.Instance.HidePanel<ServerPanel>();
        //切场景
        SceneManager.LoadScene("GameScene");
    });

    btnChange.onClick.AddListener(()=> {
        //显示服务器列表面板

        //隐藏自己
        UIManager.Instance.HidePanel<ServerPanel>();
    });
}

ServerPanel脚本中重写了ShowMe方法，调用基类ShowMe方法。其中，更新当前选择的服务器名字的逻辑待补充。之后我们会通过记录的上一次登录的服务器ID来更新内容。

public override void ShowMe()
{
    base.ShowMe();

    //显示自己的时候 更新 当前选择的服务器名字
    //之后 我们会通过 记录的上一次登录的服务器ID 来更新内容
}

登录数据LoginData脚本中，添加服务器id，用于记录玩家登录后选择的服务器id

/// <summary>
/// 登录界面可能需要记住的玩家操作相关数据
/// </summary>
public class LoginData
{
    //服务器相关
    //-1代表没有选择过服务器
    public int frontServerID = 0;
}

登录面板LoginPanel脚本中的点击登录按钮监听中，如果登录成功，判断服务器id是否为-1来选择打开的选服面板或服务器面板

//点击登录 做什么
btnSure.onClick.AddListener(()=> {
    //验证 用户名和密码 是否 通过
    if( LoginMgr.Instance.CheckInfo(inputUN.text, inputPW.text) )
    {
        //登录成功
        //记录数据
        ...
        //根据服务器信息 来进行判断 显示哪个面板
        if( LoginMgr.Instance.LoginData.frontServerID == -1 )
        {
            //如果从来没有选择过服务器 id为-1时  就应该直接打开 选服面板
        }
        else
        {
            //打开我们的服务器面板
            UIManager.Instance.ShowPanel<ServerPanel>();
        }
        //隐藏自己
        UIManager.Instance.HidePanel<LoginPanel>();
    }
    else
    {
        //登录失败
        UIManager.Instance.ShowPanel<TipPanel>().ChangeInfo("账号或密码错误");
    }
});

把服务器面板拖入Resources/UI文件夹下做成预制体

8.3 代码

ServerPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;

public class ServerPanel : BasePanel
{
    public Button btnStart;
    public Button btnChange;
    public Button btnBack;

    public Text txtName;

    public override void Init()
    {
        btnBack.onClick.AddListener(() =>
        {
            //显示登录面板
            UIManager.Instance.ShowPanel<LoginPanel>();
            //隐藏自己
            UIManager.Instance.HidePanel<ServerPanel>();
        });

        btnStart.onClick.AddListener(() =>
        {
            //进入游戏
            //由于过场景 Canvas对象不会被移除 所以 下面的面板应该也要隐藏了
            //隐藏自己
            UIManager.Instance.HidePanel<ServerPanel>();
            //切场景
            SceneManager.LoadScene("GameScene");
        });

        btnChange.onClick.AddListener(() =>
        {
            //显示服务器列表面板

            //隐藏自己
            UIManager.Instance.HidePanel<ServerPanel>();
        });
    }

    public override void ShowMe()
    {
        base.ShowMe();

        //显示自己的时候 更新 当前选择的服务器名字
        //之后 我们会通过 记录的上一次登录的服务器ID 来更新内容

    }
}

LoginPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class LoginPanel : BasePanel
{
    //注册按钮
    public Button btnRegister;
    //确定登录按钮
    public Button btnSure;

    //账号和密码控件
    public InputField inputUN;
    public InputField inputPW;

    //记住密码和自动登录 多选框
    public Toggle togPW;
    public Toggle togAuto;

    public override void Init()
    {
        //点击注册 做什么
        btnRegister.onClick.AddListener(() =>
        {
            //显示注册面板
            UIManager.Instance.ShowPanel<RegisterPanel>();
            //隐藏自己
            UIManager.Instance.HidePanel<LoginPanel>();
        });

        //点击登录 做什么
        btnSure.onClick.AddListener(() =>
        {
            //点击登录后 要验证用户民密码 是否正确 

            //判断是否合法
            if (inputPW.text.Length <= 6 ||
                inputUN.text.Length <= 6)
            {
                //提示不合法 
                TipPanel panel = UIManager.Instance.ShowPanel<TipPanel>();
                //改变提示面板上提示的内容
                panel.ChangeInfo("账号和密码都必须大于6位");
                return;
            }

            //验证 用户名和密码 是否 通过
            if (LoginMgr.Instance.CheckInfo(inputUN.text, inputPW.text))
            {
                //登录成功

                //记录数据
                LoginMgr.Instance.LoginData.userName = inputUN.text;
                LoginMgr.Instance.LoginData.passWord = inputPW.text;
                LoginMgr.Instance.LoginData.rememberPw = togPW.isOn;
                LoginMgr.Instance.LoginData.autoLogin = togAuto.isOn;
                LoginMgr.Instance.SaveLoginData();

                //根据服务器信息 来进行判断 显示哪个面板
                if (LoginMgr.Instance.LoginData.frontServerID == -1)
                {
                    //如果从来没有选择过服务器 id为-1时  就应该直接打开 选服面板
                }
                else
                {
                    //打开我们的服务器面板
                    UIManager.Instance.ShowPanel<ServerPanel>();
                }

                //隐藏自己
                UIManager.Instance.HidePanel<LoginPanel>();
            }
            else
            {
                //登录失败
                UIManager.Instance.ShowPanel<TipPanel>().ChangeInfo("账号或密码错误");
            }

        });

        //点击记住密码 逻辑
        togPW.onValueChanged.AddListener((isOn) =>
        {
            //当记住密码取消选中状态时 自动登录 也应该取消选中
            if (!isOn)
            {
                togAuto.isOn = false;
            }
        });

        //点击自动登录 逻辑
        togAuto.onValueChanged.AddListener((isOn) =>
        {
            //当我们选中 自动登录时  如果记住密码 没有被选中 应该让它选中
            if (isOn)
            {
                togPW.isOn = true;
            }
        });
    }

    public override void ShowMe()
    {
        base.ShowMe();
        //显示自己时  根据数据 更新面板上的内容

        //得到数据
        LoginData loginData = LoginMgr.Instance.LoginData;

        //初始化面板显示
        //更新 两个多选框
        togPW.isOn = loginData.rememberPw;
        togAuto.isOn = loginData.autoLogin;

        //更新账号密码
        inputUN.text = loginData.userName;
        //根据你是否上一次勾选了记住密码 来决定是否 更新密码
        if (togPW.isOn)
            inputPW.text = loginData.passWord;

        //如果是自动登录 做什么
        if (togAuto.isOn)
        {
            //自动去验证账号密码相关
        }
    }


    /// <summary>
    /// 提供给外部 快捷设置用户名和密码的方法
    /// </summary>
    /// <param name="userName"></param>
    /// <param name="passWord"></param>
    public void SetInfo(string userName, string passWord)
    {
        inputUN.text = userName;
        inputPW.text = passWord;
    }
}

LoginData

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

/// <summary>
/// 登录界面可能需要记住的玩家操作相关数据
/// </summary>
public class LoginData
{
    //用户名
    public string userName;
    //密码
    public string passWord;

    //是否记住密码
    public bool rememberPw;
    //是否自动登录
    public bool autoLogin;

    //服务器相关
    //-1代表没有选择过服务器
    public int frontServerID = 0;
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com