Unity高級項目實戰(zhàn)課件02迷你拼圖

1、迷你拼圖11 1玩法介紹2u排列拼圖碎片，拼出最后的圖案!u可以點住碎片的任意位置拖動。u點擊“重來”按鈕，可以回到最初狀態(tài)重新開始2 2流暢的拖曳操作u有很多電腦游戲的原型來自于現(xiàn)實世界中的玩具，拼圖游戲就是其中的一個代表?，F(xiàn)在不僅有圖案簡單的拼圖游戲，甚至還有一些畫面會動的，以及允許自己制作喜歡圖案的拼圖游戲.u無法預(yù)知最終圖案的時候自不必說即使已經(jīng)提前看過了提示的圖案，在拼圖完成后還是能感受到一種愉快的心情，這是為什么呢?大概是因為當(dāng)我們將雜亂無章的東西恢復(fù)到原狀后，產(chǎn)生了一種創(chuàng)造欲被滿足的成就感吧。 u本章中我們開發(fā)的游戲“迷你拼圖”雖然是一款玩法比較簡單的游戲，不過這并不意味著開發(fā)也

2、非常簡單。u相對于其他游戲通過操作鍵盤或移動鼠標(biāo)來控制角色的運動方向，“迷你拼圖”通過鼠標(biāo)的拖曳直接移動拼圖的碎片。u該游戲的核心在于流暢的拖曳操作。3除了拖曳操作之外，也請讀者借此機會思考一下諸如“當(dāng)碎片移動到正確位置附近時會被吸附到正確位置”等對觸屏游戲的開發(fā)也非常有用的Tips .在英文中拼圖游戲叫作Jigsaw，這本來是“鋸子”的意思，或許是因為拼圖游戲最早是用鋸子將木頭切開制作而成的緣故吧。還有一種說法認為這個名字是由游戲失敗的玩家脫口而出的tikusyo“(日語中罵人時的用語，寫作“畜生”。)幾經(jīng)演變而來的。tikusyo tikuso jigsaw“迷你拼圖”是一款即使不擅長拼圖

3、的玩家也能過關(guān)的簡單游戲。另外，據(jù)說貓頭鷹是智慧的象征，真希望能沾沾光呢。42 2流暢的拖曳操作2.12.1腳本一覽u點住碎片的任意位置拖動u打亂拼圖碎片u游戲?qū)ο蠛徒M件之間的關(guān)系52.22.2本章小節(jié)3 3點住碎片的任意位置拖動u3.1關(guān)聯(lián)文件 PieceControl.csu3.2概要“迷你拼圖”中通過鼠標(biāo)拖曳就能移動拼圖碎片，大部分玩家不需要什么說明就能夠上手，大概是因為“拖曳移動”這個設(shè)計非常符合人類天生會“握住東西移動”的習(xí)慣吧。有時候設(shè)計流暢自然的操作就如同空氣一樣，甚至能夠讓玩家忘記其背后是程序在運作。當(dāng)然，要實現(xiàn)這種設(shè)計往往并不簡單。Unity中可以很容易判斷出“某個對象受到了

4、鼠標(biāo)的點擊”，不過如果要實現(xiàn)自然流暢的操作，開發(fā)人員仍需要下些功夫。這里，為了讓鼠標(biāo)的拖曳更加接近“用手指按住移動”的效果，我們需要考慮一下如何才能點住碎片的任意位置進行拖動。73.33.3透視變換和逆透視變換鼠標(biāo)的光標(biāo)位于屏幕上時，其位置坐標(biāo)位于二維坐標(biāo)系內(nèi)。而拼圖碎片位于3D空間內(nèi)，所以其位置坐標(biāo)自然有三個維度。為了比較鼠標(biāo)光標(biāo)和拼圖碎片的位置，必須將它們放人相同的坐標(biāo)系。因此，我們使用逆透視變換的方法，將鼠標(biāo)光標(biāo)的坐標(biāo)變換至三維坐標(biāo)系。關(guān)于逆透視變換的詳細說明，請參考10.2節(jié)。這里只需要記住必須進行坐標(biāo)變換就可以了。其中用到的方法和第10章的“迷蹤賽道”游戲中所用的方法是相同的。83.

