用2D素材實現(xiàn)3D效果!

前言

好久沒寫教程筆記了，不知大伙是否想念教程了？

溫馨提示：所有內容純屬個人瞎玩研究，如要上線項目，請自行評估~ oh

最近逛論壇，看到有一位小伙伴想實現(xiàn)下面這種透視效果。

接著，去找了(扒)這個游戲的素材，都是2d圖片。

這想到兩個方案去實現(xiàn)：

1. 純2d實現(xiàn)：對一張圖片的每個頂點做一次投影變換，算出每個頂點在2d屏幕中的坐標。
2. 用3d實現(xiàn)：調整相機參數(shù)，圖片放在 Quad (四方形) 上，布置3d場景。

綜合考慮，用3d實現(xiàn)相對方便一點，行動起來吧！

實現(xiàn)

本次主要實現(xiàn)兩個點：

1. 透視場景效果
2. 金幣動畫

布置場景

新建場景后，在場景中添加4個四方形(Quad)，通過旋轉平移縮放，圍成長方體的四個面。

接著創(chuàng)建材質（墻/地板/天花板），采用 builtin-unlit.effect(無光照)，并選取對應的texture，再把材質加在對應的四方形上。

所有都創(chuàng)建完后，是這個樣子的。

這個洞的深處應該有個漸變黑影，把這個資源類型改成sprite-frame，并加入場景的UI層。

接著調整一下攝像機的參數(shù)，讓這個漸變黑影在中間，預覽運行，結果如下。

幀動畫

金幣素材是2d的幀動畫，要在3d實現(xiàn)透視效果這里同樣采用四方形。

原素材有點擠，我們稍微處理一下，讓其每一幀的圖片位置均勻。

這邊用的是 shoebox 拆圖，然后放在ps里調位置，導出的圖片長寬需要是2的n次冪。

更程序員的做法是寫個腳本分割圖片，再重新生成圖片（或者找美術爸爸出圖）

同樣的，也建一個金幣材質，選擇builtin-unlit.effect，選擇transparent(透明)的通道（因為該圖要用到透明），修改tillingOffset(紋理縮放偏移)參數(shù)。

創(chuàng)建一個四方形，選擇金幣材質，添加動畫，修改tillingOffset中的偏移參數(shù)。

創(chuàng)建金幣動畫1

再把動畫過程調成Const，可以看到初步效果。

最后，多放幾個金幣在場景中，加一些墻紙放墻上～

更多可能

如果你想繼續(xù)把這個做成游戲的話，可以參考以下幾個步驟：

1. 角色也是幀動畫資源，可以放在UI層，控制其左右。
2. 角色前進：可以通過控制攝像機向前推進。
3. 地圖生成：把地圖塊做成預制體，根據(jù)相機的位置，不斷回收前面的和生成后面的地圖塊。
4. 碰撞檢測：同樣可以根據(jù)攝像機的位置以及角色的位置，和帶檢測物體的位置判斷。

小結

巧用四邊形！3d效果值得擁有！

游戲開發(fā)程序員必備英語單詞回顧：

• opaque - [o?'pe?k] 不透明的
• transparent - [tr?ns'per?nt] 透明的
• unlit - [?n'l?t] 無燈光的

以上為白玉無冰使用 Cocos Creator 3.0 preview-1 實現(xiàn) "用2D素材實現(xiàn)3D效果 的技術分享。歡迎分享給身邊的朋友！

更多

“點贊“ ”在看”?鼓勵一下▼