「Unity」UGUI系列教程——監聽事件!完成解謎!

「Unity」UGUI系列教程——監聽事件!完成解謎!

前言

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

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

參考遊戲

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

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

開始準備一些資源

背景圖片

「Unity」UGUI系列教程——監聽事件!完成解謎!

找一個可愛的字體

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

製作第一個關卡

創建界面

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

創建一個Text組件

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

調整大小,輸入抬頭

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

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

UI的拖拽操作

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

播放效果:

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

運行的效果:

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

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

「Unity」UGUI系列教程——監聽事件!完成解謎!

運行效果:

「Unity」UGUI系列教程——監聽事件!完成解謎!


分享到:


相關文章: