如何設(shè)計(jì)游戲中的斜45°角建筑物？

Novtilus Art的CEO Junxue Li在Gamasutra上發(fā)表博客《How to Design Isometric Buildings》分享在游戲開發(fā)中設(shè)計(jì)斜45°角建筑物的經(jīng)驗(yàn)，著眼點(diǎn)較為有趣，或許對(duì)于年輕開發(fā)者來(lái)說(shuō)有一定參考價(jià)值。觸樂網(wǎng)將該博客全文編譯，作為他山之石，供有興趣的讀者參考。

編者注：“isometric”指的是在平面圖紙上繪制三維物體的一種透視方法，稱為“isometric projection”，可以譯為“等角投影”。這種透視方法用平行斜線表現(xiàn)立體和空間感，圖像不受視點(diǎn)和消滅的影響，大部分圖像的x、y、z三軸互相以120°角相交，即我們經(jīng)常提到的斜45°視角。在建筑學(xué)和工程領(lǐng)域，采用這種透視方法的工程圖稱為“軸測(cè)圖”，它同時(shí)也是我們高中學(xué)習(xí)立體幾何畫正方體時(shí)所采用的透視方法。該透視方法經(jīng)常被應(yīng)用于2D游戲開發(fā)之中，如《部落沖突》等。感謝讀者老爺出井緒指正。

其實(shí)有點(diǎn)兒標(biāo)題黨了，實(shí)際上這篇文章不是關(guān)于如何設(shè)計(jì)其本質(zhì)的，比如如何使用顏色、形式，如何繪圖……這些在美院的長(zhǎng)期訓(xùn)練中都可以掌握。相反，這篇文章為你在這個(gè)特別的領(lǐng)域提供了一些有用的技巧，可以幫助你的斜45°角建筑的概念設(shè)計(jì)可以更好地適應(yīng)生產(chǎn)線。

■ 開始之前

你有三個(gè)事情需要考慮清楚：

1、靈感來(lái)源

你最好能將你的設(shè)計(jì)立足于現(xiàn)實(shí)中存在的東西，比如說(shuō)啟發(fā)自新奧爾良或開羅貧民窟中的建筑。這會(huì)讓你的設(shè)計(jì)更有生氣。哪怕你的游戲是個(gè)幻想主題的，你也別純靠想象來(lái)繪制。

我最近發(fā)現(xiàn)PS2神作《汪達(dá)與巨像》很大程度上受到了印度建筑的啟發(fā)，如下圖：

在這一步中，你要盡量收集相關(guān)的圖片資料。我們?cè)谧约旱捻?xiàng)目中從各種渠道收集了邁阿密、開羅、布拉格的圖片，如果你有預(yù)算，甚至可以直接安排旅行。

2、風(fēng)格和產(chǎn)品美術(shù)的質(zhì)感

這是你計(jì)劃達(dá)到的目標(biāo)。你可以學(xué)習(xí)市面上游戲的斜45°角建筑，找出你想要的風(fēng)格和質(zhì)感，比如：

如果現(xiàn)有案例不能滿足你，你可以請(qǐng)你的團(tuán)隊(duì)做些基于經(jīng)驗(yàn)的創(chuàng)造，設(shè)計(jì)出一兩個(gè)范例來(lái)作為項(xiàng)目目標(biāo)。

3、等構(gòu)網(wǎng)格設(shè)計(jì)

像這樣對(duì)稱、均勻的斜45°角設(shè)置，你只需要選擇角A的值或a/b的值。

對(duì)于這樣的不對(duì)稱設(shè)計(jì)，你當(dāng)然不可能隨手畫出網(wǎng)格。如果使用這樣不符合透視的線條，那如果你打算設(shè)計(jì)三維建筑，它就不可能與玩家視角匹配。

一般來(lái)說(shuō)這種網(wǎng)格是游戲設(shè)計(jì)團(tuán)隊(duì)和客戶提供的，你不需要擔(dān)心這樣無(wú)聊的事！所以當(dāng)你接手這份工作時(shí)第一件事就是去找他們要網(wǎng)格。

■ 設(shè)計(jì)期間

1、決定建筑的尺寸

在你有了網(wǎng)格之后就要設(shè)計(jì)建筑尺寸了。比如電話亭是1x1的，而超市是3x3的。還要設(shè)計(jì)建筑的高度，是一個(gè)單位還是兩個(gè)單位？

