【包教包会】2D图片实现3D透视效果(支持3.x、支持原生、可合批)

Flip3D

将去年写的SpriteFlipper从2.x升级到3.x。

如果需要2.x版本或需要了解算法思路,请移步:https://forum.cocos.org/t/topic/156760

优化功能:可同时绕X轴和Y轴旋转,两者效果会叠加。

完美适配Web、原生平台(其余平台没测过)。

附上下载地址:https://gitee.com/szrpf/SpriteFlipper3.x

如何导入自己项目:
1、将Demo中SpriteFlipper.ts复制到自己项目assets目录下

2、新建一个节点,将SpriteFlipper挂上去,然后拖一张图片到SpriteFrame属性,搞定!
image
其余不明白的评论区沟通~

加油:sunglasses::sunglasses::sunglasses::sunglasses::sunglasses::sunglasses::sunglasses:

Gitee地址:https://gitee.com/szrpf

EMail地址:27185709@qq.com

推荐链接:

1、CocosCreator3.x框架——音频声音模块(无需导入、无需常驻节点)

2、CocosCreator3.x框架——节点扩展(仿2.x风格直接设置属性、渐变色、振动、实时销毁)

2、【包教包会】CocosCreator Assembler经典案例第一期——2D实现3D透视翻转(附Demo源码)

3、【包教包会】对CocosCreator富文本RichText进行全面优化

5、权重随机算法,解决游戏中一切可控随机(刷怪、掉宝、转盘、抽卡等等)

mi

19赞

感谢大佬的无私贡献,世界因你更美好 :heartbeat:

1赞

嗯嗯,能用得上就好

插个眼。。

12.30更新:3.8.7支持原生

1赞

当场景中有其他的图片的时候,就会失效,变得很奇怪。这是怎么回事呢?
场景界面:

运行界面:

看下属性面板和节点树

插眼插眼插眼

版本是3.8.4


image

说下复现流程?

奇怪,居然是和我先前的方案产生了冲突,我把之前的测试方案关掉了,就正常使用了,没事了大佬,我再试试看是什么情况

好像是因为修改了eulerAngles,在场景里有SpriteFlipper的情况下,如果在其他地方修改了eulerAngles,就会导致SpriteFlipper处理的图片异常

2.x 如果是整个节点想做这个效果(就是嵌套了label, richtext或者多个sprite)的话有什么思路吗?因为卡片他本身可能不仅仅是一个图

可以尝试把整个Node用相机拍下来变图片,再用楼主的工具实现。或者直接改shader

拍下来的方案可行,有个小坑就是如果Node的子节点添加了触摸事件会失效,其他没问题