By Greg Matsura

（譯者 @Kohlrabic ）

原文地址：

http://gregandaduck.blogspot.com/2014/12/how-to-make-game-like-fez-in-unity-part.html

譯者前言：

由于該教程發(fā)表時間較早，新版本Unity中有一處不能兼容的地方（當(dāng)前參照版本2020.3.14f），譯者沒有做出修改，大家練習(xí)時根據(jù)引擎提示修改即可解決問題。立方體貼圖的詳細(xì)講解可以參照馬老師之前的教程：

最近我碰巧最近看到了一篇由Renaud Bédard撰寫的技術(shù)文章， 他曾作為程序員參與了知名獨(dú)立游戲FEZ的開發(fā)。在這篇名為Cubes All The Way Down的文章中, Renaud介紹了他在開發(fā)FEZ專屬游戲引擎和關(guān)卡編輯器時所運(yùn)用到的一些技巧與方法。隨著我閱讀的逐步深入，我對于重現(xiàn)這個有趣的3D旋轉(zhuǎn)機(jī)制的欲望也逐漸變得強(qiáng)烈起來。

在FEZ中，你將扮演一名叫做Gomez的小男孩，他得到了可以通過旋轉(zhuǎn)來穿越平面次元的fez帽，隨后踏上了拯救世界的旅程。

FEZ的旋轉(zhuǎn)機(jī)制非常的有趣，但同時也對開發(fā)者提出了十分巨大的技術(shù)挑戰(zhàn)。根據(jù)Renaud的描述，為了游戲的順利開發(fā)，他們制作了自己專用的關(guān)卡編輯器。游戲中的立方體是由6個獨(dú)立的平面組合而成，每個面都有自己專屬的圖片。這樣的結(jié)構(gòu)滿足了當(dāng)玩家進(jìn)行旋轉(zhuǎn)操作時，立方體的每一個面都能夠顯示出它所獨(dú)有的貼圖，這極大地提高了游戲的視覺效果，給玩家?guī)砹烁玫捏w驗(yàn)。

我們選用Unity 引擎作為開發(fā)的起點(diǎn)。在Unity引擎中我們可以使用正交相機(jī)(orthographic camera)，幫助我們在特定的方向上方便地將3維場景顯示為2D效果。

也許一開始大家都不是很清楚如何來完成整個游戲的機(jī)制。這篇教程將會分為三小節(jié)，我將會帶領(lǐng)你了解如何在Unity引擎中搭建一個類似于FEZ的游戲原型，實(shí)現(xiàn)基本的功能。

在第一篇教程中，我們將會制作一個立方體，作為我們打造整個關(guān)卡的基礎(chǔ)。那么讓我們開始吧。

★為立方體設(shè)置貼圖

- - 開啟Unity 并創(chuàng)建一個新項(xiàng)目（推薦使用4.6或者以上的版本）。

- - 創(chuàng)建一個立方體，選中立方體，通過右側(cè)的inspector來調(diào)整立方體的參數(shù)。

- - 將立方體設(shè)置在(0,0,0)處 （之后的教程中我們將會編寫一個自動對齊的腳本，將我們的立方體自動對齊在整數(shù)單元位置上）。

- - 創(chuàng)建一個C# 腳本并將其命名為UVCCube 。

（譯者音：下面的UV mApping有一些錯誤，有兩個面的顯示會有一點(diǎn)小問題，請大家自行研究修改，作為課后作業(yè)）

UVCCube腳本內(nèi)容：

那么什么是UV（紋理坐標(biāo)）呢？UV定義了圖片上每個點(diǎn)的位置的信息。這些點(diǎn)與3D模型是相互聯(lián)系的, 以決定表面紋理貼圖的位置。 UV就是將圖像上每一個點(diǎn)精確對應(yīng)到模型物體的表面，這是一種在游戲引擎和3D建模軟件中通用的顯示貼圖方法。Unity中的立方體的UV初始被設(shè)置為材質(zhì)會直接覆蓋整個立方體。我們的圖片會在整個立方體的各個面上被拉伸。

為了模擬FEZ引擎中的體積像素，我們需要在立方體的每個面上正確顯示不同的貼圖。一般像這樣的立方體我們稱之為三維像素或者體積像素Voxel，在FEZ圈子中人們習(xí)慣將它叫做Trixel，但事實(shí)上它們是一樣的。上面的腳本會給我們的立方體的每一個面貼上正確的圖片，在游戲中所有的立方體上面我們都會使用這個腳本。

接下來我們需要準(zhǔn)備應(yīng)用在我們的立方體上面的圖片。我根據(jù)freeblood的原則創(chuàng)建了下面的樣本。

Freeblood的名字源自它的縮寫FRBLUD，分別代表著代表著前(front)，右(right)，左(left)，上(up)，和下(down)。這是我們的圖片按著立方體六個面應(yīng)被創(chuàng)建的順序，按著這個原則配合我們的腳本可以快速地創(chuàng)建出擁有不同貼圖的立方體。

