【SIKI】_08_UnityUI插件-NGUI笔记

01.调用

直接导入NGUI插件包

NGUI——Opions——Reset Prefab Toolbar（NGUI预设控件）

NGUI——Open——Font Maker（制作NGUI字体）

NGUI——Open——Atlas Maker（制作NGUI图集）

先拖拽背景进Hierarchy生成UI Root

右键——Attach——Button Script（按钮）

右键——Create——Label（Child子物体存在，Sibling同级）

01.常见问题

结构：

UI Root

——Camera（渲染）

组件脚本必须展开

11.Sprite（精灵）

Atlas（图集）

Sprite（精灵）

Material（材质）

Type（类型）

——Simple（简单）

——Sliced（九宫格）

——Tiled（平铺）

——Filled（切割）

——Advanced（高级的，自定义左右上下中的Sprite Type）

Flip（翻转）

——Horizontally

——Vertically

——Both

Gradient（颜色渐变）

Color Tint（颜色色调）

Widget （小部件窗口）: 

//区分Alignment

——Pivot ： 中心点（旁边可以选择左右上下和中间的中心点进行旋转）。

——Depth ： 窗口深度  （Back（返回） ， forward（向前））。  

——Size : 窗口大小 , Snap： 自动捕捉窗口，锁点 。

——Aspect （方向）： Free : 自由调整 ， BasedOnWidth ： 基于宽度调整 ， BasedOnHeight ： 基于高度调整 。

Anchors （ 固定点） 选项： 

Type  类型  ： Note ： 无 

                       Unified ： 统一 

                                     Execute : 执行（OnEnable（打开上传） ， OnUpdate （打开更新））。

                                     Target : 目标（Transfrom）：

                                      Left : 对象左边（与对象父类互动） + 位置数字大小

                                     Right ： 对象右边（与对象父类互动）+ 位置数字大小

                                     Bottom : 对象底部 （与对象父类互动）+ 位置数字大小

                                     Top : 顶部（与对象父类互动）+ 位置数字大小

                       Advanced : 高级设置

                                      Execute : 执行（OnEnable（打开上传） ， OnUpdate （打开更新））。

                                      Left : 左边（选择目标互动 ） + 位置数字大小）

                                      Right ： 右边（选择目标互动 ） + 位置数字大小）

                                      Bottom : 底部（选择目标互动）+ 位置数字大小）

                                      Top : 顶部（选择目标互动）+ 位置数字大小）

12.Label

Font（字体）

——NGUI

——Unity（ttf/动态字体）

Material（材质）

Font Size（字体大小）

Text（文本内容）

Modifier（字母大小设置）

Overflow（溢出处理方法）

——ShrinkContent（收缩量/根据方框大小缩放）

——ClampContent（夹的内容/多余的减掉）

——ResizeFreely（调整自由/方框大小适应字体大小）

——ResizeHeight（调整高度自由/方框高度适应字体大小）

Alignment（对齐）

Gradient（颜色渐变）

——Top （可调整文字顶部颜色），

——Bottom （可调整文字底部颜色）

Effect（影响）

——shadow（阴影）（x,y可调节阴影间距）

——outline（边框）

Float spacing

Spacing（间距）（x,y可调节文本间距）

Max Lines（最大行数 0代表不限行 其他大于0的数值n表示限制在n行）

BBcode（基本标记）

——Symbols （符号字符表，勾选后不会显示字体前后设置控制字体大小粗细的符号）

——Note（没有）

——Normal（正常）

——Colored（有着色） 

Color Tint（颜色色调）

Widget （小部件窗口）

Anchors （固定点）

13.widget（小窗口）

pivot（中心点）

depth（深度）

snap（图片恢复到原来大小）

size（大小及比例）

14.Texture（图片）

NGUI中也有UITexture的概念，其功能和用途上和UISprite有很大的相似之处，都是为了显示一些图片资源。但是UITexture和UISprite最大的区别在于，UITexture是一张独立的图片，不依托于任何图集，这张Texture有自己的材质和shader，每一个UITexture都将消耗一个DrawCall去渲染，每一个UITexture都将独立进行加载。

