LOFTER-网易轻博

登录界面可以通过完成以下三部分来实现：

一、UI界面绘制

二、脚本的创建、编写与设置

三、按钮设置

一、UI界面绘制

1.制作背景：

UI系统的Image元素做背景色：

1）Hierarchy面板——右键——>UI——>Image

2）改Image元素的Image组件的Color属性为深蓝

2.制作标题：

UI系统Text元素做标题：

              1）右键Canvas——>UI——>Text

              2）改Text元素的Text组件的Text属性为：直升机收集物资行动

              3）改Text元素的Text组件的Color属性为白色

              4）选中Text元素的RectTransform组件的Width为300 Height为300

              5）改Text元素的Text组件的FontSize属性为20

              6）点Text元素的Text组件的Alignment属性的居中按钮

              7）选中Text元素用移动工具挪到合适位置

3.制作账号、密码输入框：

UI系统Text元素做输入框说明文本：

1）右键Canvas——>UI——>Text

2）改Text元素的Text组件的Text属性为：账号：

3）改Text元素的Text组件的Color属性为白色

4）改Text元素的Text组件的FontSize属性为16

5）选中Text元素用移动工具挪到合适位置

InputField元素做输入框：

1）右键Canvas——>UI——>InputField

2）选中InputField元素用移动工具挪到合适位置

3）更改InputField元素的子元素Placeholder的Text组件的Text属性为：EnterAccount...

选中刚才做好的账号文本、输入框，复制，然后修改内容作为密码文本、输入框：

              1）在Hierarchy面板选中账号的Text、InputField，Ctrl+D复制

              2）将复制的用移动工具向下挪到合适位置

              3）改Text元素的Text组件的Text属性为：密码：

              4）更改InputField元素的子元素Placeholder的Text组件的Text属性为：           EnterPassword...

4.制作登录按钮、注册按钮：

UI系统Button元素做登录按钮：

1）右键Canvas——>UI——>Button

2）改Button元素的RectTransform组件的Width属性为80

3）改Button元素的Image组件的Color属性为绿色

4）更改Button元素的子元素Text的Text组件的Text属性为：登录

5）将Button用移动工具挪到下方合适位置

复制Button做注册按钮：

1）选中Button，Ctrl+D复制

2）将复制的Button用移动工具挪到右边合适位置

3）更改复制的Button元素的子元素Text的Text组件的Text属性为：注册

二、脚本的创建、编写与设置

1.创建脚本：

       1）右键Project面板——>Create——>C# Script

       2）命名为：LoginManager

2.在VisualStudio编写脚本：

       1）双击脚本打开

       2）在VisualStudio编写脚本代码：

触发Login方法后，用户输入框中文本若为QianFeng，密码输入框中文本为123456，则在Console面板打印 登录成功，不然打印 登录失败

using System.Collections;

usingSystem.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class LoginManager : MonoBehaviour

{

    public InputField account;

    public InputField password;

    public void Login()

    {

        if (account.text == "QianFeng"&& password.text == "123456")

        {

           Debug.Log("登录成功！");

        }

        else

        {

           Debug.Log("登录失败！");

        }

    }

}

3.设置脚本：

1）拖拽Assets的LoginManager脚本到Canvas上

2）拖拽账号对应的InputField到Canvas的Inspector面板的下方C#脚本属性Account处

3）拖拽账号对应的InputField(1)到Canvas的Inspector面板的下方C#脚本属性Password处

 

三、按钮设置：

              点击登录按钮后触发LoginManager类的Login方法

1）选中登录按钮，点Button组件On Click()右下角+来添加触发事件

2）拖绑定LoginManager的Canvas到按钮事件下的Object空位处（不能直接拖脚本到那，不然没有方法可以用）

3）按钮触发方法改为LoginManager.Login

Tip:

输入框输入不了东西，可能也因为是输入框大小太小，装不下文字。