0. 前言

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

學(xué)習(xí)不應(yīng)該是一種痛苦的過程，尤其是作為我們喜歡游戲的讀者來說，能把自己的想法和創(chuàng)意在現(xiàn)實(shí)中表達(dá)出來，那成就感簡直是太棒了！

1. 參考游戲

前幾天被安利玩了最囧游戲2，筆者不得不佩服作者的腦洞無比的大。 里面很多關(guān)卡設(shè)置的很有新意，比如將讓你找吃的，最后你將鉆石的中間拉到糞便下方組成冰淇淋通關(guān)。讓你找船長的鉤子，結(jié)果是文字內(nèi)容里面的問號。游戲內(nèi)容很有趣，同時(shí)它的實(shí)現(xiàn)方法很簡單，利用點(diǎn)擊和拖拽的事件就可以做到了。

那么我們這篇文章的目標(biāo)就是制作一款像最囧游戲一樣的簡單益智解謎游戲。

開始準(zhǔn)備一些資源

背景圖片

找一個(gè)可愛的字體

直接在攻略網(wǎng)站上下載圖片，然后PS扣取圖片

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

字體文件創(chuàng)建個(gè)Font名字的文件夾存放

（ArtRes目錄是自定義創(chuàng)建的目錄，用來存放美術(shù)資源。工程文件劃分清楚結(jié)構(gòu)是一個(gè)很有必要事情）

2. 制作第一個(gè)關(guān)卡

創(chuàng)建界面

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

創(chuàng)建一個(gè)Text組件

組件的字體選擇我們網(wǎng)上下載的字體

調(diào)整大小，輸入抬頭

這里注意這里的字體是純顯示用的，因此不能勾選RaycastTarget選項(xiàng)，否則我們的點(diǎn)擊事件會點(diǎn)到字體上。

加入更多的裝飾物體，這里先將鉆石中間我們要用來達(dá)成通關(guān)的物體加上一個(gè)Button組件

基本上第一關(guān)的界面完成了，感覺像是那么回事，接下來要開始實(shí)現(xiàn)操作功能

UI的拖拽操作

創(chuàng)建一個(gè)DragUI名字的腳本，他主要功能為實(shí)現(xiàn)我們的拖拽操作。該腳本繼承IDragHandler接口,這樣Unity會檢測到該UI發(fā)生拖拽操作的時(shí)候進(jìn)入OnDrag函數(shù)

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

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

播放效果：

判定當(dāng)前UI是否到達(dá)位置點(diǎn)

創(chuàng)建一個(gè)空的物體，添加2D碰撞腳本，設(shè)置BoxCollider2D的Size大小適應(yīng)我們想判定成功的區(qū)域大小

因?yàn)槲覀兪窃谔鸩僮鞯臅r(shí)候判定UI是否達(dá)到目標(biāo)區(qū)域，因此在DragUI中增加點(diǎn)擊位置抬起接口。

在OnPointerUp（）函數(shù)中我們利用Unity的碰撞檢測，檢測UI是否在設(shè)定的目標(biāo)區(qū)域內(nèi)。如果處于目標(biāo)區(qū)域我們將UI固定到目標(biāo)區(qū)域位置。

這里新添加了名為targetCol的屬性，用來關(guān)聯(lián)外部的目標(biāo)碰撞區(qū)域，將之前設(shè)置的目標(biāo)物體拖到腳本的targetCol框中完成綁定。

運(yùn)行的效果：

增加一個(gè)結(jié)算界面

我們將之前拼的界面UI放在一個(gè)名為Tran_Puzzle空的掛點(diǎn)下，表示解謎界面。創(chuàng)建一個(gè)Tran_Pass空的掛點(diǎn)，里面放一個(gè)Text文本寫上通關(guān)的文字，表示一個(gè)通過界面。

這樣我們就可以直接控制兩個(gè)掛點(diǎn)的開關(guān)激活來實(shí)現(xiàn)界面的變化

在這里我們拖拽UI到達(dá)目標(biāo)點(diǎn)后，代碼只要將解謎界面關(guān)閉，通關(guān)界面打開就實(shí)現(xiàn)該次通關(guān)。

運(yùn)行效果：

3.0 完整的游戲流程

現(xiàn)在解謎游戲的基本功能都大體實(shí)現(xiàn)了，但是實(shí)際上的游戲流程會在此基礎(chǔ)上優(yōu)化結(jié)構(gòu)和功能。

UI預(yù)制體化

首先我們不能把UI界面直接放在場景里面做存儲，我們應(yīng)該把做好的UI界面存放為一個(gè)預(yù)制體，不然我們做一個(gè)有10個(gè)解謎關(guān)卡的游戲，每個(gè)界面都放在場景中激活關(guān)閉就太麻煩了。

我們將剛做好的Canvas物體保存為預(yù)制體，修改名字為Page_Level01，意義為第一關(guān)界面

整理需要的腳本

DragUI：該腳本判定游戲是否通關(guān)，同時(shí)實(shí)現(xiàn)拖拽UI的效果

LevelInfo：用來記錄當(dāng)前關(guān)卡的數(shù)據(jù)信息，這里用來保存切換解謎和通關(guān)兩個(gè)界面的掛點(diǎn)

LevelOver：處理關(guān)卡結(jié)束，告訴LevelManager可以開始下一關(guān)了。

LevelManager：保存我們的所有關(guān)卡數(shù)據(jù)，當(dāng)前的關(guān)卡進(jìn)度。

LevelInfo腳本存儲當(dāng)前的界面信息

LevelOver腳本處理每次通關(guān)，點(diǎn)擊UI事件后，調(diào)用開始關(guān)卡函數(shù)，該腳本掛載在通關(guān)界面的按鈕上。

設(shè)計(jì)第二關(guān)

和第一關(guān)設(shè)計(jì)是一樣的，我們這里單獨(dú)的將問號用一個(gè)Text文件來顯示，加上DragUI腳本，并在船長的右手加上一個(gè)目標(biāo)區(qū)域。

拼接完UI，我們將第二關(guān)的Canvas界面改名為Page_Level02做成預(yù)制體

創(chuàng)建一個(gè)空物體，掛載LevelManager，并把我們的關(guān)卡預(yù)制體賦值給LevelManager的LevelList

運(yùn)行后的效果

最后附上項(xiàng)目源碼：

https://github.com/chs71371/DragDemo

對游戲開發(fā)感興趣的同學(xué)，歡迎圍觀我們：【皮皮關(guān)游戲開發(fā)教育】 ，會定期更新各種教程干貨，更有別具一格的線下小班教育。在你學(xué)習(xí)進(jìn)步的路上，有皮皮關(guān)陪你！~

我們的官網(wǎng)地址：http://levelpp.com/

我們的游戲開發(fā)技術(shù)交流群：610475807

我們的微信公眾號：皮皮關(guān)