2D實現背景圖3D滾動效果(透視) ！Cocos Creator !
戰鬥地面效果！在 2D 中實現有縱深感(透視)的捲動效果。
效果
回顧
這次的紋理管理仍然是使用 Sprite 組件的渲染模式 Mesh ，需要的可以參考 初探精靈中的網格渲染模式 ！ 。
原理
爲了達到這種透視效果，把握一個原則，遠小近大，遠慢近快。
準備一張梯形的圖片，讓下面的圖形快速移動，上面的圖形慢速移動，就能有3D滾動的感覺了。
Sprite 組件的渲染模式 Mesh 的座標軸是左上角，位置座標 xy 範圍是圖片大小，紋理座標 uv 範圍是 0-1 。
對於正中間的頂點數據，如下圖所示。
代碼如下。
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 呢？
只要確定最左邊的兩個點的變化範圍，按百分比算出位置。
右邊的點根據左邊的頂點和長度就可以求出來了。
代碼如下。
// 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;
參考書籍 《遊戲開發的數學和物理》
更多
█ shader頂點動畫之旗子水紋 █ █ 物理挖洞(整理+分塊) █ █ 漸變色的實現 █ █ 畫線紋理之繩子 █ █ 精靈之網格模式 █ █ shader動畫之loading █ █ js的三位一體 █ █ shader 之攻擊閃白(+入門資料整理) █ █ 物理流體(歡樂水杯) █ █ 瞄準線之拋物線 █ █ 隨機(正態分佈)飛濺運動 █ █ 貪喫蛇之平滑移動 █ █ 雷達圖的實現 █ █ 分形着色器(數學之美) █ █ shader 之漸變過渡 █ █ 初探 gizmo 使用 █ █ shader 之卷積濾鏡 █ █ 旗幟效果(meshRenderer) █ █ 多邊形裁剪(meshRenderer) █ █ 高拋平拋發射 █ █ 水紋效果(片元着色器) █ █ 2019年原創(黑歷史) █ █ 原創文章導航 █
小結
近大遠小，近快遠慢！
以上爲白玉無冰使用 Cocos Creator v2.3.3 實現 " 用2D實現背景圖3D滾動效果" 的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。
每人每天能夠專注地、富有成效地工作的時間是有上限的。你的時間只有這麼多，要怎麼利用你自己說了算。