5、43.4被點擊處即為光標(biāo)的位置通過逆透視變換將鼠標(biāo)光標(biāo)的坐標(biāo)和拼圖碎片的坐標(biāo)統(tǒng)一到相同的坐標(biāo)系后，我們就該嘗試通過拖曳使拼圖碎片移動了，只需要要在點擊按鍵的瞬間，將鼠標(biāo)光標(biāo)的坐標(biāo)復(fù)制到拼圖碎片的坐標(biāo)即可。動雄確實非常簡單，不過它有個缺點:鼠標(biāo)光標(biāo)總是顯示在拼圖碎片的中心(圖)。9在“迷你拼圖”這個游戲中，拼圖碎片被點擊的位置并不影響游戲的玩法。不過，對于某些游戲而言，點擊位置的不同可能會改變角色的朝向，或者使游戲?qū)ο笠怨鈽?biāo)為中心擺動，這些情況下在何處點擊就變得很重要了。而且，即使不影響游戲的核心玩法，點擊的瞬間拼圖碎片會突然移動一下這種體驗也很糟糕。盡管有時候采用這種機制可能會更好，但是為了應(yīng)

6、對不同的要求，我們還是需要掌握如何能點住碎片的任意處拖動。10在“迷你拼圖”中，碎片的點擊判斷是通過Unity的網(wǎng)格碰撞器(mesh collider)實現(xiàn)的。網(wǎng)格碰撞器采用網(wǎng)格進行碰撞檢測，點擊拼圖碎片的任何部位都將發(fā)生碰撞。對于玩家來說能夠“點擊碎片的哪個位置都可以”，這點反應(yīng)到程序中就是“不用關(guān)心碎片的何處受到了點擊”。點擊的瞬間，鼠標(biāo)光標(biāo)不一定位于碎片的中心。兩者的坐標(biāo)存在一定的差距，我們將這種坐標(biāo)的差距稱為偏移(offset)。之前我們把光標(biāo)的坐標(biāo)原原本本地復(fù)制到碎片坐標(biāo)時，因為兩個坐標(biāo)值相同所以差距為0這種坐標(biāo)差的急劇變化正是導(dǎo)致拼圖碎片突然移動的原因。知道了坐標(biāo)偏移值的變化是問題

7、所在之后，我們來考慮如何固定這個偏移值。首先，要在鼠標(biāo)點擊拼圖碎片的瞬間，也就是開始拖動的時候，計算出鼠標(biāo)光標(biāo)和碎片中心的坐標(biāo)差，得到的值就是偏移值。u偏移 = 碎片的位置 - 鼠標(biāo)光標(biāo)的位置113.43.4被點擊處即為光標(biāo)的位置拖動的過程中則與之相反，用鼠標(biāo)光標(biāo)的位置加上偏移就可以得到碎片的位置。 碎片的位置=鼠標(biāo)光標(biāo)位置+偏移這樣一來，鼠標(biāo)光標(biāo)距離碎片中心總是保持一定的距離，這樣就保證了鼠標(biāo)點擊瞬間的位置就是碎片被拖曳的位置(圖)。下面我們來看看實際的代碼。123.43.4被點擊處即為光標(biāo)的位置u(a)將鼠標(biāo)光標(biāo)位于屏幕上的位置，轉(zhuǎn)換為拼圖所處的3D空間中的坐標(biāo)。如前所述，讀者只需要知道這

