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

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

效果

回顧

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

原理

為了達到這種透視效果，把握一個原則，遠小近大，遠慢近快。

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

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

對于正中間的頂點數(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],
}

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

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

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

代碼如下。

//?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é)

近大遠小，近快遠慢！

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

每人每天能夠?qū)Ｗ⒌?、富有成效地工作的時間是有上限的。你的時間只有這么多，要怎么利用你自己說了算。

更多

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

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

完整代碼(詳見readme):?

https://github.com/baiyuwubing

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

“在看”是最大的鼓勵▼