保存下面的貼圖模板作以供我們的立方體使用，并按照下面的示例圖片進(jìn)行設(shè)置。

在這里我們將UVCube腳本的tile size 設(shè)置為0.125 。我們每面的貼圖寬度為16像素，上面所給出的貼圖模板（1）的寬度為128像素，因此立方體每面所用到的是我們圖片寬度的12.5%。我們的腳本會按著該百分比將圖片設(shè)置在我們的立方體每個面上。如果設(shè)置正確，當(dāng)我們按下Play時，將會看到下面的效果：

★使立方體貼圖在游戲運(yùn)行前能夠正確顯示

這時可能有的同學(xué)會發(fā)現(xiàn)，在我們沒有運(yùn)行游戲之前是無法正確顯示立方體的貼圖的。這是因?yàn)橹挥性谟螒蜻\(yùn)行情況下ApplyTexture() 函數(shù)才被調(diào)用。接下來我們寫一個腳本，添加一個ApplyTexture的按鈕，使我們在沒有運(yùn)行游戲之前就可以實(shí)現(xiàn)立方體的貼圖。這會幫助我們在搭建關(guān)卡時更加輕松。

首先建立一個名為Editor的文件夾，用來存放我們的腳本。在這里我們可以改變或者增加Unity編輯器的功能。用這種方法我們就可以隨意地拓展Unity編輯器的功能。

在你的Editor腳本里添加如下代碼：

通過這個腳本，Unity將會自動將這個腳本添加到所有類型為UVCube的對象下。腳本中的DrawDefaultInpector() 函數(shù)會被自動調(diào)用，并在UVCube的菜單中創(chuàng)建名為ApplyTexture的按鈕。當(dāng)那個按鈕被按下時，就會調(diào)用我們立方體上面的ApplyTextureFunction()函數(shù)。

這時我們就可以按下立方體上面的 ApplyTextrue 按鈕來更新立方體的貼圖，直接在編輯器中看到貼圖的效果，而不用每次都去運(yùn)行游戲了。

★讓物體自動按網(wǎng)格排列（吸附到網(wǎng)格）

接下來，我們將會在我們的Unity編輯器中添加自動吸附到網(wǎng)格的功能。在Unity編輯器中搭建場景時，立方體的對齊將會消耗大量的工作時間，因此我們需要為編輯器添加自動對齊物體的功能。為了達(dá)到這一點(diǎn)，在Editor文件夾中創(chuàng)建一個名為AutoSnap腳本。在腳本中使用如下的代碼：

要使用自動對齊的功能，首先選中一個掛載了該腳本的物體，按下ctrl+L(在Win os中),或者CMD+L(在Mac os中)。這時你可以看到彈出的AutoSnap功能的窗口。確保自動對齊功能開啟，并且單元長度（unit）設(shè)置為1?，F(xiàn)在無論你如何在場景中復(fù)制這個立方體，立方體都會自動在網(wǎng)格上以單元長度為單位進(jìn)行對齊。在我們擺放剩下的任何立方體之前首先要想到的就是將這個腳本設(shè)置為生效，保證我們始終對齊在網(wǎng)格之上。這樣我們就可以更加輕松地搭建我們的世界了。

提示：如果通過熱鍵你可以看到自動對齊的選項(xiàng)窗口，但是磚塊無法自動對齊，這時你需要點(diǎn)擊運(yùn)行游戲一次然后停止它。此時再次按下熱鍵，嘗試移動磚塊，應(yīng)該就能夠自動對齊了。

前期工作都準(zhǔn)備好了，那么是時候搭建我們的場景了。

首先在你的游戲場景中創(chuàng)建兩個空物體，手動設(shè)置它們的坐標(biāo)為(0,0,0)。將其中一個命名為Buildings（建筑），另一個命名為Platforms（平臺）。將我們的立方體設(shè)置為Platforms的子物體，在hierarchy窗口的顯示中應(yīng)該像是這個樣子：

提示：你可以按下熱鍵 Ctrl+D或者CMD+D來快速復(fù)制物體。

為了進(jìn)一步完善游戲，在我們的關(guān)卡中心加入一個垂直方向的柱子。

為此我創(chuàng)建了一個新的貼圖樣本供大家使用。使用方法和上面的土地磚塊貼圖一樣。創(chuàng)建一個新的立方體并且把它設(shè)為Building Game Object 的子物體（不要忘記給我們的立方體添加 UVCube 腳本）。

按照下面的示例搭建場景：

到此為止我們的前期工作已經(jīng)全部完成了。在教程的下一章節(jié)中我們將會去學(xué)習(xí)如何創(chuàng)建一個可以移動的2D精靈圖角色。恭喜，到目前為止你已經(jīng)準(zhǔn)備好了一個類FEZ的關(guān)卡編輯器！