點點滴滴
posts - 311, comments - 0, trackbacks - 0, articles - 0
C++博客
::
首頁
::
新隨筆
::
聯系
::
聚合
::
管理
(搬運工)NGUI官網示例6 – Draggable Window講解(一)
Posted on 2013-10-15 11:48
點點滴滴
閱讀(585)
評論(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 © 點點滴滴
日歷
<
2014年10月
>
日
一
二
三
四
五
六
28
29
30
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
7
8
公告
留言簿
(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
游戲
搜索
積分與排名
積分 - 469729
排名 - 45
最新評論
色综合久久久久综合体桃花网
|
国内精品久久久久影院网站
|
77777亚洲午夜久久多人
|
久久久久亚洲精品天堂久久久久久
|
亚洲一级Av无码毛片久久精品
|
狠狠色丁香久久婷婷综合蜜芽五月
|
99久久久久
|
无码人妻久久一区二区三区蜜桃
|
亚洲av成人无码久久精品
|
国产精品免费看久久久
|
久久午夜无码鲁丝片午夜精品
|
亚洲中文久久精品无码ww16
|
女人香蕉久久**毛片精品
|
日本精品久久久久影院日本
|
久久久久久夜精品精品免费啦
|
国产69精品久久久久9999
|
亚洲伊人久久精品影院
|
久久本道综合久久伊人
|
奇米影视7777久久精品
|
久久久久国产日韩精品网站
|
久久国产精品99国产精
|
久久无码AV中文出轨人妻
|
久久激情五月丁香伊人
|
1000部精品久久久久久久久
|
久久亚洲精品成人无码网站
|
久久久久国产精品三级网
|
Xx性欧美肥妇精品久久久久久
|
久久66热人妻偷产精品9
|
7777精品伊人久久久大香线蕉
|
久久亚洲中文字幕精品有坂深雪
|
熟妇人妻久久中文字幕
|
久久亚洲AV无码西西人体
|
日本久久久精品中文字幕
|
久久久久女人精品毛片
|
日产精品久久久久久久
|
综合网日日天干夜夜久久
|
国产精品久久久久a影院
|
中文字幕精品久久
|
日产精品久久久久久久
|
久久精品国产亚洲av麻豆蜜芽
|
亚洲国产精品狼友中文久久久
|