8、里進行了逆透視變換就行了。具體的實現(xiàn)和第10章的游戲“迷蹤賽道”中的逆透視變換的實現(xiàn)方法是一樣的(參考10.2.4節(jié))，讀者如果感興趣可以先閱讀該部分內(nèi)容。u(b)計算偏移值，通過碎片中心坐標(biāo)減去鼠標(biāo)光標(biāo)的坐標(biāo)即可算出接下來請看拖曳處理的代碼。13u(c)和剛才相反，用鼠標(biāo)光標(biāo)的位置加上偏移值，得到拼圖碎片的坐標(biāo)。計算公式(c)是由前面代碼中的計算公式(b)變形而來的。143.43.4被點擊處即為光標(biāo)的位置3.53.5測試拖曳碎片的中心“迷你拼圖，游戲中保留了將光標(biāo)的坐標(biāo)直接復(fù)制到拼圖碎片的坐標(biāo)這一操作模式。請在Unity中打開腳本PieceControl.cs，并在文件的開頭處找到如下代碼。

9、將靜態(tài)變量IS_ENABLE_GRAB_OFFSET的值設(shè)為false后，不論點擊碎片哪個位置，在拖動的過程中碎片中心和鼠標(biāo)光標(biāo)的位置總是重合的。也許有些玩家會喜歡這種模式，所以進行這種設(shè)置也未嘗不可。請讀者修改代碼并體驗這兩種方式的區(qū)別。153.63.6小結(jié)具體拖曳拼圖碎片的哪個位置移動其實和游戲的內(nèi)容并無直接關(guān)系，不過游戲操作感的優(yōu)劣在很大程度上會影響游戲的趣味性。內(nèi)容再有趣的游戲，如果操作性太差也將變得毫無樂趣可言。特別是對于通過拖曳操作進行的游戲，這種操作過程中的拖曳體驗正變得越來越重要。164 4打亂拼圖碎片u4.1關(guān)聯(lián)文件uPazzleChecker.cs174.24.2概要商店里

10、售賣紙質(zhì)拼圖游戲時一般會將各拼圖碎片打亂順序后放人包裝盒中。雖然也有些是已經(jīng)拼好的狀態(tài)，不過玩家在開始游戲之前還是要將各碎片的順序打亂。有很多事情都是“人類做起來很簡單，計算機處理起來卻很困難”。比如將拼圖碎片全部打亂這件事就是一個例子。Unity提供了取得隨機數(shù)的方法。不過單純使用該方法似乎并不能達到打亂碎片順序的目的。這里我們不妨來分析一下該如何隨機打亂各拼圖碎片的順序。18u最簡單的隨機打亂拼圖碎片的方法是，直接將隨機數(shù)代人各個碎片的坐標(biāo)。只要控制好隨機數(shù)的范圍，就能讓各個拼圖碎片隨機分布在畫面上。（圖）是將各碎片的坐標(biāo)設(shè)置為隨機數(shù)后的結(jié)果。u如圖所示，有很多拼圖碎片重疊在了一起，有些地

11、方還堆積了好幾片。雖然這樣也未嘗不可，不過可以的話最好還是將各碎片均勻分散開。如果很多碎片重疊在一起，就可能會導(dǎo)致下面的碎片被覆蓋而無法看見。194.34.3設(shè)置拼圖碎片的坐標(biāo)為隨機數(shù)4.44.4改進策略首先我們整理一下讓拼圖碎片隨機散開的要求。閱讀過第一章“怪物”的讀者請回想一下當(dāng)時提到的需求分析。u碎片之間彼此互不重疊u碎片散開分布到整個畫面上u隨機分散各個碎片需求基本上就是這樣。如果拼圖碎片的數(shù)量有所增加，可能還需要追加一項能夠控制游戲的難易度”。接下來我們對實現(xiàn)方法進行講解。首先請簡單熟悉一下整體的流程。(1)將拼圖碎片分配到網(wǎng)格中(2)打亂拼圖碎片的排列順序(3)在網(wǎng)格內(nèi)通過隨機坐標(biāo)

