2017-07-22

Unity3D游戏开发预备课(四)

UI组件介绍及简单应用

前言

在U3D开发中，有将近一半的工作量是实现游戏UI的界面及逻辑，因此选择一个好的UI开发工具有时能取得事半功倍的效果。
在U3D中有以下几种UI开发工具可供选择：

NGUI –大名鼎鼎的U3D第三方UI开发插件，可以高效的制作出精美的界面
UGUI – U3D官方从4.6版本开始自带的UI开发组件
ONGUI – 对UI界面的延伸与扩展，编写方式类似于web开发的html+css，并不是可视化编程
Lengcy UI – 旧版的UI只能实现简单的文本和图片操作，但是却是每个初学者必须学习的入门课程，是学习其它工具的过渡,也是本文章重点介绍的对象

下面介绍两个最基本的UI组件:

GUI Text

用来显示文本的组件

创建步骤

在Hierarchy面板中创建一个空物体
选中空物体
选项卡 Component -> Rendering -> GUI Text 完成组件的添加

要注意的是不论是何种组件在Scene面板中是不可见的，只能在Game面板中预览效果

基本属性

Text：组件要显示的文本内容
Pixel Offset：(像素位移量) 通过改变位移量可以改变组件显示的位置
Font size：(字体大小)默认为0
Color：文字的颜色

GUI Texture

用来显示图片的组件

创建步骤

在Hierarchy面板中创建一个空物体
选中空物体
选项卡 Component -> Rendering -> GUI Texture 完成组件的添加

基本属性

Texture：要引用的图片
Pixel Offset：(像素位移量) 通过改变位移量可以改变组件显示的位置
H W ：(图片的高度和宽度)
Color：图片的颜色，修改此项会改变图片的色调

要注意的是修改图片的宽度与高度是在原图片的尺寸上进行加算，比如H值为100，原图片H值为100，则修改后图片的H值为200

因此可以通过scale调节图片的缩放比例来改变原图片的宽和高

UI的鼠标事件

UI的目的是了与用户的交互因此鼠标事件的引入必不可缺

1
2
3

OnMouseEnter() //鼠标进入事件
OnMouseExit()  //鼠标退出事件
OnMouseDown()  //鼠标点击事件

为GUI Text 添加如下脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MouseEvent : MonoBehaviour {
    private GUIText test;
	void Start () {
        test = gameObject.GetComponent<GUIText>();
	}
	
	
	void Update () {
		
	}
    private void OnMouseEnter()
    {
        test.color = Color.grey;
        
    }
    private void OnMouseExit()
    {
        test.color = Color.green;
    }
    private void OnMouseDown()
    {
        test.color = Color.blue;
       
    }
}