楊清彥，像素網(wǎng)絡(luò)CTO，《像三國(guó)》的技術(shù)負(fù)責(zé)人。以下內(nèi)容給大家分享他們到底是怎么只用2D接口開發(fā)出高大上的3D效果。

有個(gè)笑話說(shuō)，《像三國(guó)》剛出來(lái)的時(shí)候，很多人贊揚(yáng)他們：Unity3D用得不錯(cuò)啊。他們說(shuō)：我們用Cocos做的。我趕緊上去拍馬屁：Cocos 3D用得不錯(cuò)啊。他們說(shuō)：我們只用Cocos的2D功能做的。我當(dāng)時(shí)就跪了，很難想像不用3D接口怎么開發(fā)出來(lái)那樣的效果。

《像三國(guó)》是一個(gè)集換式策略卡牌游戲，當(dāng)時(shí)我們做出來(lái)以后有不少的人問(wèn)到這個(gè)游戲是不是用3D做的，因?yàn)榭雌饋?lái)有點(diǎn)像2D游戲，但是又有一些3D的元素里面，所以大家比較好奇。但是我們游戲確實(shí)是一個(gè)2D游戲。這里面的3D效果怎么做的？可以來(lái)看一下，其實(shí)就像魔術(shù)一樣，表面上看起來(lái)感覺(jué)很驚奇，但是拋開外面的包裹的話，會(huì)覺(jué)得其實(shí)技術(shù)原來(lái)很簡(jiǎn)單，我們大家都會(huì)做。
?

先看一下登錄的界面。這個(gè)界面看起來(lái)可能會(huì)有一種錯(cuò)覺(jué)，好象是一個(gè)3D的場(chǎng)景，但是其實(shí)這里面用的還是一些2D的技術(shù)來(lái)模擬的3D效果，比如說(shuō)它看起來(lái)有一個(gè)景深的效果。
?

這在資源上我們可以看到，這個(gè)界面的遠(yuǎn)景和近景是有兩個(gè)圖層來(lái)構(gòu)成的。背景是用小的帶有一點(diǎn)模糊效果的圖片來(lái)作為效果。近景是一張比較簡(jiǎn)單的圖片來(lái)構(gòu)成近景。會(huì)用到一些動(dòng)畫的技術(shù)，實(shí)現(xiàn)了場(chǎng)景看起來(lái)被風(fēng)沙吹，有一種搖動(dòng)的感覺(jué)，看起來(lái)更接近于3D效果。
?

這是背景方面。比如說(shuō)這個(gè)燈籠，感覺(jué)像是一個(gè)模型，但是其實(shí)它本身還是一個(gè)2D的圖形，用動(dòng)畫來(lái)模擬原生的效果。資源還是這樣幾個(gè)簡(jiǎn)單的東西，比如說(shuō)燈籠的背景，燈籠上的圖標(biāo)的展示。這個(gè)燈籠其實(shí)看起來(lái)好象覺(jué)得它有一種遮擋的關(guān)系，在搖動(dòng)的時(shí)候會(huì)覺(jué)得有一部分的被擋住了，看起來(lái)這個(gè)東西有一點(diǎn)3D的效果。但其實(shí)這張圖片本身是沒(méi)有經(jīng)過(guò)3D處理得，我們的做法是在燈籠上做了一個(gè)裁剪，類似于裁剪的節(jié)點(diǎn)類型。這種類型可以提供一個(gè)灰度圖，作為裁剪的區(qū)域。就是燈籠我們作為一個(gè)裁剪的節(jié)點(diǎn)，來(lái)限制文字寫字的區(qū)域，當(dāng)你的燈籠在動(dòng)的時(shí)候就可以限制它像素的圖片的顯示不會(huì)超過(guò)裁剪區(qū)域，這樣的話，當(dāng)你運(yùn)動(dòng)整個(gè)燈籠的話看起來(lái)就會(huì)有3D的旋轉(zhuǎn)的效果。就是因?yàn)檎趽踔髸?huì)有一種旋轉(zhuǎn)的效果。
?

