需求
這幾天在公司里,項目需要將游戲游戲中的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/
博客版權: 本文以學習、研究和分享為主,歡迎轉載,但必須在文章頁面明顯位置給出原文連接。
如文中有不妥或者錯誤的地方還望高手的指出,以免誤人子弟。如果覺得本文對您有所幫助請【推薦】一下!如果你有更好的建議,不妨留言一起討論,共同進步! 再次感謝您耐心的讀完本篇文章。