12、調(diào)整碎片的位置(4)將整個拼圖隨機旋轉(zhuǎn)一定角度建議讀者在繼續(xù)閱讀之前先瀏覽一下插圖。內(nèi)容并不復(fù)雜，大體從圖中就可以理解相關(guān)內(nèi)容。下面我們依次對各個步驟進行說明。20首先，將所有的拼圖碎片從左上角開始依次放入網(wǎng)格中(圖).該網(wǎng)格的行數(shù)和列數(shù)相同，并且網(wǎng)格總數(shù)大于拼圖碎片數(shù)量?！柏堫^鷹”拼圖的碎片數(shù)量為8，網(wǎng)格的行數(shù)和列數(shù)各為3，共計9格，空出來的格子不用理會。根據(jù)碎片數(shù)量的不同，有時候剩余的格子會比較多，這種情況下可以調(diào)整網(wǎng)格的行數(shù)和列數(shù)。214.44.4改進策略所有網(wǎng)格塊都為正方形，且都應(yīng)當(dāng)確保能夠容納下拼圖碎片。另外，由于后續(xù)步驟中將在網(wǎng)格內(nèi)移動拼圖碎片，所以還需要在確保整體網(wǎng)格不溢出畫面的

13、前提下適當(dāng)放大網(wǎng)格的尺寸.之所以像這樣把拼圖碎片放置到網(wǎng)格中，是為了避免出現(xiàn)碎片之間彼此重疊的狀況。接下來隨機打亂各個碎片的排列位置(圖)224.44.4改進策略在第一個步驟中，我們將碎片從左上角開始依次放入了網(wǎng)格中。而第二步就是打亂各個碎片的排列順序。利用隨機數(shù)選出兩個網(wǎng)格，然后交換其中的碎片，空白的網(wǎng)格也可以參與交換。做到這里，前面我們做出的需求分析中，“碎片之間彼此互不重疊”、“碎片分散于整個畫面”和“隨機分散各個碎片”就已經(jīng)基本得到了實現(xiàn)。不過從程序?qū)嶋H運行效果來看，很容易發(fā)現(xiàn)拼圖碎片被規(guī)則地排列在了網(wǎng)格上。我們得想辦法讓這種隨機分散的效果更真實。在第三個步驟中，我們讓拼圖碎片在網(wǎng)格中

14、隨機移動(圖)。最初的步驟中增加網(wǎng)格尺寸的用意就在于為這里的碎片移動做準(zhǔn)備。如果網(wǎng)格的尺寸太小，將無法移動碎片，反之如果太大，則會令碎片之間過于松散。請讀者結(jié)合拼圖碎片的大小和畫面整體的尺寸，調(diào)整網(wǎng)格尺寸為最佳值。因為碎片被限制在了各個網(wǎng)格內(nèi)，所以不會出現(xiàn)相鄰碎片之間重疊的現(xiàn)象。這也是將碎片排列在網(wǎng)格上的原因。234.44.4改進策略最后，為了不讓玩家看出碎片排列的規(guī)律性，稍微將拼圖網(wǎng)格整體旋轉(zhuǎn)一定的角度(圖).雖然旋轉(zhuǎn)了整體的網(wǎng)格，但是需要保持拼圖碎片自身的角度不變。 下面，我們結(jié)合實際的代碼梳理一下這個流程。244.44.4改進策略25(a)將拼圖碎片按順序放入網(wǎng)格中。用數(shù)組piece_i

15、ndex存儲各個網(wǎng)格中碎片的編號。值 為-1時表示該網(wǎng)格為空。(b)隨機選出兩個網(wǎng)格，交換其中的碎片。 (b1)請注意在選取網(wǎng)格對象時，并非只是簡單地生成2個隨機數(shù)。這里的做法是，從第一個網(wǎng)格開始，依次為每個網(wǎng)格從其之后的網(wǎng)格中隨機選擇一個交換內(nèi)容的對象。相對于兩個要交換內(nèi)容的網(wǎng)格對象都通過隨機數(shù)來指定，這種做法能減少循環(huán)的次數(shù)，效率更高。28(c)確定了用于放置碎片的網(wǎng)格后，求出實際的XZ坐標(biāo)。只要知道整體網(wǎng)格的中心坐標(biāo) 和各個小網(wǎng)格的尺寸，這個計算過程應(yīng)該很簡單。(d)接下來，在網(wǎng)格內(nèi)將拼圖碎片隨機移動一定的位置。這里我們不使用隨機數(shù)，而使用 一組呈周期性變化的數(shù)值。(d1)更新“呈周期性

