基于UIPanel的scrollview實現方式在移動設備上的性能不如基于camera的方式。
因為UIPanel的scrollview實現方式要渲染很多的道具圖,性能自然就降低了。
如果是用第二個攝像機camera的方式,物體并沒有動,只是拖動第二個攝像機攝像機,這樣會只渲染第二個攝像機內部能看到的區域,其他看不到的區域不會渲染,性能就比較高。
?
?
層級思路
UIRoot--Camera
--空object(window)
-----LU(UIAnchor或者UIWidget 內置的定位點)
-----RD(UIAnchor或者UIWidget 內置的定位點)
-----背景層(UISprite+BoxCollider + UIDragCamera)
?UIRoot2--Camera2
--Table(Panel+Table面板列表容器)
-----Item0(Widget+BoxCollider +UIDragCamera+UIButtonScale..)
?
?
基于Camera的Scrollview實例
1.創建項目工程和文件目錄
2.創建第一個攝像機,NGUI---->Create---->Sprite然后刪除Sprite留下第一個攝像機,設置UI Root的Scalling Scale為Constrained
3.在UI Root下創建一個空節點Window,下面創建一個子節點Sprite當作背景圖,再給這個背景Sprite添加一個碰撞器Attach---->Collider因為等下要拖動。
再給這個背景Sprite添加Drag Camera組件,可移動的攝像機。
4.以左上角和右下角兩個點為定位點,在UI Root下創建兩個空節點LU和RD,都添加UI Anchor組件(用NGUI Widget也可以),兩個Anchor組件的Container都是相對于背景Spriite,但是Side的話LU對應Top Left,RD對應Buttom Right。
UIAnchor,做簡單的定位用的,9個定位點
UIWidget,內置的定位點,也可以達到同樣的功能,但是定位點可以自己任意的設置
5.創建一個空節點放在第一個UI Root的區域外面,掛載一個UI Root的組件作為第二個UI Root,Scalling Scale設置為Constrained
6.在第二個UI Root下創建一個空節點CameraOutUI,掛載一個Camera的組件,投影模式Projection設置為Orthographic投成2D,Size設置為1,Clliping Planes---->near -10,far 10,Depth深度值一定要比第一個UIRoot的Camera大,越大越在上面
7.給空節點CameraOutUI再添加一個UI Camera和UI ViewPort組件,以及UI Draggable Camera組件可以拖動攝像機
8.設置第二個UI Root的層為Default層,然后設置CameraOutUI的Camera的組件的Culling mask為Default層,只看Default層,Clear Flags設置為Dont Clear可以看見背景
9.設置UI ViewPort組件Source Camera為第一個UI Root的攝像機,Top Left和Buttom Right分別對應剛才創建的LU和RD節點,這是一個對齊的過程,Full Size是控制縮放的。Camera組件里面的Size這時候的大小是計算出來的不能改變。
10.設置UI Draggable Camera組件的Root for Bounds為第二個UI Root節點,ScaleX和Y表示是水平拖還是豎直拖,這里設置Y為0就是水平拖,如果設置X為10就是10倍的水平拖動速度,Scroll Wheel Factor表示鼠標滾軸也可以滑動,值為2,值表示滾動速率
11.在第二個UI Root下創建一個空節點Table,給這個Table掛載一個Table的組件,里面打鉤Hide Inactive隱藏未激活的點,這個很關鍵,Padding設置為x=8,y=8
12.給空節點Table再掛載一個Panel組件,然后在Table下創建一個Widget類型的子節點叫Item0,每一個Item0節點都要Attach---->Colllider,而且要掛載Drag Camera組件關聯第二個UI Root的攝像機
13.設置第一個UI Root的背景節點的Drag Camera組件的Draggable Camera為第二個UI Root的攝像機,這個是為了在拖動背景的時候道具列表也會跟著拖動
14.在Item0下面創建一些Sprite子節點,小Label之類的,可以給Item0加一些特性組件,比如Button Scale按鈕縮放和Play Sound播放聲音組件,然后再復制許多的Item0出來
15.設置Table節點的Tabel組件的Colums列數設置為1,可以看到所有的Item0排成一列,再設置為0,可以看到所有的Item0排成一行。
16.選中第二個UI Root的攝像機,調整位置到剛好是看到這些Item0的最佳位置
17.解析圖
?