Unity-3D learning UI系统

作业与练习

以下作业五选一：

1、血条（Health Bar）的预制设计。具体要求如下

• 分别使用 IMGUI 和 UGUI 实现
• 使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机
• 分析两种实现的优缺点
• 给出预制的使用方法

2、 UI 效果制作（你仅需要实现以下效果之一）

• 进入 NGUI 官方网站，使用 UGUI 实现以下效果
  • Inventory 背包系统
  • Quest Log 公告牌
  • Scroll View 选择板
• 以上例子需要使用 Unity web player， 仅支持以下操作系统与浏览器，参见官方下载
  • Windows 版 IE11
  • Mac OS X 10.7 Safari
  • 出现界面需要等待较长时间，打开页面让它慢慢加载

3、 如果你觉得 UI 不是你的菜，喜欢复杂的设计与代码

• 研究 DOTween 网站 http://dotween.demigiant.com/getstarted.php 网页， 它在 Specific settings 中 transform.DoMove 返回 Tween 对象。请实现该对象，实现对动作的持续管理。
  • 本作业有较大难度，务必参考师兄的作业

4、编写一个组件，提供常用窗口服务

• 修改 Game Jam Menu Template 的脚本
  • 如 ShowPanels 脚本
• 具体要求是实现一个方法
  • 支持某个面板窗口独立显示
  • 支持某个面板窗口模态，其他面板窗口显示在后面
  • 支持几个窗口同时显示，仅一个窗口是活动窗口

5、如果你喜欢凭空构思场景，请自制有趣的 UI 场景

• 例如：“几个小动物（3D）开会，语句从每个动物头上飘出，当达到一个大小，会出现清晰的文字！如果文字较多，会自动滚动”

本博客为血条的实现

一、使用UGUI实现血条

1. 具体思路来源:https://www.bilibili.com/video/av16100870?t=657 该视屏详细讲述了如何利用UGUI实现血条
2. 前期准备:   

• 创建一个空的对象作为Canvas的载体（在使用UI界面的过程中所有的控件都必须基于Canvas的基础）
• 给该对象添加一个Canvas作为我们要添加的Slider控件的载体。
• 将Canvas的Render Mode进行修改
  • • 对滑动条的属性进行修改
    • 完成了上述操作后，一个简单的血条就完成了，我们剩下需要做的就是为其添加相应的行为脚本
    • 
      

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
public class UGUI : MonoBehaviour {

	public Slider HPStrip;  
	public int HP = 100;
	void Start () {
		HPStrip.value = HPStrip.maxValue = HP; 
	}
	void Update(){
		this.transform.LookAt (Camera.main.transform.position);
	}
	void OnGUI(){
		if (GUI.Button (new Rect (Screen.width / 2 - 140, Screen.height / 2 - 100, 70, 30), "+")) {
			HP += 10;
			if (HP > 100) {
				HP = 100;
			}
			HPStrip.value = HP;   
		}
		if (GUI.Button (new Rect (Screen.width / 2 + 70, Screen.height / 2 - 100, 70, 30), "-")) {
			HP -= 10;
			if (HP < 0) {
				HP = 0;
			}
			HPStrip.value = HP;  
		}
	}
}

将改脚本挂载到我们添加的空对象上，一个用UGUI实现的血条就完成了

二、用IMGUI实现血条

1. IMGUI则是完全在OnGUI函数中完成血条的实现，所以我们直接将写好的脚本挂载到Main Camera上 即可

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class IMGUI : MonoBehaviour {

	public Texture2D green;
	public Texture2D red;
	private int HP =100;

	void Start() {
	}

	void Update() {
	}

	void OnGUI () {
		if (GUI.Button(new Rect(460, 500, 40, 20), "+")) {
			HP +=10;
			if (HP > 100) {
				HP=100;
			}
		}
		if (GUI.Button(new Rect(520, 500, 40, 20), "-")) {
			HP -=10;
			if (HP < 0) {
				HP=0;
			}
		}
		GUI.DrawTexture (new Rect (460, 480, 100, 20), red);
		GUI.DrawTexture (new Rect (460, 480, HP, 20), green);
	}
}

三、比较两者之间的优缺点

1. UGUI：

• 优点：Unity GUI / UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，有友好的图形化设计界面， 在场景渲染阶段渲染这些 UI 元素。所以在实现的时候有良好的交互性，可以直观的看到界面而不是纯代码。

    2.IMGUI：

• 优点：这样的编程即避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说，更是弥足珍贵。
• 缺点：没有图形化设计界面，只能在 OnGUI 阶段用 GUI 系列的类绘制各种 UI 元素。