16、變化的偏移值(位置坐標(biāo)差)。每次加上offset_add，結(jié)果值將在-offset_cycle/2.0f +offset_cycle/2.0f之間波動。最終的值是使用多組數(shù)據(jù)反復(fù)試驗得出的，沒有什么理論依據(jù)。(e)最后將網(wǎng)格整體進行旋轉(zhuǎn)。和(d)的處理相類似，每次旋轉(zhuǎn)的角度值將從一組呈周期 性變化的數(shù)值中獲取。這是為了盡量避免在反復(fù)操作中使用和上次相同的數(shù)值。旋轉(zhuǎn)的角度在(f)處被更新，以供下次使用。294.44.4改進策略在完成上述各步驟后，各拼圖碎片是否如我們所期待的那樣隨機分散開了呢?讓我們來驗證一下(圖)。通過點擊“重來”按鈕，可以對拼圖碎片重新“洗牌”。該按鈕原本是為玩家重新開始游戲

17、而設(shè)置的，但是考慮到它對制作移動碎片的程序也會起到一定的作用，于是就將其提前設(shè)置了出來。請讀者多點擊幾次“重來”按鈕。已經(jīng)了解了其中緣由的人可能會隱隱約約地看到網(wǎng)格，但不知道的人是完全注意不到的。304.44.4改進策略4.54.5小結(jié)實現(xiàn)“可控隨機化”的核心思想在于，先確定好大致的原則，再向那些能夠隨機控制的參數(shù)代人隨機數(shù)。另外，除了使用隨機數(shù)之外，有時候像本例這樣采用一組呈周期性變化的數(shù)值來進行“偽隨機處理”也能達到不錯的效果。315 5游戲?qū)ο蠛徒M件的關(guān)系u2.5.1關(guān)聯(lián)文件PazzleControl.csPieceControl.cs325.25.2概要這里暫時改變一下討論的內(nèi)容，對U

18、nity中游戲?qū)ο?GameObject)和組件(Component)的關(guān)系進行解說。大家應(yīng)該都知道虛擬形象(avatar)吧。它是用戶在網(wǎng)絡(luò)上的分身，可以通過它和其他用戶進行交流。用戶可以按自己的喜好為一個基本的角色添加各種道具來設(shè)計其形象，這就是所謂的定制(customize)。很多用戶都特別熱衷于各種應(yīng)用和游戲中的虛擬形象的定制功能。這里我們以虛擬形象為例來說明Unity中游戲?qū)ο蠛徒M件的關(guān)系。最后還將介紹在“迷你拼圖”中使用到的組件。335.35.3虛擬形象( (游戲?qū)ο? )和定制( (組件) )虛擬形象一般包含基礎(chǔ)的角色形象和用于定制形象的各種道具。我們暫且將基礎(chǔ)的角色形象稱為素體

19、。有些應(yīng)用中會準(zhǔn)備好幾種素體，不過一般都是比較簡單的設(shè)計。用于定制的道具則有衣服、飾品和發(fā)型等，有些應(yīng)用中道具甚至多達到百種以上。把各種道具添加到素體上從而創(chuàng)造出自己喜歡的角色，這就是虛擬形象的樂趣所在。Unity中游戲?qū)ο蠛徒M件的關(guān)系就如同虛擬形象中素體和道具之間的關(guān)系(圖).34通過向素體追加各種道具，可以制作出與眾不同的角色形象即便用的是同一個素體，從最終的外觀來看也是截然不同的，有時甚至看不出是同一個素體。在Unity中，和虛擬形象的定制過程類似，開發(fā)人員會通過為游戲?qū)ο筇砑痈鞣N組件來設(shè)計游戲需要的東西。角色、地圖以及攝像機等都是由基礎(chǔ)的游戲?qū)ο笱苌鴣淼?。不過基礎(chǔ)的游戲?qū)ο髱缀醪痪邆?/p>