2、匹配細(xì)節(jié)尺寸

當(dāng)你將建筑放在地圖上時(shí)，所有的細(xì)節(jié)都應(yīng)該是匹配的。最需要注意的是門和窗戶，如果你發(fā)現(xiàn)一個(gè)建筑上的門是人類的尺寸，而另一建筑上的門卻像是給哥布林設(shè)計(jì)的，那就不合理且非常奇怪了。

如圖，房子前有一排小紅人兒，我們將其作為“標(biāo)準(zhǔn)人”。他們?cè)谒薪ㄖO(shè)計(jì)中與網(wǎng)格的比例關(guān)系都是不變的。當(dāng)我們做設(shè)計(jì)時(shí)，我們將其視為真人，所有的建筑都要合乎這個(gè)比例。

偶爾我們也會(huì)打破這個(gè)標(biāo)準(zhǔn)，比如當(dāng)我們?cè)O(shè)計(jì)足球場(chǎng)這樣實(shí)在太大的建筑時(shí)。如果依然遵循標(biāo)準(zhǔn)，那么這個(gè)足球場(chǎng)可能大得蓋滿或超過屏幕。你看在實(shí)際游戲中，這個(gè)虛擬人要大于“標(biāo)準(zhǔn)人”，你知道這是為什么。

3、色指定

如圖，設(shè)置色指定，它在你之后將建筑量產(chǎn)的時(shí)候會(huì)是很好的指導(dǎo)，尤其對(duì)于色彩豐富的建筑來(lái)說(shuō)。

4、指定材料

你需要像這樣制定建筑中每一個(gè)部分的材料：

而對(duì)于顯而易見的事情，比如窗戶是玻璃的，椅子是木頭的之類的，就不用去管了。

5、繪圖角度

通常，適合網(wǎng)格的繪圖看起來(lái)會(huì)很好，像這樣：

此外，你還可以畫一個(gè)更平的視圖：

這可以讓團(tuán)隊(duì)的美術(shù)人員（包括2D和3D）更好地理解建筑。

另一件需要考慮的事情是，你需要在游戲中像這樣翻轉(zhuǎn)建筑嗎？

如果是，你就需要畫更多角度。如下圖，游戲不需要翻轉(zhuǎn)角度，所以原畫師只需要畫一幅圖，你只會(huì)看到這個(gè)3D建筑的前面，而后面是空的（沒必要管永遠(yuǎn)不會(huì)被看見的畫面）。

6、研究空間

做些空間和建筑的研究，確保你的繪圖在現(xiàn)實(shí)中可行（除非你的游戲像《紀(jì)念碑谷》那樣打算創(chuàng)造一種視覺誤差），否則人們將你的概念圖用于游戲中時(shí)會(huì)產(chǎn)生困難。

7、動(dòng)畫

你會(huì)希望在建筑中增加一些變化來(lái)讓它更有生氣，比如輪盤旋轉(zhuǎn)、風(fēng)向標(biāo)轉(zhuǎn)向、旗幟飄揚(yáng)。斜45°角建筑有兩類動(dòng)畫，一是固態(tài)部分的變化，二是燈光閃爍或河水流動(dòng)這樣的特效。處理燈光時(shí)，畫一張燈光全部亮起的圖片。

8、“建成”動(dòng)畫

一些游戲中你可以看到建筑建成的過程，是由建筑中不同進(jìn)程的畫面構(gòu)成的?，F(xiàn)實(shí)中蓋樓時(shí)，先起鋼骨，再上混凝土，最后裝飾外觀。在設(shè)計(jì)建筑進(jìn)程概念圖時(shí)，你可以用倒序。首先畫好完成建筑的概念圖，然后移去一部分，畫出暴露的部分，再畫出鋼骨……

9、加入3D模型

找到3D渲染圖片（或照片）并加入設(shè)計(jì)中比自己畫要更快，這是我們的工程實(shí)例：

卡車：

船：

椅子：

10、可再利用圖片

在設(shè)計(jì)一個(gè)項(xiàng)目時(shí)，會(huì)有很多重復(fù)使用的元素：椅子、雨傘、窗戶等。謹(jǐn)慎處理這些圖片，可以節(jié)省你很多畫同樣圖片的時(shí)間。

[ 本文編譯自：Gamasutra.com | 原作者：Junxue Li ]