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

前言

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

溫馨提示：所有內(nèi)容純屬個(gè)人瞎玩研究，如要上線項(xiàng)目，請自行評估~ oh

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

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

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

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

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

實(shí)現(xiàn)

本次主要實(shí)現(xiàn)兩個(gè)點(diǎn)：

1. 透視場景效果
2. 金幣動(dòng)畫

布置場景

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

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

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

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

接著調(diào)整一下攝像機(jī)的參數(shù)，讓這個(gè)漸變黑影在中間，預(yù)覽運(yùn)行，結(jié)果如下。

幀動(dòng)畫

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

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

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

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

同樣的，也建一個(gè)金幣材質(zhì)，選擇builtin-unlit.effect，選擇transparent(透明)的通道（因?yàn)樵搱D要用到透明），修改tillingOffset(紋理縮放偏移)參數(shù)。

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

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

再把動(dòng)畫過程調(diào)成Const，可以看到初步效果。

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

更多可能

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

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

小結(jié)

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

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

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

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

更多

“點(diǎn)贊“ ”在看”?鼓勵(lì)一下▼