楊清彥，像素網絡CTO，《像三國》的技術負責人。以下內容給大家分享他們到底是怎么只用2D接口開發出高大上的3D效果。

有個笑話說，《像三國》剛出來的時候，很多人贊揚他們：Unity3D用得不錯啊。他們說：我們用Cocos做的。我趕緊上去拍馬屁：Cocos 3D用得不錯啊。他們說：我們只用Cocos的2D功能做的。我當時就跪了，很難想像不用3D接口怎么開發出來那樣的效果。

《像三國》是一個集換式策略卡牌游戲，當時我們做出來以后有不少的人問到這個游戲是不是用3D做的，因為看起來有點像2D游戲，但是又有一些3D的元素里面，所以大家比較好奇。但是我們游戲確實是一個2D游戲。這里面的3D效果怎么做的？可以來看一下，其實就像魔術一樣，表面上看起來感覺很驚奇，但是拋開外面的包裹的話，會覺得其實技術原來很簡單，我們大家都會做。
?

先看一下登錄的界面。這個界面看起來可能會有一種錯覺，好象是一個3D的場景，但是其實這里面用的還是一些2D的技術來模擬的3D效果，比如說它看起來有一個景深的效果。
?

這在資源上我們可以看到，這個界面的遠景和近景是有兩個圖層來構成的。背景是用小的帶有一點模糊效果的圖片來作為效果。近景是一張比較簡單的圖片來構成近景。會用到一些動畫的技術，實現了場景看起來被風沙吹，有一種搖動的感覺，看起來更接近于3D效果。
?

這是背景方面。比如說這個燈籠，感覺像是一個模型，但是其實它本身還是一個2D的圖形，用動畫來模擬原生的效果。資源還是這樣幾個簡單的東西，比如說燈籠的背景，燈籠上的圖標的展示。這個燈籠其實看起來好象覺得它有一種遮擋的關系，在搖動的時候會覺得有一部分的被擋住了，看起來這個東西有一點3D的效果。但其實這張圖片本身是沒有經過3D處理得，我們的做法是在燈籠上做了一個裁剪，類似于裁剪的節點類型。這種類型可以提供一個灰度圖，作為裁剪的區域。就是燈籠我們作為一個裁剪的節點，來限制文字寫字的區域，當你的燈籠在動的時候就可以限制它像素的圖片的顯示不會超過裁剪區域，這樣的話，當你運動整個燈籠的話看起來就會有3D的旋轉的效果。就是因為遮擋之后會有一種旋轉的效果。
?

這個場景也是討論比較多的，看起來有點像3D的場景。這場景的美術是用3D的技術來做，我們用的Maya。然后我們看一下場景的一些效果，當時為了更逼真地模擬3D效果，買域名平臺在各個場景之間做切換的時候，有一些過渡的效果，看起來感覺不會像普通2D的游戲，從一個界面跳到另外一個界面，我們做的時候盡可能的用到一些方法，好讓過渡看起來比較自然和平和，像是一個3D模型的旋轉。

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

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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。