上一次用UGUI實現了拼圖小遊戲,此次,咱們來用NGUI來實現html
實現原理數組
NGUI中提供了拖拽的基類UIDragDropItem,因此咱們要作的就是在要拖拽的圖片上加一個繼承於該類的腳本,並實現其中的方法便可dom
1 public class DragOnPic : UIDragDropItem { 2 3 protected override void OnDragDropStart () 4 { 5 base.OnDragDropStart (); 6 } 7 8 protected override void OnDragDropRelease (GameObject surface) 9 { 10 base.OnDragDropRelease (surface); 11 } 12 }
拼圖遊戲實例ide
一、準備拼圖素材,因爲NGUI使用的Atlas爲Texture,因此不能用UGUI中裁剪圖片的方法,因此偷了一下懶,從網上找了一個小工具把圖片裁剪了一下。。工具
二、給圖片命名,爲了最後檢測簡單一點,因此我這裏統一命名爲f-0~f-15,並製做Atlasthis
下面的基本操做步驟跟UGUI大同小異,因此咱們這裏搞一個不同的方式,Unity中不作任何操做,只在攝像機上掛一個腳本ImageCreater來調用咱們的代碼spa
1 void Start () { 2 //調用UIManager中生產圖片的方法. 3 UIManager.Instance.CreatPics(); 4 }
新建一個UIManager類,下面是該類的內容:code
1 public class UIManager { 2 3 //單例. 4 private static UIManager instance; 5 public static UIManager Instance{ 6 get{ 7 if(instance == null) 8 { 9 instance = new UIManager(); 10 } 11 return instance; 12 } 13 } 14 private UIManager(){} 15 16 //根節點. 17 UIPanel panel; 18 19 public void CreatPics() 20 { 21 panel = NGUITools.CreateUI(false); 22 23 //添加Grid組件用於自動排列圖片. 24 UIGrid grid = NGUITools.AddChild<UIGrid>(panel.gameObject); 25 26 //設置grid各個屬性. 27 grid.arrangement = UIGrid.Arrangement.Horizontal; 28 grid.maxPerLine = 4; 29 grid.cellWidth = 100; 30 grid.cellHeight = 100; 31 grid.pivot = UIWidget.Pivot.TopLeft; 32 grid.transform.localPosition = new Vector3(-150, 150, 0); 33 34 //從Resources文件夾中動態加載Atlas 35 UIAtlas myAtlas = Resources.Load<UIAtlas>("Atlas/MyAtlas"); 36 37 //經過GameManager獲得一個隨機數數組. 38 int[] randomIndex = GamaManager.RandomArray(); 39 40 //生成圖片. 41 for (int i = 0; i < 16; i++) { 42 UISprite cell = NGUITools.AddChild<UISprite>(grid.gameObject); 43 44 //設置圖片容器的Atlas及圖片名稱. 45 cell.atlas = myAtlas; 46 cell.spriteName = "box"; 47 cell.name = "f-" + i.ToString(); 48 49 //添加UIDragDropContainer組件用於接收圖片. 50 UIDragDropContainer container = NGUITools.AddMissingComponent<UIDragDropContainer>(cell.gameObject); 51 container.reparentTarget = cell.transform; 52 53 //添加顯示圖片的sprite. 54 UISprite sprite = NGUITools.AddChild<UISprite>(cell.gameObject); 55 sprite.atlas = myAtlas; 56 sprite.spriteName = "f-" + randomIndex[i]; 57 58 sprite.tag = "Cell"; 59 60 //設置sprite的depth使其能顯示在上方. 61 sprite.depth = cell.depth + 1; 62 63 //爲圖片添加BoxCollider組件用於鼠標交互,並從新設置它的大小與圖片大小一致. 64 NGUITools.AddMissingComponent<BoxCollider>(sprite.gameObject); 65 sprite.autoResizeBoxCollider = true; 66 sprite.ResizeCollider(); 67 68 //添加咱們本身寫的DragOnPic腳本用於實現拖拽功能. 69 NGUITools.AddMissingComponent<DragOnPic>(sprite.gameObject); 70 } 71 } 72 73 }
拖拽腳本:orm
1 public class DragOnPic : UIDragDropItem { 2 3 UISprite _sprite; 4 5 Transform myParent; 6 7 void OnEnable() 8 { 9 _sprite = this.GetComponent<UISprite>(); 10 } 11 12 13 protected override void OnDragDropStart () 14 { 15 //開始拖拽時增長depth,是其能顯示在別的圖片上方. 16 _sprite.depth += 50; 17 18 //開始拖拽時記下本身的父物體. 19 myParent = this.transform.parent; 20 21 //父類的方法. 22 base.OnDragDropStart (); 23 } 24 25 protected override void OnDragDropRelease (GameObject surface) 26 { 27 //父類的方法. 28 base.OnDragDropRelease (surface); 29 30 //鬆開鼠標時若是是另外一張圖片,則交換兩張圖片的位置,不然重置本身的位置. 31 if(surface.tag == "Cell") 32 { 33 this.transform.SetParent(surface.transform.parent); 34 surface.transform.SetParent(myParent); 35 this.transform.localPosition = Vector3.zero; 36 surface.transform.localPosition = Vector3.zero; 37 } 38 else { 39 this.transform.localPosition = Vector3.zero; 40 } 41 42 //拖拽結束時判斷是否完成拼圖. 43 if(GamaManager.CheckWin()) 44 { 45 NGUIDebug.Log("Win!!!!"); 46 } 47 48 //結束拖拽時重置depth. 49 _sprite.depth -= 50; 50 } 51 52 }
GameManager中判斷是否完成拼圖分方法跟UGUI中的相似,這裏就很少寫了~~~htm
好了,大功告成!