點點滴滴
posts - 311, comments - 0, trackbacks - 0, articles - 0
C++博客
::
首頁
::
新隨筆
::
聯系
::
聚合
::
管理
(搬運工)NGUI官網示例6 – Draggable Window講解(一)
Posted on 2013-10-15 11:48
點點滴滴
閱讀(583)
評論(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年9月
>
日
一
二
三
四
五
六
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
1
2
3
4
5
6
7
8
9
10
11
公告
留言簿
(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
游戲
搜索
積分與排名
積分 - 468071
排名 - 45
最新評論
无码人妻少妇久久中文字幕
|
亚洲成色www久久网站夜月
|
久久精品国产色蜜蜜麻豆
|
激情综合色综合久久综合
|
99久久国产热无码精品免费久久久久
|
亚洲va久久久噜噜噜久久
|
亚洲精品无码久久久久去q
|
99精品国产免费久久久久久下载
|
久久毛片免费看一区二区三区
|
久久97久久97精品免视看
|
久久精品18
|
色99久久久久高潮综合影院
|
亚洲人成网站999久久久综合
|
亚洲国产精品无码久久九九
|
久久久久久久免费视频
|
亚洲精品无码久久千人斩
|
久久无码人妻一区二区三区
|
久久久婷婷五月亚洲97号色
|
国内精品久久久久久野外
|
国产午夜精品理论片久久
|
亚洲人成无码久久电影网站
|
日韩人妻无码精品久久免费一
|
欧美噜噜久久久XXX
|
亚洲精品无码久久久久久
|
久久综合欧美成人
|
欧美成a人片免费看久久
|
少妇精品久久久一区二区三区
|
狠狠88综合久久久久综合网
|
国产成人久久久精品二区三区
|
伊人久久无码精品中文字幕
|
久久人人妻人人爽人人爽
|
国产—久久香蕉国产线看观看
|
欧美久久久久久
|
91精品国产乱码久久久久久
|
亚洲а∨天堂久久精品9966
|
久久精品中文无码资源站
|
A级毛片无码久久精品免费
|
99久久精品国产一区二区
|
日韩精品久久久久久
|
亚洲国产精品无码久久一区二区
|
国产精品无码久久久久
|