戰鬥地面效果！在 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;
參考書籍 《遊戲開發的數學和物理》
小結
近大遠小，近快遠慢！
以上爲白玉無冰使用 Cocos Creator v2.3.3 實現 " 用2D實現背景圖3D滾動效果" 的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。
“在看”是最大的鼓勵▼