
战斗地面效果!在 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],

本文介绍了如何在2D环境中利用Cocos Creator创建具有深度感的卷动效果,通过控制梯形图片的顶点移动速度模拟3D透视。遵循远小近大、远慢近快的原理,调整纹理坐标实现滚动动画。详细阐述了计算纹理坐标的逻辑,并推荐了相关书籍和更多技术分享。
最低0.47元/天 解锁文章
2196

被折叠的 条评论
为什么被折叠?



