Unity3D 初涉门径 之登录界面

网上罗集了一些资料，这里用两种方式实现登录界面效果。 （GUI 和 GUILayout 两种方法实现） (～￣▽￣)～

编译环境：Win 10 + Unity 5.5.1f

新建脚本(C#):

private string editUsername;
private string editPassword;

private string editTitle;

void Start(){
    editTitle = "登录界面";
    editUsername = "请输入账号";
    editPassword = "请输入密码";
}

void Update(){

}

void OnGUI(){
    // 1.GUILayout 实现 -- 活动模式
    GUILayout.BeginArea(new Rect(10, 20, 200, 150));

    GUILayout.Label(editTitle);

        GUILayout.BeginHorizontal();
        GUILayout.Label("账号：");
        editUserName = GUILayout.TextField(editUserName,16, GUILayout.Width(150));
        GUILayout.EndHorizontal();

        GUILayout.BeginHorizontal();
        GUILayout.Label("密码：");
        editPassword = GUILayout.PasswordField(editPassword, "*"[0],16, GUILayout.Width(150));
        GUILayout.EndHorizontal();

    if(GUILayout.Button("登录")){
        // 处理 登录事件
    }

    GUILayout.EndArea();

    // 2. GUI 实现 -- 固定模式
    /*
    GUI.Label(new Rect(80,10, Screen.width, 80), editTitle);
    if(GUI.Button(new Rect(20, 120, 60, 35), "Login")){
        // 处理登录 事件
    }
    GUI.Label(new Rect(20,40,100, 50), "账号：");
    GUI.Label(new Rect(20,80,100, 50), "密码：");

    editUsername = GUI.TextField(new Rect(60, 40, 150, 30), editUsername, 20);
    eidtPassword = GUI.PasswordField(new Rect(60, 80, 150, 30), editPassword, 16);
    * */
}

效果图：
1. GUILayout 实现：

2.GUI 实现

由图可以看出，这两种实现方法的区别：
1. GUILayout 是自动适配区域宽度大小(若不指定宽度)，并且是自动排版
2. GUI 是指定区域，指定大小的排版。(根据自己的需求，自定义排版)

备注:

        /*
         * GUI.TextField() 参数
         * arg0: position  -- 用于文本字段在屏幕上的矩形的位置
         * arg1: text      -- 显示的编辑文本，这个函数返回值应该 赋值回给字符串
         * arg2: maxLength -- 控制字符串的最大长度，如果不设置 ，用户可以一直输入
         * arg3: style     -- 使用样式，如果不设置，文本字段的样式将应用当前的GUISkin 皮肤
         * 最后 返回被编辑的字符串
         * */

         /* GUI.PasswordField() 参数 
         position            用于文本字段在屏幕上矩形的位置。 
         Password            编辑的密码，这个函数返回值应该赋回给字符串，看下面的例子。 
         maskChar            用于密码的字符遮罩。 
         maxLength           控制字符串的最大长度，如果不设置用户可以一直输入。 
         style               使用样式，如果不设置，密码字段的样式将应用当前的GUISkin皮肤。 
         最后 返回被编辑的密码。 
         * */ 

更新(2017/3/20)：
重新修改了一下 GUI 固定模式的 登录界面实现，效果看起来还可以，登录后实现隐藏 登录界面。符合设计要求。o(￣▽￣)d~

更新代码如下：

GUI.BeginGroup(new Rect(Screen.width/2 -50, Screen.height/2 -100, 300, 300)); // 设置固定区域大小
        GUI.Box(new Rect(0, 0, 250, 200), editTitle); // 叠加效果


        GUI.Label(new Rect(30, 160, 150, 30), editTips);
        if (GUI.Button(new Rect(20, 120, 60, 35), "Login"))
        {
            // Click the button to change the tips info

            if (editUserName == "Jeter" && editPassword == "123")
            {
                editTips = "Login success";
                GUILayer.Destroy(this); // 销毁 当前GUI 层
            }
            else
            {
                editTips = "Login failure";
            }
        }

        GUI.Label(new Rect(20, 40, 100, 50), "账号:");
        GUI.Label(new Rect(20, 80, 100, 50), "密码:");

        // Get the inputs content
        editUserName = GUI.TextField(new Rect(60, 40, 150, 30), editUserName, 15);
        editPassword = GUI.PasswordField(new Rect(60, 80, 150, 30), editPassword, "*"[0], 15);

        GUI.EndGroup();

效果图显示：
登录界面：

登录失败：

登录成功后(销毁了)）：