用2D素材实现3D效果!
前言
好久没写教程笔记了,不知大伙是否想念教程了?
温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh
最近逛论坛,看到有一位小伙伴想实现下面这种透视效果。
预期效果
接着,去找了(扒)这个游戏的素材,都是2d图片。
图片素材
这想到两个方案去实现:
纯2d实现:对一张图片的每个顶点做一次投影变换,算出每个顶点在2d屏幕中的坐标。
用3d实现:调整相机参数,图片放在
Quad
(四方形) 上,布置3d场景。
综合考虑,用3d实现相对方便一点,行动起来吧!
实现
本次主要实现两个点:
透视场景效果
金币动画
布置场景
新建场景后,在场景中添加4个四方形(Quad
),通过旋转平移缩放,围成长方体的四个面。
四个四方形围成的四个面
接着创建材质(墙/地板/天花板),采用 builtin-unlit.effect
(无光照),并选取对应的texture
,再把材质加在对应的四方形上。
创建材质
所有都创建完后,是这个样子的。
山洞效果
这个洞的深处应该有个渐变黑影,把这个资源类型改成sprite-frame
,并加入场景的UI层。
修改资源类型
接着调整一下摄像机的参数,让这个渐变黑影在中间,预览运行,结果如下。
山洞效果+阴影遮罩
帧动画
金币素材是2d的帧动画,要在3d实现透视效果这里同样采用四方形。
原素材有点挤,我们稍微处理一下,让其每一帧的图片位置均匀。
这边用的是 shoebox 拆图,然后放在ps里调位置,导出的图片长宽需要是2的n次幂
。
更程序员的做法是写个脚本分割图片,再重新生成图片(或者找美术爸爸出图)
金币图片处理
同样的,也建一个金币材质,选择builtin-unlit.effect
,选择transparent
(透明)的通道(因为该图要用到透明),修改tillingOffset
(纹理缩放偏移)参数。
创建金币材质
创建一个四方形,选择金币材质,添加动画,修改tillingOffset
中的偏移参数。
创建金币动画1
再把动画过程调成Const
,可以看到初步效果。
创建金币动画2
最后,多放几个金币在场景中,加一些墙纸放墙上~
最后效果预览
更多可能
如果你想继续把这个做成游戏的话,可以参考以下几个步骤:
角色也是帧动画资源,可以放在UI层,控制其左右。
角色前进:可以通过控制摄像机向前推进。
地图生成:把地图块做成预制体,根据相机的位置,不断回收前面的和生成后面的地图块。
碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。
自家种的红橙!酸甜口味!老婆爱吃!长按识别⬆️
小结
巧用四边形!3d效果值得拥有!
游戏开发程序员必备英语单词回顾:
opaque
-[oʊ'peɪk]
不透明的transparent
-[træns'perənt]
透明的unlit
-[ʌn'lɪt]
无灯光的
以上为白玉无冰使用 Cocos Creator 3.0 preview-1
实现 "用2D素材实现3D效果
的技术分享。欢迎分享给身边的朋友!
更多
2020 原创精选! shader | 挖洞 | 流体 | 3D | 绳子纹理 | 四叉树 | 数学 样样都有!
点击“阅读原文”查看精选导航
“点赞“ ”在看” 鼓励一下▼
本文分享自微信公众号 - 白玉无冰(lamyoung-com)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。