Cocos Creator 3.0 入門 ! 2D 素材 3D 效果！
用 2D 素材實現(xiàn) 3D 效果！
前言
好久沒寫教程筆記了，不知大伙是否想念教程干貨了？
溫馨提示：所有內(nèi)容純屬個人瞎玩研究，如要上線項目，請自行評估~ oh
最近逛論壇，看到有一位小伙伴想實現(xiàn)下面這種透視效果。
接著，去找了(扒)這個游戲的素材，都是 2D 圖片。
想到兩個方案可實現(xiàn)：
純 2D 實現(xiàn)：對一張圖片的每個頂點做一次投影變換，算出每個頂點在 2D 屏幕中的坐標(biāo)。 用 3D 實現(xiàn)：調(diào)整相機(jī)參數(shù)，圖片放在 Quad(四方形) 上，布置 3D 場景。
綜合考慮，用 3D 實現(xiàn)相對方便一點，行動起來吧！
實現(xiàn)
本次主要實現(xiàn)兩個點：
透視場景效果 金幣動畫
布置場景
新建場景后，在場景中添加 4 個四方形(Quad)，通過旋轉(zhuǎn)平移縮放，圍成長方體的四個面。
接著創(chuàng)建材質(zhì)（墻 / 地板 / 天花板），采用 builtin-unlit.effect(無光照)，并選取對應(yīng)的texture，再把材質(zhì)加在對應(yīng)的四方形上。
所有都創(chuàng)建完后，是這個樣子的。
這個洞的深處應(yīng)該有個漸變黑影，把這個資源類型改成sprite-frame，并加入場景的 UI 層。
接著調(diào)整一下攝像機(jī)的參數(shù)，讓這個漸變黑影在中間，預(yù)覽運行，結(jié)果如下。
幀動畫
金幣素材是 2D 的幀動畫，要在 3D 實現(xiàn)透視效果，這里同樣采用四方形。
原素材有點擠，我們稍微處理一下，讓其每一幀的圖片位置均勻。
這邊用的是 shoebox 拆圖，然后放在 ps 里調(diào)位置，導(dǎo)出的圖片長寬需要是2 的 n 次冪。
更程序員的做法是寫個腳本分割圖片，再重新生成圖片（或者找美術(shù)爸爸出圖）
同樣的，也建一個金幣材質(zhì)，選擇builtin-unlit.effect，選擇transparent（透明）的通道（因為該圖要用到透明），修改tillingOffset(紋理縮放偏移)參數(shù)。
創(chuàng)建一個四方形，選擇金幣材質(zhì)，添加動畫，修改tillingOffset中的偏移參數(shù)。
創(chuàng)建金幣動畫1
再把動畫過程調(diào)成Const，可以看到初步效果。
最后，多放幾個金幣在場景中，加一些墻紙放墻上～
更多可能
如果你想繼續(xù)把這個做成游戲的話，可以參考以下幾個步驟：
角色也是幀動畫資源，可以放在 UI 層，控制其左右。 角色前進(jìn)：可以通過控制攝像機(jī)向前推進(jìn)。 地圖生成：把地圖塊做成預(yù)制體，根據(jù)相機(jī)的位置，不斷回收前面和生成后面的地圖塊。 碰撞檢測：同樣可以根據(jù)攝像機(jī)的位置以及角色的位置，和帶檢測物體的位置判斷。
小結(jié)
巧用四邊形！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 效果 的技術(shù)分享。歡迎分享給身邊的朋友！
往期精彩
“點贊“ ”在看” 鼓勵一下
▼