Unity3D UGUI中ScrollRect的一些知識點


 需求

這幾天在公司里,項目需要將游戲游戲中的2D城堡界面在拉動的時候顯示出3D的拉近效果。當時是在Cocos2d-x下實現的。回家的時候自己重新用Unity實現的了一遍。

雖然現在Unity已經到了5.0時代,從4.6時代起Unity就開始支持原生2D了,網絡上大部分的教程還是NGUI。畢竟原生的也是開源的,詳細以后也會慢慢取代NGUI。

 解決思路

 需要在拉動的過程中顯示出由遠及近不通層次的效果,自然想到了利用Scroll類型的控件。Unity中原生2D中使用到的時ScrollRect組件。

 在Canvas中,我新建了一個ScrollRect。修改名字為ScrollView。ScrollRect的使用十分的簡單,Content與滾動內容進行關聯后就可以直接使用。Horizontal,Vertical設置十分允許在水平、垂直方向滾動。MovementType可以設置3中滾動類型。Inertia可以控制是否在拖動結束后繼續慣性滑行一段距離。具體參數說明Unity官方有詳細的API資料。

創建ScrollView成功之后,添加了需要滾動的控件。我要做的是在ScrollRect滾動的時候,根據滾動的情況對其內部控件進行縮放。

在insparcter面板的右下角同時列出了ScrollRect在運用工程中可以使用的控件。

我需要在拖動的時候進行操作,這里就需要用到OnDrag事件。

 1 using UnityEngine;
 2 using UnityEngine.UI;
 3 using UnityEngine.EventSystems;
 4 using System.Collections;
 5 
 6 public class BackgroundManager : MonoBehaviour,IDragHandler
 7 {
 8     ScrollRect scrollRect;
 9     RectTransform content;
10 
11     public float startNum = 263f;
12     public float scaleArg1 = 0.5f;
13     public float scaleArg2 = 0.2f;
14     public float scaleArg3 = 0.1f;
15 
16     public GameObject top;
17     public GameObject middle;
18     public GameObject buttom;
19 
20     void Start ()
21     {
22         scrollRect = gameObject.GetComponent<ScrollRect> () as ScrollRect;
23         content = scrollRect.content;
24     
25     }
26     public void OnDrag (PointerEventData data)
27     {
28         //Debug.Log (content.position);
29         float changeScale1 = GetChangeScale (content.position.y, 1);
30         float changeScale2 = GetChangeScale (content.position.y, 2);
31         float changeScale3 = GetChangeScale (content.position.y, 3);
32         buttom.gameObject.transform.localScale = 
33             new Vector3 (changeScale1, changeScale1, 1);
34         middle.gameObject.transform.localScale = 
35             new Vector3 (changeScale2, changeScale2, 1);
36         top.gameObject.transform.localScale = 
37             new Vector3 (changeScale3, changeScale3, 1);
38     }
39 
40     float GetChangeScale (float changeCondition, int position)
41     {
42         float changeScale = 1f;
43         switch (position) {
44         case 1:
45             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg1;
46             break;
47         case 2:
48             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg2;
49             break;
50         case 3:
51             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg3;
52             break;
53         default:
54             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224);
55             break;
56         }
57 
58         return changeScale;
59     }
60 
61 }

我這里只由於只使用到OnDrag,所以只繼承了IDragHander接口。

將寫好的腳本添加到ScrollRect中,初始化運行后就可以看到效果了。

 擴展

 使用到了滾動層,在實際的應用中自然少不了遮罩的問題。在之前的博文中,我有寫到了文字跑馬燈的實現。其實可以直接使用ScrollRect+遮罩的方式進行實現。

原生2D中的Mash可以很方便的實現。在Mash中添加Image可以控制Mash的樣式。

也可以設置Image的Source Image自定義遮罩的形狀。

 結論

 原生的ScrollRect用起來還是比較方便的,游戲開發中道具的展示,場景的切換控制都常需要用到。

 有需要的朋友可以下載源代碼自己運行:下載

 

博客地址: http://www.cnblogs.com/nightcat/
博客版權: 本文以學習、研究和分享為主,歡迎轉載,但必須在文章頁面明顯位置給出原文連接。
如文中有不妥或者錯誤的地方還望高手的指出,以免誤人子弟。如果覺得本文對您有所幫助請【推薦】一下!如果你有更好的建議,不妨留言一起討論,共同進步! 再次感謝您耐心的讀完本篇文章。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM