一、基本元素创建
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相关的设计,下一步进行网络开发