UGUI-初识

由于新项目的 UI 要用 UGUI 来实现，所以从今天开始要学习 UGUI 了；想想还是有些许淡淡的优伤，因为之前一直使用 NGUI 也很顺手，虽然网上大家都很期待 Unity 原生的 UI 系统，但是，我个人认为在具体实施中还是以熟练优先，都是工具，达到预期的目的就行。

好了，以上算是我个人的一点发泄吧，切入正题，实践优先。

在实践之前，我们要先想想即将做什么，有了目标，就可以在脑海中大体设想一下这个目标有什么作用，是什么样子，由哪些东西组成等。

今天是第一次接触 UGUI，我们就用它一来模拟一下登录界面吧，这个相信大家都不陌生。

由此我们可以知道，登录界面至少由背景、用户名输入框、密码输入框、登录按钮组成。

首先，新建一个工程。因为 Unity 从4.6版本开始就植入 UGUI，所以不要导入其它资源了，可直接开始。

其次，在 Hierarchy 视图里右键单击，如图1-1所示：



可以看到它有各种类型的控件可供选择，这里我们先来张背景吧，选择 Image 创建完成在 Hierarchy 视图下会有三个东西生成，Canvas、Image、EventSystem；

Canvas：画布是所有 UI 元素应该在它里面的一个区域，它是一个带有画布组件的游戏对象，并且所有的 UI 元素必须是这样一个画布的子节点。（注：这是官方的原文，我自己翻译的，如果翻译的不好，或是不够准确，敬请见谅。）

我觉得这已经够清楚的了，可以多体会一下它的意思，必定会有收获。有关 Canvas、EventSystem 的具体细节这里可不用关心。

Image 这个是我们要设置背景的哪个控件，点击它之后在 Inspector 视图里可以看到它有一个 Image 的组件，它的第一个属性就是 Source Image，这个就是我们要设置的背景图；还有一个 Rect Transform 属性，这个是游戏物体的基本属性了，Reset 一下 OK。

要设置背景图，得有资源啊，依然是在目录 Assets 下创建一个文件夹 Textures，找点图片放进去就就行，在对 Source Image 进行设置图片时要特别注意一点，要先修改图片的纹理类型，因为 Unity 默认使用的是 GUI 的方式，现在使用 UGUI 所以得符合它的规范，具体怎么做呢，请接着看。

在 Unity 找到要使用的纹理，在 Inspector 里找到 Texture Type 选择 Sprite(2D and UI) 即可，之后，再把该纹理拖拽到 Image 的 Source Image 处就完成了背景图的制作，当然给控件取个有代表意义的名称也是必要的，选中 Image，F2，输入 Background 就大功告成了。

接着，制作输入框，在 UGUI 里文本控件叫 Text，输入框叫 Input Field，分别添加所需类型的控件，放在相应的位置就可以了，另外如果是密码输入框的话，输入的密码都是密文，这里修改 Input Field 组件的 Content Type 为 Password 就 OK 了。

下面就是处理 LoginButton 按钮事件了，对于 UGUI 怎么添加事件的回调函数呢，得说一下：

其实它和 NGUI 的原理是一样的， 具体如下：

创建一个脚本，并添加一个函数，这个函数就是 LoginButton 的回调函数，将脚本挂到摄相机上；然后在再 LoginButton 的 Button 组件分别关联上摄相机和相应的回调函数名就可以了。

先点 “+” 号



制作 UI 的时候要注意界面的组织结构，分块组织，只要使结构尽量清晰就行，以下是我的组织结构，相信都看得懂：



然后是最终效果图：



最后给出控制代码：

这段代码的作用就是，当点击登录按钮时，检测用户输入的帐号、密码是否和默认的相匹配，如果匹配则切换出菜单项，否则提示用户重新输入相关信息，提示信息显示1s后消失，而当点击菜单项的退出按钮则切换出登录项，就这些东东了，其他就不赘述了。

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

public class LoginController : MonoBehaviour
{
public InputField username;
public InputField password;
public GameObject loginInfo;
public GameObject menuInfo;
public GameObject warnText;

public void OnLogin()
{
string account = username.text;
string passkey = password.text;
if ("admin" == account && passkey == "123456")
{
print("Login success");
loginInfo.gameObject.SetActive(false);
menuInfo.gameObject.SetActive(true);
warnText.gameObject.SetActive(false);
}else
{
warnText.gameObject.SetActive(true);
StartCoroutine("AppearWarn");
print("Login fail");
}
}

public void OnExit()
{
loginInfo.gameObject.SetActive(true);
menuInfo.gameObject.SetActive(false);
}

IEnumerator AppearWarn()
{
yield return new WaitForSeconds(1f);
warnText.gameObject.SetActive(false);
}
}

至此，对今天的成果作一个总结：

1.画布的作用

2.各种类型控件的创建与应用

3.按钮事件回调函数的添加

4.纹理类型的选择

5.UI 元素自适应的设置