Unity 3D用户登陆实现一UI设计

Posted 2022-03-18 シ゛甜虾

一、基本元素创建

1、新建3个Canvas，一个作为主要的，剩下一个是用来输入用户名和地址的，一个用来输入服务器IP

2、添加背景图片

先将2张背景图片转换成精灵

Image添加图片

添加基本UI元素

在Canvas中添加登陆脚本，将脚本放到合适的位置

选择你喜欢的编辑器，进行代码编辑

添加4个函数

如果直接将脚本给按钮，事件是无法调用的

需要先将脚本挂载到一个实例中，这里将代码就挂载到Canvas上，然后将Canvas附在On Click中

这样就可以找到自己写的函数了

找到想要调用的函数

以此类推，将4个函数挂载到4个按钮上

 

编辑代码，这里需要在VS中移动代码到Script目录，这样看起规整些，也可以不动

移动后的目录

写入如下代码

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

public class longinScript : MonoBehaviour

    public Canvas LoginCanvas;
    public Canvas SettingCanvas;
    public InputField Username;
    public InputField Password;
    public InputField IpAddr;
    public InputField Port;
    public Text LoginInfo;
    public Text SettingInfo;
    private string _ipAddr = "127.0.0.1";
    private string _port = "7050";
    private string _userName = "admin";
    private string _password = "";
    // Start is called before the first frame update
    void Start()
    
        Username.text = _userName;
        LoginInfo.text = "";
        SettingInfo.text = "";
    

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

    public void Login()
    
        _userName = Username.text;
        _password = Password.text;
        LoginInfo.text = "登陆成功！";
        Debug.Log($"userName:_userName,password:_password");
    

    public void Setting()
    
        _ipAddr = IpAddr.text;
        _port = Port.text;
        SettingInfo.text = "设置成功！";
        Debug.Log($"ipAddr:_ipAddr,port:_port");
    

    public void ToSettingView()
    
        IpAddr.text = _ipAddr;
        Port.text = _port;
        SettingInfo.text = "";
        LoginCanvas.gameObject.SetActive(false);
        SettingCanvas.gameObject.SetActive(true);
    

    public void ToLoginView()
    
        LoginInfo.text = "";
        LoginCanvas.gameObject.SetActive(true);
        SettingCanvas.gameObject.SetActive(false);
    

赋值

设置输入框类型

这就可以实现登录UI相关的设计，下一步进行网络开发