20、任何功能，因此通過添加諸如Rigidbody和Collider之類的組件，把各種需要的功能整合在一起就非常重要了。這也就相當(dāng)于向“游戲?qū)ο蟆边@個素體添加各種叫作“組件”(component)的道具來完成定制(圖)。355.35.3虛擬形象( (游戲?qū)ο? )和定制( (組件) )在虛擬形象的各種道具中，有些是不能同時使用的。比如空氣錘和折紙扇，兩者都是需要手持的道具，無法同時持有(圖)。這里請讀者暫時不要糾結(jié)能不能兩手同時持有這類問題。Unity中也有些組件是無法同時使用的比如SphereCollider和。BoxCollider。這兩個分別是利用球形和箱型進行碰撞檢測的組件。對一個游戲?qū)ο笸?/p>

21、時使用兩種形狀來執(zhí)行碰撞檢測是用，這個類必須繼承于MonoBehaviour，并且類名和文件名必須一致。嚴格來說“Script類和Script組件”是不同的東西，不過這里只是為了了解一下大致的概念，所以姑且把它們看作了相同的東西。365.35.3虛擬形象( (游戲?qū)ο? )和定制( (組件) )37在腳本代碼中常常可以看到this這個單詞。如同它在英文中的本義，它表示類本身。在Script1.cs中使用就表示Script1這個類，在Script2.cs中使用則表示Script2類(圖)。當(dāng)然讀作“Script1類”或者“Scriptl組件”都可以。通過GetComponent()方法可以從游戲

22、對象中訪問各個組件。中需填入組件的名字。如果是Rigidbody就寫成GetComponent()，如果是Scriptl就寫作GetComponent()。反過來，通過this.gameObject可以從組件中訪問游戲?qū)ο?圖)。雖然多數(shù)情況下會省略this只寫gameObject，但這里為了便于說明，我們加上了this.385.35.3虛擬形象( (游戲?qū)ο? )和定制( (組件) )5.5GetComponent()5.5GetComponent()的縮寫u在Unity5中此番方法已經(jīng)過時，如果個人有意愿了解或者使用Unity以下版本的可以在網(wǎng)上搜索自行學(xué)習(xí)一下。395.65.6刪除Gam

23、eObjectGameObject很多Unity初學(xué)者都會把刪除游戲?qū)ο蟮拇a寫作Destroy(this) ;，但事實上這樣的寫法并不能刪除游戲?qū)ο?。正確的寫法應(yīng)該是Deotroy(this.gameObject);。讀到這里，想必讀者應(yīng)該已經(jīng)知道原因了(圖)。Script.cs中使用的this指的是Script1，也就是組件本身，因此如果寫作Destroy(this) ,就僅能刪除Script1組件。要刪除整個游戲?qū)ο?，就必須將游戲?qū)ο笞鳛閰?shù)傳入Destroy方法，因此Destroy(this.gameObject)才是正確的寫法。40415.75.7迷你拼圖的應(yīng)用實例最后，我們來介紹在“迷你拼圖”中使用到的組件。為了控制拼圖碎片，“迷你拼圖”中創(chuàng)建了名為Piece Control的類。另外，判斷鼠標(biāo)點擊還需要用到Rigidbody組件(圖)。雖然這里也可以使用Unity編輯器添加預(yù)設(shè)，不過為了簡化工序，我們在游戲開始時通過腳本來添加組件。拼圖由許多碎片構(gòu)成，每個碎片都可以視作一個網(wǎng)格(mesh)。除拼圖碎片外，用于放置拼圖的底板也是一個網(wǎng)格，它