用2D素材實現3D效果!
前言
好久沒寫教程筆記了，不知大夥是否想念教程了？
溫馨提示：所有內容純屬個人瞎玩研究，如要上線項目，請自行評估~ oh
最近逛論壇，看到有一位小夥伴想實現以下這種透視效果。
接着，去找了這個遊戲的素材，都是2d圖片。
這想到兩個方案去實現：
- 純2d實現：對一張圖片的每個頂點做一次投影變換，算出每個頂點在2d屏幕中的座標。
- 用3d實現：調整相機參數，圖片放在
Quad(四方形) 上，佈置3d場景。
綜合考慮，用3d實現相對方便一點，行動起來吧！
實現
本次主要實現兩個點：
- 透視場景效果
- 金幣動畫
佈置場景
新建場景後，在場景中添加4個四方形(Quad)，通過旋轉平移縮放，圍成長方體的四個面。
接着創建材質（牆/地板/天花板），採用 builtin-unlit.effect(無光照)，並選取對應的texture，再把材質加在對應的四方形上。
所有都創建完後，是這個樣子的。
這個洞的深處應該有個漸變黑影，把這個資源類型改成sprite-frame，並加入場景的UI層。
接着調整一下攝像機的參數，讓這個漸變黑影在中間，預覽運行，結果如下。
幀動畫
金幣素材是2d的幀動畫，要在3d實現透視效果這裏同樣採用四方形。
原素材有點擠，我們稍微處理一下，讓其每一幀的圖片位置均勻。
這邊用的是 shoebox 拆圖，然後放在ps裏調位置，導出的圖片長寬需要時2的n次冪。
更程序員的做法是寫個腳本分割圖片，再重新生成圖片（或者找美術爸爸出圖）
同樣的，也建一個金幣材質，選擇builtin-unlit.effect，選擇transparent(透明)的通道（因爲該圖要用到透明），修改tillingOffset(紋理縮放偏移)參數。
創建一個四方形，選擇金幣材質，添加動畫，修改tillingOffset中的偏移參數。
再把動畫過程調成Const，可以看到初步效果。
最後，多放幾個金幣在場景中，加一些牆紙放牆上～
更多可能
如果你想繼續把這個做成遊戲的話，可以參考以下幾個步驟：
- 角色也是幀動畫資源，可以放在UI層，控制其左右。
- 角色前進：可以通過控制攝像機向前推進。
- 地圖生成：把地圖塊做成預製體，根據相機的位置，不斷回收前面的和生成後面的地圖塊。
- 碰撞檢測：同樣可以根據攝像機的位置以及角色的位置，和帶檢測物體的位置判斷。
小結
巧用四邊形！3d效果值得擁有！
遊戲開發程序員必備英語單詞回顧：
opaque-[oʊ'peɪk]不透明的transparent-[træns'perənt]透明的unlit-[ʌn'lɪt]無燈光的
以上爲白玉無冰使用 Cocos Creator 3.0 preview-1 實現 "用2D素材實現3D效果 的技術分享。歡迎分享給身邊的朋友！