2D實(shí)現(xiàn)背景圖3D滾動效果(透視) !Cocos Creator !

戰(zhàn)斗地面效果！在 2D 中實(shí)現(xiàn)有縱深感(透視)的卷動效果。

效果

回顧

這次的紋理管理仍然是使用 Sprite 組件的渲染模式 Mesh ，需要的可以參考 初探精靈中的網(wǎng)格渲染模式 ！ 。

原理

為了達(dá)到這種透視效果，把握一個原則，遠(yuǎn)小近大，遠(yuǎn)慢近快。

準(zhǔn)備一張?zhí)菪蔚膱D片，讓下面的圖形快速移動，上面的圖形慢速移動，就能有3D滾動的感覺了。

Sprite 組件的渲染模式 Mesh 的坐標(biāo)軸是左上角，位置坐標(biāo) xy 范圍是圖片大小，紋理坐標(biāo) uv 范圍是 0-1 。

對于正中間的頂點(diǎn)數(shù)據(jù)，如下圖所示。

代碼如下。

this.sp.spriteFrame['vertices']?=?{
????x:?[480,????1440,???1440,???480],
????y:?[0,??????0,??????480,????480],
????nu:?[0.35,??0.65,???0.65,???0.35],
????nv:?[0,?????0,??????1,??????1],
????triangles:?[0,?1,?2,?2,?3,?0],
}

那么怎么確定移動后的某個位置的紋理坐標(biāo) u 呢？

只要確定最左邊的兩個點(diǎn)的變化范圍，按百分比算出位置。

右邊的點(diǎn)根據(jù)左邊的頂點(diǎn)和長度就可以求出來了。

代碼如下。

//?percent?0-1
const?vertices?=?this.sp.spriteFrame['vertices'];
const?nu?=?vertices.nu;
nu[0]?=?0.25?+?0.2?*?percent;
nu[1]?=?nu[0]?+?0.3;
nu[3]?=?percent?*?0.7;
nu[2]?=?nu[3]?+?0.3;

參考書籍 《游戲開發(fā)的數(shù)學(xué)和物理》

小結(jié)

近大遠(yuǎn)小，近快遠(yuǎn)慢！

以上為白玉無冰使用 Cocos Creator v2.3.3 實(shí)現(xiàn) " 用2D實(shí)現(xiàn)背景圖3D滾動效果" 的技術(shù)分享。如果對你有點(diǎn)幫助，歡迎分享給身邊的朋友。

每人每天能夠?qū)Ｗ⒌亍⒏挥谐尚У毓ぷ鞯臅r間是有上限的。你的時間只有這么多，要怎么利用你自己說了算。

更多

█ ? ?shader頂點(diǎn)動畫之旗子水紋 ? ?█???█ ? ?物理挖洞(整理+分塊) ? ?█???█ ? ?漸變色的實(shí)現(xiàn) ? ?█???█ ? ?畫線紋理之繩子 ? ?█???█ ? ?精靈之網(wǎng)格模式 ? ?█???█ ? ?shader動畫之loading ? ?█???█ ? ?js的三位一體 ? ?█???█ ? ?shader 之攻擊閃白(+入門資料整理) ? ?█??█ ? ?物理流體(歡樂水杯) ? ?█???█ ? ?瞄準(zhǔn)線之拋物線 ? ?█???█ ? ?隨機(jī)(正態(tài)分布)飛濺運(yùn)動 ? ?█???█ ? ?貪吃蛇之平滑移動 ? ?█???█ ? ?雷達(dá)圖的實(shí)現(xiàn) ?█??█ ? ?分形著色器(數(shù)學(xué)之美) ? ?█??█ ? ?shader 之漸變過渡 ? ?█???█ ? ?初探 gizmo 使用 ? ?█???█ ? ?shader 之卷積濾鏡 ? ?█???█ ? ?旗幟效果(meshRenderer) ? ?█???█ ? ?多邊形裁剪(meshRenderer) ? ?█???█ ? ?高拋平拋發(fā)射 ? ?█???█ ? ?水紋效果(片元著色器) ? ?█???█ ? ?2019年原創(chuàng)(黑歷史) ? ?█???

轉(zhuǎn)載請保留文末二維碼和完整代碼獲取方式！

完整代碼(詳見readme):?

https://github.com/baiyuwubing

點(diǎn)擊“閱讀原文”查看精選導(dǎo)航

“在看”是最大的鼓勵▼