2D实现背景图3D滚动效果(透视) !Cocos Creator !

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

战斗地面效果!在 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],
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值