這個(gè)場(chǎng)景也是討論比較多的，看起來(lái)有點(diǎn)像3D的場(chǎng)景。這場(chǎng)景的美術(shù)是用3D的技術(shù)來(lái)做，我們用的Maya。然后我們看一下場(chǎng)景的一些效果，當(dāng)時(shí)為了更逼真地模擬3D效果，買域名平臺(tái)在各個(gè)場(chǎng)景之間做切換的時(shí)候，有一些過(guò)渡的效果，看起來(lái)感覺(jué)不會(huì)像普通2D的游戲，從一個(gè)界面跳到另外一個(gè)界面，我們做的時(shí)候盡可能的用到一些方法，好讓過(guò)渡看起來(lái)比較自然和平和，像是一個(gè)3D模型的旋轉(zhuǎn)。

我們以登錄為例，在這個(gè)地方首先是這里有一個(gè)場(chǎng)景，這個(gè)城墻是登錄界面的城墻，給玩家的感覺(jué)是從登錄進(jìn)入主場(chǎng)景的時(shí)候，讓他感覺(jué)是從山上的場(chǎng)景跟隨鏡頭的移動(dòng)進(jìn)入到主場(chǎng)景里，而不是一個(gè)2D界面的切換效果。這是怎么做的？其實(shí)也比較簡(jiǎn)單，就是說(shuō)我們提供了幾張比較模糊的過(guò)渡場(chǎng)景的圖片。當(dāng)把這幾張模糊的過(guò)渡圖片串聯(lián)起來(lái)以一個(gè)動(dòng)畫形式來(lái)播放的時(shí)候，看起來(lái)就會(huì)有3D界面切換的效果。從程序上來(lái)看，還是需要一些技術(shù)，工具上提供制作的支持。我們用的是Cocos Builder。這個(gè)工具給大家介紹一下，這里面可以把Cocos里面常用的精靈、節(jié)點(diǎn)可以把這些東西組合起來(lái)，可以構(gòu)成一個(gè)模型。這個(gè)模型可以在編輯器里對(duì)它設(shè)置很多的動(dòng)畫幀。比如你做一個(gè)人物模型的話，你套上時(shí)間軸，會(huì)表現(xiàn)出很多運(yùn)動(dòng)的效果。我們用標(biāo)準(zhǔn)的做法，實(shí)現(xiàn)方法也比較類似，用靜態(tài)的圖片和粒子構(gòu)成整個(gè)場(chǎng)景。在場(chǎng)景上針對(duì)每一張圖片、一些粒子和一些節(jié)點(diǎn)去設(shè)置不同的運(yùn)動(dòng)的動(dòng)畫時(shí)間線。這些時(shí)間線編輯就類似于3D的骨骼動(dòng)畫，你可以選擇其中某一條時(shí)間線來(lái)播放，這樣就可以按照你在編輯器里設(shè)計(jì)的縮放和旋轉(zhuǎn)的效果來(lái)進(jìn)行場(chǎng)景動(dòng)畫的播放。
?

卡牌翻轉(zhuǎn)：其實(shí)這個(gè)地方我們是用的兩張圖片來(lái)模擬這樣的效果，紋理都是在Maya里面預(yù)烘焙好了的。第一張圖片就是這樣一個(gè)卡牌的背面，這張圖片我們首先還是通過(guò)設(shè)置它的屬性，讓它可以扭曲成這樣子。大家比較疑惑為什么可以做這樣一張圖片的扭曲，實(shí)際上有一個(gè)扭曲的屬性，可以讓一張平面的圖片可以做傾斜或扭曲的效果，就類似于這種。然后你在結(jié)合縮放和旋轉(zhuǎn)。進(jìn)入到切換狀態(tài)的時(shí)候，比如說(shuō)到這個(gè)位置的時(shí)候，可以把背面的卡牌隱藏掉，用另外一張正面的卡牌替換掉他，同樣用反向的手段讓這張卡牌轉(zhuǎn)，就可以實(shí)現(xiàn)翻面類似于3D的效果。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的杨清彦：《像三国》游戏3D动效制作经验分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。