15.Panel（面板）

Alpha（透明度）

Clipping（裁剪）

——Soft Clip（柔软/羽化）

——Constran But Dont Clip（限制但是不裁剪）

Advanced Options（高级选项）

Render Q 渲染队列：Automatic：自动， Start At:开始于…… ， Explicit：显示。

Sort Order 排序

Normals 法线 ：Needed for lit shaders(是否需要循环亮着着色器)

Cull 剔除： Cull widgets while dragging them（剔除小窗口循环拖动）

Visible 可见物： Check if widgets never go off-screen(检查小窗口是否离开屏幕)

offset 偏移移动坐标: Offset anchors by position(抵消偏移位置)

Static静态：Check if widgets won`t move(检查小窗口是否会移动)

Panel Tool 面板工具：show in panel tool(显示面板工具)

16.Scroll View（可滚动的视图）

Content Origin：控制panle相对Scroll View的位置。

Movement：控制Scroll View滑动的方向，是水平还是垂直，或是随意滑动（Unrestricted ），或是自定义延X,Y滑动（Custom ）；

Drag Effect：拖动的效果，MomentumAndSpring这个效果就是IOS会弹的效果。

Scroll Wheel Factor：鼠标滑轮滚动速度。

Momentum Amount：滑动后，自动滑行的距离。

Restrict Within Panel：如果选择了，则panel不会滑出Scroll View。比如向左滑动，panel右边和Scroll View的右边可重合。

Cancel Drag If Fits：增加什么阻力的。

Smooth Drag Start 和IOS Drag Emulation：滑动的感觉不错，体会下。

Scroll Bars：添加滑动条控件。使用方法。

17.Grid（格子排列）

Arrangement：排列的方向。

Sorting：排列的顺序。

——None：没有顺序。

——Alphabetic：按字母的顺序。

——Horizontal：水平放置的顺序。

——Vertical：垂直放置的顺序。

——Custom：自定义的方式。比如将Sprite的名字命名方式如下：001，002，003

Pivot：抛点的位置。

Max Per Line：最大行或是列的数量。

Cell Width：单元之间的宽度。

Cell Height：单元之间的高度。

Animate Smoothly：平滑动画。

Hide Inactive：隐藏不活动的组件。

Keep Within Panel：保持在Panel中。

18.Table（表排列）

这个控件的效果和UIGrid很相似，区别是UIGrid能控制每个小组件的大小，

而这个控件控制的是小组件之前的空隙。

19.Anchor（抛锚）

UI Camera 是渲染这些对象的摄像机，如果没有手动设置，它会自动设置一个场景中的摄像机

Side 设置锚点，分别可以设置4个角，4个边和中心点

Half Pixel Offset 可以让对象在windows系统上显示的时候，有半个像素的偏移量。2D UI界面需要勾选上这个

Depth Offset 用来调整UIAnchor计算出来的位置的深度。它主要作用于基于透视的摄像机。这个值是世界坐标，与摄像机的远近裁切面类似

Relative Offset 相对偏移量 让你可以为物体设置以屏幕半分比为单位的偏移量

99.Box Collider

交互检测

100.Button Script（按钮）

Transition seconds 过渡时间

Colors

——Normal 正常

——Hover 滑过

——Pressed 按下

——Disabled 禁用

Sprites

——同上

On click

——指定游戏物体的某个方法

要图片里的文字一起变化，在图片里再创建一个Button指向文字

101.Toggle Script（切换）

Starting State 默认是否选上

Sprite 选择了选项

Animation

Transition 转化方式

On volume Change

102.slider Script（滑动器）

steps（每次移动多少）

foreground（前景）

background（背景）

thumb（游标）

103.Scroll Bar Script（滑动条）

Value 位置

Size 大小

Appearance

——Foreground 前背景（滚动条）

——Background 后背景

——Thumb

——Direction 滚动方向

105.Popup List Script（下拉选项）

Options 选项

Default 默认选项

Position 弹出框位置

——Auto 自动

——Above 上面

——Below 下面

Alignment 对其方式

Atlas 下拉选项图示

Font 下拉选项字体

拖拽Label到On volume Change触发

——SetCurrentSelection设置当前选择选项

105.Input Field Script（输入项框）

Sprite

——Label 指定数据(没有报错)

ClampConten //默认单行

Input Type//输入类型

——Password

Validation //校验类型

——Integer//数字

——Alphanumeric//字母数字

——Username//用户名

——name//名字

Character Limit//输

——入长度

On Return Key //回车键效果

——default

——submit //提交

——newline //新一行

109.Play Tween Script（补间动画）

Alpha 通道

Color 颜色

Width 宽度

Height 高度

Position 位置

Rotation 旋转

Scale 大小

Transform 指定移动

play Style

——once（一次）

——loop（重复）

——ping pong（来回重复）

duration（播放时长）

start delay（延时播放）

tween gruop（分组）

ignore timescale（是否受到影响）

111.play Sound Script（音效）

Trigger

——Onclick（点击）

——OnMouseOver（鼠标划上）

——OnMouseOut（鼠标划过）

——Onpress（按下）

——OnRelease（松开）

——Custom

201.文本显示

右键直接create Label

202.图片显示

右键直接create Sprite

203.面板容器

右键直接create Panal

204.监听按钮

01.右键create label或sprite

02.右键Attach Box Collider（用来检测是否点击）

03.右键Attach Button Script

204.边框切图

01.Type 选择 Sliced

02.然后Edit

切割好的九宫图后，图片的缩放不会影响四角

206.动态字体

Font Maker

——Type（Dynamic）动态字体

——Source 来源

——Create the Font 创建

注意：静态字体可以放在图集里面

207.补间动画

01.右键create label或sprite

02.右键Tween

208.滑动条

01.右键create sprite

02.右键Attach Box Collider

03.右键Attach Slider Script

209.游戏菜单

【背景图片】

【游戏标题】

01.添加Tween动画

【界面框架】

01.添加widget容器

【游戏按钮】

01.添加Sprite图片

02.附加Label文字

03.附加Collider检测

04.附加Button按钮

05.附加UISound音效

【音效大小】

01.附加Label文字

02.附加Slide滑动条

【下拉选项】

01.添加Sprite图片

02.附加Collider检测

03.附加Popup下拉选项

04.设置下拉选项On volume Change

【单选项框】

01.添加Sprite图片

02.附加Collider检测

03.附加Toggle单选项框

04.添加子Sprite图片作为选择了的选项

【难度选项】

每一个组件上的On volume Change通知的GameSetting改变值

using UnityEngine;

using System.Collections;

public enum GameGrade {

EASY,

NORMAL,

DIFFCULTY

}

public enum ControlType {

KEYBOARD,

TOUCH,

MOUSE

}

public class GameSetting : MonoBehaviour {

public float volume = 1;

public GameGrade grade = GameGrade.NORMAL;

public ControlType controlType = ControlType.KEYBOARD;

public bool isFullscreen = false; //是否全屏

public TweenPosition startPanelTween;

public TweenPosition optionPanelTween;

public void OnVolumeChanged() {

//print("onVolume");

volume=UIProgressBar.current.value;

}

public void OnGameGradeChanged() {

print("onGameGrade:" + UIPopupList.current.value);//当前操作的的滑动器

switch (UIPopupList.current.value.Trim()) {//去除空格

case "一般":

grade = GameGrade.NORMAL;

break;

case "简单":

grade = GameGrade.EASY;

break;

case "困难":

grade = GameGrade.DIFFCULTY;

break;

}

}

public void OnControlTypeChanged() {//操作模式

print("onControlType:" + UIPopupList.current.value);

switch (UIPopupList.current.value.Trim()) {

case "键盘":

controlType = ControlType.KEYBOARD;

break;

case "触摸":

controlType = ControlType.TOUCH;

break;

case "鼠标":

controlType = ControlType.MOUSE;

break;

}

}

public void OnIsFullscreenChanged(){

print("onIsFullscreen:"+UIToggle.current.value);

isFullscreen = UIToggle.current.value;

}

public void OnOptionButtonClick() {//选项按钮设置

startPanelTween.PlayForward();//动画播放

optionPanelTween.PlayForward();

}

public void OnCompleteSettingButtonClick() {//完成设置选项

startPanelTween.PlayReverse();//动画后退

optionPanelTween.PlayReverse();

}

}

【界面切换】

整体放入一个容器中，从画面外移动到画面中

tween position 位置动画

210.技能CD

01.添加Sprite图片

02.附加Label文字

03.添加子Sprite图片（大小保持一致）

——Type 选择 Filled

using UnityEngine;

using System.Collections;

public class Skill : MonoBehaviour {

public float coldTime = 2;

private UISprite sprite;

private bool isColding = false;//是否正在冷却

void Awake() {

sprite = transform.Find("Sprite").GetComponent<UISprite>();

}

void Update() {

if (Input.GetKeyDown(KeyCode.A) && isColding==false ) {

//

//1.释放技能 创建粒子系统 显示技能特效

//2.ui上显示技能冷却效果

sprite.fillAmount = 1;

isColding = true;

}

if (isColding) {

sprite.fillAmount-=(1f / coldTime) * Time.deltaTime;

if (sprite.fillAmount <= 0.05f) {

isColding = false;

sprite.fillAmount = 0;

}

}

}

}

211.注册界面

【输入项框】

01.添加Sprite 图片

02.附加Collider 检测

03.附加Input 输入框

04.创建指定一个Label

【校验项框】

01.添加Sprite 图片

02.附加Collider 检测

03.附加Input 输入框

04.创建指定一个Label

05.设置Input的Validation

输入完回车触发检测

public class AgeLimit : MonoBehaviour {

private UIInput input;

void Awake() {

input = this.GetComponent<UIInput>();

}

public void OnAgeValueChange() {

string value = input.value;

int valueInt = int.Parse(value); //转换类型

if (valueInt < 18) {

input.value = "18";

}

if (valueInt > 120) {

input.value = "120";

}

}

}

212.聊天系统

【拖拽界面】Drag object

01.附加Collider

02.附加Drag

03.指定拖拽对象

【缩放界面】Drag Resize

11.在主体图片里添加小图片作为调节按钮

12.添加Box Collider

13.附体Drag Resize。即可控制父类大小

14.小图设置Unified 跟随大小变化

【文本列表】Text List

【文本滚动】Scroll Bar

01.添加Label 文本

02.附加Collider 检测

03.附加Text List

04.指定Label

05.指定Scroll Bar

Paragraph history（可拖拽次数）

using UnityEngine;

using System.Collections;

public class TestTextList : MonoBehaviour {

private UITextList textlist;

private int lineNumber = 0;

// Use this for initialization

void Start () {

textlist = this.GetComponent<UITextList>();

}

// Update is called once per frame

void Update () {

if (Input.GetMouseButtonDown(0)) {

textlist.Add("泰课在线 www.taikr.com :"+lineNumber++);

}

}

}

【系统雏形】

聊天窗口1层：sprite，box collider，drag

调节大小2层：anchors-unified（自适应），图标sprite，box collider，drag resize

聊天背景2层：anchors-unified

滚动条下2层：anchors-unified，Sprite，Box Collider，Scroll Bar，top

滚动条上3层：anchors-unified，Sprite，colors

聊天文字3层：anchors-unified，colors，Box Collider，Test List，text label ，scroll bar（指定）

输入文字3层：anchors-unified，colors，Box Collider，Test List，text label ，scroll bar（指定）

on submit指定游戏物体，指定方法

using UnityEngine;

using System.Collections;

public class MyChatInput : MonoBehaviour {

private UIInput input;

public UITextList textlist;

private string[] names = new string[4]{

"siki",

"系统",

"泰课在线",

"韩梅梅"

};

void Awake() {

input = this.GetComponent<UIInput>();

}

public void OnChatSubmit() {

string chatMessage = input.value;

string name = names[Random.Range(0, 4)];

textlist.Add( name+" : "+ chatMessage);

input.value = "";//输入清空

}

}

213.背包系统

【拖拽放下】Drag and Drop Item

【背包系统】Knapsack Item

窗口：sprite，

格子：sprite，depth1， sliced，box collider，【knapsack】

物品：sprite，depth1， box collider，drag and drop item（拖放）， 【KnapsackItem】

数量：Label，

【结构】结构：

using UnityEngine;

using System.Collections;

public class MyDragDropItem : UIDragDropItem { //重写

protected override void OnDragDropRelease(GameObject surface) { //拖拽结束触碰的物体

//OnDragDropMove拖拽时 //OnDragDropStart拖拽开始

base.OnDragDropRelease(surface);

//进行我们的处理代码了

print(surface);//检查碰撞

}

}

【物体代码】完整：

public class KnapsackItem : UIDragDropItem {

public UISprite sprite;

public UILabel label;

private int count = 1;

public void AddCount(int number = 1) {

count += number;

label.text = count + "";

}

protected override void OnDragDropRelease(GameObject surface) {//surface为格子

base.OnDragDropRelease(surface); //调用基类上已被其他方法重写的方法

if (surface.tag == "Cell") {

this.transform.parent = surface.transform;//游戏物品自动对齐到该格子

this.transform.localPosition = Vector3.zero;//局部坐标

} else if(surface.tag=="KnapsackItem") {//拖到另一个物品之上

Transform parent = surface.transform.parent;

surface.transform.parent = this.transform.parent;//目标物品保存到当前物品位置

surface.transform.localPosition = Vector3.zero;

this.transform.parent = parent;;//当前物品保存到目标物品位置

this.transform.localPosition = Vector3.zero;

}

}

}

public class Knapsack : MonoBehaviour {

public GameObject[] cells;//物品数组（开发界面导入）

public string[] equipmentsName;

public GameObject item;

void Update() {

if (Input.GetKeyDown(KeyCode.X)){//按下x捡起物品

Pickup();

}

}

public void Pickup() {

int index = Random.Range(0, equipmentsName.Length);

string name = equipmentsName[index];

bool isFind = false;

for (int i = 0; i < cells.Length; i++) {

if (cells[i].transform.childCount > 0) {//判断当前格子有没有物品 //格子里面子物体个数

//如果有的话

KnapsackItem item = cells[i].GetComponentInChildren<KnapsackItem>();

//判断当前游戏物品的名字 跟我们捡到的游戏物体名字是否一样

if (item.sprite.spriteName == name) {

isFind = true;

item.AddCount(1);

break;

}

}

}

if (isFind == false) {

for (int i = 0; i < cells.Length; i++) {

if (cells[i].transform.childCount == 0) {

//当前位置没有物品

//添加我们新捡起来的物品

GameObject go =NGUITools.AddChild(cells[i], item);

go.GetComponent<UISprite>().spriteName = name;//名字

go.transform.localPosition = Vector3.zero;

break;

}

}

}

}

}

214.跟随血条

【血条制作】

slider 忽略游标

【跟随系统】Follow Target

01.导入HUD Text

02.创建游戏角色

03.在游戏角色创建空物体（用来调整跟随在游戏角色位置）

Follow Target

——Target 目标

——Game Camera 目标被渲染相机

——Ui Camera UI渲染相机

——Disable If Incisibl（跟随主角看不到是否禁用该物品）

【治疗伤害】HUD Text

在UI Root下创建一个空物体

添加HUD Text组件

HUD Text

——True Type Font（指定字体）

——Offset curve（移动变化曲线）

——Alpha curve（透明变化曲线）

——Scale curve（大小变化曲线）

public class TestHUDText : MonoBehaviour {

public HUDText text;（开发界面赋值）

// Update is called once per frame

void Update () {

if (Input.GetMouseButtonDown(0)){//左键加红色字

text.Add(-10, Color.red, 1f);

}

if (Input.GetMouseButtonDown(2)){//右键加绿色字

text.Add(+10, Color.green, 1f);

}

}

}