點點滴滴
posts - 311, comments - 0, trackbacks - 0, articles - 0
C++博客
::
首頁
::
新隨筆
::
聯系
::
聚合
::
管理
(搬運工)NGUI官網示例6 – Draggable Window講解(一)
Posted on 2013-10-15 11:48
點點滴滴
閱讀(587)
評論(0)
編輯
收藏
引用
所屬分類:
02 編程語言
看了以上幾個教程,估計大家對
NGUI
的前幾個實例有所了解,建議自己做一遍,這樣可以加深對它的理解。接下來,我將詳細描述創作可拖拽窗口的制作過程。在這里我分四步來完成:一、制作和布局界面;二、制作
gui
的動態效果和拖拽功能;三、制作燈光效果;
一、
制作和布局界面。
1.
在
NGUI
菜單中,打開
Create a new UI
對話框
,
在對話框中設置
Camera
為
Advanced3D,
并點擊
Create your UI
,此時在
Hierarchy
窗口中生成了對應的層次結果,如圖所示:
調整該層次結果,使得
Camera
與
Panel
脫離,并且
Camera
和
Panel
也脫離
UI Root
(
3D
)刪除
Anchor
和
UIRoot
(
3D
),創建一個
Scene
空的游戲對象,
reset
一下,再創建一個
3DUI
空游戲對象,
reset
一下,再創建一個
Window
游戲對象,
reset
一下,同時
Panel
也
reset
一下,最后調整它們之間的層級結構,(不斷地
reset
是為了更好地定位各個元件),
Window
和
3DUI
等這些空物體只是為了方便管理場景中的元素而已,同時把
Camera
的
postion
中
z
值設置為
-1.7
,這樣可以使得
GUI
和攝像機之間有一定的距離,并設置攝像機的
near
為
0.01
,其結果為:
選擇
Panel
,為其添加一個帶有法線貼圖的背景,選擇
Create a new widget
窗口,選擇
Template
為
TiledSprite
模板,
Sprite
為
HoneyComb
作為背景,其參數如下,設置完成之后點擊
Add to
,為該
gui
添加一個
Tiled Sprite
,作為
景,保證該按鈕后面的值為
panel
:
添加
Tiled Sprite
之后,把它縮放到
x=490
,
y=510
,顏色設置成黑色,如圖所示:
為了看到法線貼圖的效果,選擇
Panel
,勾選
Normals
,并為場景添加一盞平行光,調整光線的角度,最終效果如圖所示:
為該窗口添加一個窗口的邊框,選擇
Create a new Widget
對話框,選擇
Template
為
SlicedSprite
模板,
Sprite
為
Button
作為背景,設置參數之后,點擊
Add To
創建一個
Sliced Sprite
,創建完之后,選擇該
Sliced Sprite
,設置其
Dept
為
-1
,
Color Tint
為綠色,大小為
x=498
,
y=515
,比背景稍微大一些,可以看到在窗口的邊緣出現了綠色的邊框,如圖所示:
為窗口添加一個頂欄,選擇
Create a new Widget
對話框,設置參數之后,點擊
Add To
,創建一個
Sliced Sprite
。創建完之后,選擇該
Sliced Sprite
,調整它的位置和大小,參數和效果如圖所示:
創建窗口標題。選擇
Create a new Widget
對話框,選擇
Template
為
Label
,點擊
Add to
,為窗口創建一個
Label
,在
Label
的文本輸入框中輸入
Example Draggable Window
,并在場景編輯窗口中調整它的位置,其參數和最終結
如下圖所示:
用同樣的方法,為其添加另外一個
Label
,或者直接使用
Ctrl+D
復制出一個出來,修改它的文字內容,設置它的
line width
為
460
,調整它的位置,結果如圖所示:
創建
Logo
圖標。選擇
Create a new Widget
對話框,選擇
template
中的
sprite
,
Sprite
為
NGUI
,選擇
Add to
,為窗口添加一個
Logo
圖標,調整它的位置,最終效果如圖所示:
創建兩個
Checkbox
。同樣選擇
Create a new Widget
對話框,選擇
template
中的
checkbox
,
background
設置為
Dark
,
Checkmark
為
X
,最后點擊
Add to
,為窗口添加一個
Checkbox
。選擇
Checkbox
中的
Label
,把文本修改為
Enable
AutoYaw
。再選擇
Checkbox
中的
Background
,把
Color Tint
選擇為藍色。調整該
Checkbox
的位置。接著,使用
ctrl+D
復制出另外一個
Checkbox
,把這個
checkbox
里面的文本修改為
Enable DragTilt
,放置在右邊,最后效果如圖
示:
創建兩個按鈕。選擇
Create a new Widget
對話框,選擇
template
中的
Button
,
background
選擇
Button
,最后點擊
Add to
,為窗口添加一個按鈕。選擇該按鈕下的
label
,修改文本為
Hello
,選擇其下的
background
,設置
Color Tin
為藍色,放置在合適的位置。接著使用
Ctrl+D
,復制出另外一個
button
,并把其下的
label
的文本設置為
World
,放置在合適的位置。最終效果如圖所示:
Powered by:
C++博客
Copyright © 點點滴滴
日歷
<
2025年8月
>
日
一
二
三
四
五
六
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
公告
留言簿
(9)
給我留言
查看公開留言
查看私人留言
隨筆分類
(268)
01 數學基礎(5)
02 編程語言(175)
03 編程工具(6)
04 硬件基礎(2)
05 圖像基礎(3)
06 多媒體
07 壓縮加密
08 游戲SDK(10)
09 游戲策劃(3)
10 服務器(42)
11 生活隨想(12)
12工具收集(1)
19 源碼收集(9)
隨筆檔案
(311)
2017年5月 (1)
2016年12月 (2)
2016年11月 (7)
2014年10月 (4)
2014年9月 (2)
2014年7月 (1)
2014年2月 (1)
2013年11月 (4)
2013年10月 (42)
2013年8月 (1)
2013年7月 (1)
2013年6月 (3)
2013年5月 (3)
2013年4月 (2)
2013年3月 (4)
2013年2月 (3)
2013年1月 (2)
2012年11月 (3)
2012年10月 (3)
2012年9月 (12)
2012年8月 (8)
2012年7月 (47)
2012年6月 (3)
2012年5月 (4)
2012年3月 (4)
2012年2月 (5)
2012年1月 (2)
2011年12月 (5)
2011年11月 (4)
2011年10月 (3)
2011年9月 (5)
2011年8月 (2)
2011年7月 (2)
2011年6月 (7)
2011年5月 (13)
2011年4月 (9)
2011年3月 (17)
2011年2月 (9)
2011年1月 (25)
2010年12月 (10)
2010年11月 (24)
2010年10月 (2)
相冊
blog
游戲
搜索
積分與排名
積分 - 471738
排名 - 45
最新評論
亚洲国产精久久久久久久
|
午夜久久久久久禁播电影
|
亚洲国产精品人久久
|
久久99精品久久久久久水蜜桃
|
九九久久精品国产
|
久久九九兔免费精品6
|
色综合久久久久久久久五月
|
国产精品久久久久久久久鸭
|
国产精品久久久久久久久久免费
|
伊人久久成人成综合网222
|
久久国产精品无码一区二区三区
|
久久99精品久久久久久噜噜
|
色偷偷久久一区二区三区
|
久久精品免费网站网
|
久久久久亚洲精品无码蜜桃
|
日日狠狠久久偷偷色综合0
|
国产成人精品综合久久久久
|
久久免费看黄a级毛片
|
日本强好片久久久久久AAA
|
99久久99久久精品国产
|
蜜臀久久99精品久久久久久小说
|
精品无码久久久久久国产
|
无码AV波多野结衣久久
|
久久频这里精品99香蕉久
|
91亚洲国产成人久久精品
|
久久精品国产亚洲av高清漫画
|
欧美大战日韩91综合一区婷婷久久青草
|
中文字幕久久久久人妻
|
国产69精品久久久久9999
|
www.久久99
|
国产99精品久久
|
狠狠色丁香久久综合婷婷
|
久久99精品久久只有精品
|
色8久久人人97超碰香蕉987
|
精品人妻伦九区久久AAA片69
|
国产三级观看久久
|
国内精品久久久久影院免费
|
99久久无色码中文字幕
|
国内精品久久久人妻中文字幕
|
久久精品九九亚洲精品
|
国产精品青草久久久久婷婷
|