【Unity】UGUI系列教程——監聽事件！完成解謎！

前言

剛開始準備寫UI系列的時候，我本來想以教科書方式來一步一步推進知識點，但是這個可能就會成為一個非常冗長枯燥的系列內容。知識點固然要積累，但只有自己遇到問題相關的知識點，大腦才能樂意的把它存儲進去。

學習不應該是一種痛苦的過程，尤其是作為我們喜歡遊戲的讀者來說，能把自己的想法和創意在現實中表達出來，那成就感簡直是太棒了！

參考遊戲

現在最囧遊戲2出來了，筆者玩了幾局不得不佩服作者的腦洞無比的大。 裡面很多關卡設置的很有新意，比如將讓你找吃的，最後你將鑽石的中間拉到糞便下方組成冰淇淋通關。讓你找船長的鉤子，結果是文字內容裡面的問號。遊戲內容很有趣，同時它的實現方法很簡單，利用點擊和拖拽的事件就可以做到了。

那麼我們這篇文章的目標就是製作一款像最囧遊戲一樣的簡單益智解謎遊戲。

開始準備一些資源

背景圖片

找一個可愛的字體

直接在攻略網站上下載圖片，然後PS扣取圖片

然後全部將圖片放在Unity工程中設置Sprite格式（注意修改圖片名字成英文）

字體文件創建個Font名字的文件夾存放

（ArtRes目錄是自定義創建的目錄，用來存放美術資源。工程文件劃分清楚結構是一個很有必要事情）

製作第一個關卡

創建界面

創建一個新的畫布，在畫布下面新建一個Image組件作為背景層圖片。將Image組件的SourceImage選定為作業本的Sprite，調整好圖片寬度和高度，鋪滿屏幕。

創建一個Text組件

組件的字體選擇我們網上下載的字體

調整大小，輸入抬頭

這裡注意這裡的字體是純顯示用的，因此不能勾選RaycastTarget選項，否則我們的點擊事件會點到字體上。

加入更多的裝飾物體，這裡先將鑽石中間我們要用來達成通關的物體加上一個Button組件

基本上第一關的界面完成了，感覺像是那麼回事，接下來要開始實現操作功能

UI的拖拽操作

創建一個DragUI名字的腳本，他主要功能為實現我們的拖拽操作。該腳本繼承IDragHandler介面,這樣Unity會檢測到該UI發生拖拽操作的時候進入OnDrag函數

讓輸入的位置直接賦值給UI物體

將腳本拖到我們要移動的物體上

播放效果：

判定當前UI是否到達位置點

創建一個空的物體，添加2D碰撞腳本，設置BoxCollider2D的Size大小適應我們想判定成功的區域大小

因為我們是在抬起操作的時候判定UI是否達到目標區域，因此在DragUI中增加點擊位置抬起介面。

在OnPointerUp（）函數中我們利用Unity的碰撞檢測，檢測UI是否在設定的目標區域內。如果處於目標區域我們將UI固定到目標區域位置。

這裡新添加了名為targetCol的屬性，用來關聯外部的目標碰撞區域，將之前設置的目標物體拖到腳本的targetCol框中完成綁定。

運行的效果：

增加一個結算界面

我們將之前拼的界面UI放在一個名為Tran_Puzzle空的掛點下，表示解謎界面。創建一個Tran_Pass空的掛點，裡面放一個Text文本寫上通關的文字，表示一個通過界面。

這樣我們就可以直接控制兩個掛點的開關激活來實現界面的變化

在這裡我們拖拽UI到達目標點後，代碼只要將解謎界面關閉，通關界面打開就實現該次通關。

運行效果：

完整的遊戲流程

現在解謎遊戲的基本功能都大體實現了，但是實際上的遊戲流程會在此基礎上優化結構和功能。

UI預製體化

首先我們不能把UI界面直接放在場景裡面做存儲，我們應該把做好的UI界面存放為一個預製體，不然我們做一個有10個解謎關卡的遊戲，每個界面都放在場景中激活關閉就太麻煩了。

我們將剛做好的Canvas物體保存為預製體，修改名字為Page_Level01，意義為第一關界面

整理需要的腳本

DragUI：該腳本判定遊戲是否通關，同時實現拖拽UI的效果

LevelInfo：用來記錄當前關卡的數據信息，這裡用來保存切換解謎和通關兩個界面的掛點

LevelOver：處理關卡結束，告訴LevelManager可以開始下一關了。

LevelManager：保存我們的所有關卡數據，當前的關卡進度。

LevelInfo腳本存儲當前的界面信息

LevelOver腳本處理每次通關，點擊UI事件後，調用開始關卡函數。

設計第二關

和第一關設計是一樣的，我們這裡單獨的將問號用一個Text文件來顯示，加上DragUI腳本，並在船長的右手加上一個目標區域。

拼接完UI，我們將第二關的Canvas界面改名為Page_Level02做成預製體

創建一個空物體，掛載LevelManager，並把我們的關卡預製體賦值給LevelManager的LevelList

運行後的效果

總結

Unity的事件監聽很簡單，只用腳本繼承介面然後寫一個實現函數就搞定了，但是UGUI自身的時間卻不怎麼好用，網上有很多重構事件監聽的教程，可以看看。另外做這篇教程的時候沒有考慮到一個更好的功能，可以直接利用Unity自身的UI碰撞事件（PointerEventData），來判斷抬起滑鼠是否到達了目標區域，由於篇幅就不做具體介紹了。

最後附上源碼：

https://github.com/chs71371/DragDemo

對遊戲開發感興趣的同學，歡迎圍觀我們：【皮皮關遊戲開發教育】 ，會定期更新各種教程乾貨，更有別具一格的線下小班教育。在你學習進步的路上，有皮皮關陪你！~

我們的官網地址：http://levelpp.com/

我們的遊戲開發技術交流群：610475807

我們的微信公眾號：皮皮關