目 錄
第1章 初識NGUI 1
1.1 遊戲UI開發介紹 1
1.1.1 什麼是遊戲UI 1
1.1.2 UI為何如此重要 1
1.1.3 UI開發的流程 2
1.1.4 UI開發的難點 2
1.2 什麼是NGUI 3
1.2.1 NGUI插件介紹 3
1.2.2 NGUI的強大優勢 3
第2章 NGUI基礎 5
2.1 導入NGUI插件 5
2.1.1 NGUI版本介紹 5
2.1.2 NGUI的下載和購買 5
2.1.3 導入NGUI插件應用 6
2.1.4 導入常見問題 9
2.2 認識基本的UI資源 10
2.2.1 什麼是UI精靈（Sprite） 10
2.2.2 什麼是UI圖集（Atlas） 10
2.2.3 什麼是UI貼圖（Texture） 10
2.2.4 什麼是UI標簽（Label） 12
2.2.5 什麼是UI字體（Font） 12
2.3 製作第一個UI圖集 13
2.3.1 學會解剖UI的資源結構 13
2.3.2 如何導入切好的美術資源 15
2.3.3 用Atlas Maker製作圖集 16
2.4 製作第一個UI字體 20
2.4.1 為什麼要製作UI字體 20
2.4.2 靜態字體和動態字體 20
2.4.3 製作靜態字體介紹 21
2.4.4 製作動態字體介紹 22
2.5 創建第一個UI 22
2.5.1 創建一個2D UI 22
2.5.2 創建一個3D UI 24
2.5.3 瞭解UIRoot、UIPanel和UICamera組件 24
2.6 2DUI和3DUI的工作原理 28
2.6.1 2DUI的工作原理 28
2.6.2 3DUI的工作原理 30
2.6.3 如何判斷該選擇哪一種UI 31
2.7 深度（Depth）概念 31
2.7.1 強化對深度的理解 31
2.7.2 小心相機的深度 32
第3章 核心組件 34
3.1 什麼是UI控件 34
3.2 製作精靈（UISprite） 34
3.2.1 怎樣判斷是否應該使用精靈 34
3.2.2 創建精靈 35
3.2.3 Sprite組件的設置 37
3.3 製作標簽（Label） 43
3.3.1 怎樣判斷是否應當使用標簽 43
3.3.2 創建標簽 43
3.3.3 Label的文字設置 43
3.4 製作UI紋理（UITexture） 46
3.4.1 什麼情況下使用UITexture 46
3.4.2 創建紋理 46
3.4.3 紋理的設置 46
3.5 製作按鈕（Button） 48
3.5.1 怎樣判斷應該使用按鈕 48
3.5.2 創建按鈕 49
3.5.3 核心組件BoxCollider 49
3.5.4 核心組件UIButton 52
3.5.5 製作按鈕的放縮動畫 54
3.5.6 製作按鈕的偏移動畫 55
3.5.7 製作按鈕的鏇轉動畫 56
3.5.8 添加按鈕單擊音效 56
3.5.9 任何事物都可以變成按鈕，
不僅僅是UI 57
3.6 製作進度條（UISlider） 58
3.6.1 怎樣判斷是否應當使用
進度條 58
3.6.2 創建進度條 59
3.6.3 核心組件UISlider設置 60
3.6.4 進度條的BoxCollider說明 62
3.7 製作輸入框（Input） 63
3.7.1 怎樣判斷是否應當使用
輸入框 63
3.7.2 創建輸入框 63
3.7.3 核心組件Input設置 64
3.7.4 輸入框使用的一些
注意事項 67
3.8 製作滾動視圖（ScrollView） 68
3.8.1 怎樣判斷是否應當使用
滾動視圖 68
3.8.2 創建滾動視圖 69
3.8.3 滾動視圖核心組件
UIPanel 69
3.8.4 滾動視圖核心組件
UIScrollView 72
3.8.5 創建一個拖動條 75
3.8.6 拖動條說明 76
3.8.7 讓視圖內的內容可以
被拖動 77
3.8.8 製作滾動視圖時的
注意事項 78
3.9 製作復選框（Toggle） 79
3.9.1 怎樣判斷是否應當使用
復選框 79
3.9.2 創建復選框 79
3.9.3 復選框的核心組件
UIToggle 80
3.10 製作下拉菜單（PopupList） 82
3.10.1 怎樣判斷是否應當使用
下拉菜單 82
3.10.2 創建下拉菜單 82
3.10.3 顯示當前選中的選項 84
3.10.4 下拉菜單核心組件
PopupList 85
3.10.5 製作下拉菜單的注意事項 87
第4章 UI動畫 88
4.1 常見的兩種UI動畫介紹 88
4.1.1 要區分UI動畫和UI特效
兩個概念 88
4.1.2 關於Tween動畫 88
4.1.3 關於Animation動畫 89
4.2 漸隱漸現動畫（透明度動畫） 89
4.2.1 透明度動畫的介紹和應用 89
4.2.2 使用透明度動畫
TweenAlpha 90
4.2.3 使用透明度動畫的注意點 94
4.3 顔色變化動畫（變色動畫） 95
4.3.1 變色動畫的介紹和應用 95
4.3.2 使用顔色動畫TweenColor 96
4.3.3 使用顔色動畫的注意點 96
4.4 位置變換動畫（位移動畫） 97
4.4.1 位移動畫的介紹和應用 97
4.4.2 使用位移動畫
TweenPosition 98
4.4.3 使用位移動畫的注意點 98
4.5 鏇轉變化動畫（鏇轉動畫） 99
4.5.1 鏇轉動畫的介紹和應用 99
4.5.2 使用鏇轉動畫
TweenRotation 99
4.5.3 使用鏇轉動畫的注意點 100
4.6 大小變化動畫（放縮動畫） 100
4.6.1 放縮動畫的介紹和應用 100
4.6.2 使用放縮動畫
TweenScale 101
4.6.3 使用放縮動畫的注意點 101
4.7 Tween動畫總結 102
4.8 動畫控製組件UIPlayTween 102
4.8.1 為什麼要用UIPlayTween 102
4.8.2 動畫核心組件UIPlayTween
講解 103
4.8.3 使用UIPlayTween的
注意事項 106
4.9 動畫控製組件UIPlayAnimation 107
4.9.1 為什麼要用
UIPlayAnimation 107
4.9.2 為UI添加Animation組件 107
4.9.3 動畫核心組件
UIPlayAnimation講解 108
4.9.4 使用UIPlayAnimation
注意事項 110
第5章 其他組件 111
5.1 使用Toggle製作頁簽 111
5.1.1 頁簽的工作原理 111
5.1.2 一個完整的頁簽界麵 111
5.1.3 製作兩個頁簽按鈕 111
5.1.4 使用ToggleObjects來記錄
頁簽內容 114
5.1.5 製作頁簽注意事項 115
5.2 拖動攝像機來瀏覽超大界麵 115
5.2.1 拖動相機功能的介紹
和應用 115
5.2.2 核心原理和組件介紹 117
5.2.3 拖動相機瀏覽超大界麵
的注意事項 119
5.3 使用Grid自動排列UI 120
5.3.1 自動排列UI的應用 120
5.3.2 自動排列UI核心組件
Grid介紹 120
5.4 使用DragObject直接拖動物體 122
5.5 讓玩傢通過拖動自由改變
控件大小 124
5.6 製作序列幀精靈動畫
（SpriteAnimation） 125
5.6.1 什麼是序列幀精靈動畫 125
5.6.2 SpriteAnimation組件 125
第6章 NGUI實戰進階 127
6.1 UI開發核心問題——UI隨屏幕
自適應 127
6.1.1 屏幕分辨率對UI適配
的影響 127
6.1.2 主流設備的屏幕分辨率 129
6.1.3 自適應核心組件Anchor
的使用 130
6.1.4 使用Anchor的注意事項 133
6.1.5 正式開發UI之前必須明確
的幾個問題 134
6.2 UI元素的相對自適應 134
6.2.1 什麼是UI元素的相對
自適應 134
6.2.2 Anchors的介紹及使用 134
6.2.3 使用Anchors的範例：
背景圖的全屏適配 137
6.2.4 使用Anchors的注意事項 138
6.3 多攝像機同時協作運行 139
6.3.1 攝像的渲染層的概念 139
6.3.2 多攝像機協作的應用範圍 140
6.3.3 如何創建多個UI攝像機 140
6.3.4 多攝像機協作的注意事項 142
6.4 巧用九宮格以減少UI資源量 142
6.4.1 項目安裝包大小對項目
的影響 142
6.4.2 UI資源量對資源包大小和
內存的影響 143
6.4.3 什麼是九宮格UI 143
6.4.4 如何讓美術提供閤適的
九宮格UI資源 144
6.4.5 如何在NGUI中劃分
九宮格 144
6.4.6 如何使用九宮格UI 147
6.4.7 去掉Mipmap以進一步降低
資源包大小和內存占用 148
6.5 實戰開發中UI資源製作標準 148
6.5.1 為什麼要設定UI資源
製作標準 148
6.5.2 資源製作標準設定建議 149
6.5.3 程序如何保證UI資源的
分辨率不失真 150
6.5.4 針對各大平颱設置單獨的
尺寸和格式 150
6.6 UI事件監聽的擊穿 151
6.6.1 什麼是UI事件監聽
的擊穿 151
6.6.2 如何避免和解決UI事件
監聽的擊穿 152
6.6.3 事件監聽遮擋的妙用 153
6.7 開發之前的思考——UI結構
設計 153
6.7.1 什麼是UI結構設計 153
6.7.2 UI結構設計遵循的一些
要點 153
6.7.3 需要的時候，分場景以減輕
內存負擔 154
第7章 用代碼深度控製UI 155
7.1 代碼操作NGUI的原理 155
7.1.1 物體與組件的概念 155
7.1.2 怎樣用代碼操作NGUI 155
7.1.3 獲取組件的幾種方法 158
7.1.4 迅速判斷可以修改
的成員 160
7.2 動態加載UI元素 161
7.2.1 為什麼遊戲中會用到動態
加載UI元素 161
7.2.2 擅用UI元素的Prefab 161
7.2.3 將一個物體設置為另一個物
體的子物體——NGUITools.
AddChild()方法 162
7.2.4 NGUITools.AddChild()和
Instantiate的區彆 163
7.3 擅用EventDelegate事件委托 164
7.3.1 什麼是EventDelegate
事件委托 164
7.3.2 事件委托的用法 164
7.3.3 哪些地方可以使用
事件委托 166
7.4 巧用EventTrigger組件 167
7.4.1 什麼是EventTrigger
組件 167
7.4.2 EventTrigger用法 168
7.5 常用組件的功能調用 168
7.5.1 UILabel 168
7.5.2 UISprite 169
7.5.3 UITexture 170
7.5.4 UIButton 170
7.5.5 UIGrid 171
7.5.6 UISlider 171
7.5.7 UIToggle 172
7.5.8 UIInput 172
7.5.9 UIPanel 173
7.5.10 UICamera 173
7.6 動畫的控製 174
7.6.1 為什麼要把動畫單獨
提取齣來 174
7.6.2 控製Tween動畫 174
7.6.3 關於PlayTween和
PlayAnimation 176
第8章 實用案例演示 177
8.1 角色頭像狀態欄製作 177
8.1.1 示意圖和需求分析 177
8.1.2 設計並製作UI 178
8.1.3 設計並編寫代碼 181
8.2 場景加載的進度條界麵製作 187
8.2.1 為什麼要做這個界麵 187
8.2.2 異步加載的概念 187
8.2.3 製作一個單獨的加載
界麵場景 188
8.2.4 設計並編寫代碼 189
8.3 技能快捷欄的製作 194
8.3.1 示意圖和需求分析 194
8.3.2 設計並製作UI 194
8.3.3 設計並編寫代碼 197
8.4 角色頭頂血條的跟隨 202
8.4.1 角色頭頂血條的跟隨分析 202
8.4.2 製作血條的UI 202
8.4.3 設計並編寫代碼 203
8.5 NGUI多語言切換的實現 206
8.5.1 什麼是本地化 206
8.5.2 NGUI本地化的原理 206
8.5.3 本地化案例演示 210
第9章 常見疑難問題解答 214
9.1 關於NGUI版本問題 214
9.2 導入NGUI資源包齣錯 214
9.3 如何創建兩個UIRoot 215
9.4 如何讓粒子在界麵上正確顯示 215
9.5 為什麼在父物體上增加透明度
動畫，子物體沒有跟著變化 216
9.6 為什麼動畫播放一遍之後無法
再次正常播放 216
9.7 為什麼3DUI模式下，UI資源
的尺寸Snap後和屏幕的大小比
例不一緻 216
9.8 為什麼UI不受燈光影響 217
9.9 為什麼3D模型放到UIRoot下
就變得看不見瞭 217
9.10 為什麼UI單擊後無法
播放音效 217
9.11 為什麼Depth更大的圖片反而
被Depth小的圖片遮住 218
9.12 怎樣判斷點中的東西是UI 218
9.13 為什麼Label的文字始終
不夠清晰、明亮 218
9.14 為什麼創建的物體有BoxCollider
卻無法接收事件 219
9.15 為什麼改變瞭控件的父物體，
導緻瞭顯示層級錯亂 220
9.16 關於ScrollView滑動的問題 220
· · · · · · (收起)