用2D素材实现3D效果!
前言
好久没写教程笔记了,不知大伙是否想念教程了?
温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh
最近逛论坛,看到有一位小伙伴想实现下面这种透视效果。
![](https://i-blog.csdnimg.cn/blog_migrate/c38e23e842408e020638ca0ce0805092.png)
接着,去找了(扒)这个游戏的素材,都是2d图片。
![](https://i-blog.csdnimg.cn/blog_migrate/747c085a2c6febe0aadcf53e473b8681.png)
这想到两个方案去实现:
纯2d实现:对一张图片的每个顶点做一次投影变换,算出每个顶点在2d屏幕中的坐标。
用3d实现:调整相机参数,图片放在
Quad
(四方形) 上,布置3d场景。
综合考虑,用3d实现相对方便一点,行动起来吧!
实现
本次主要实现两个点:
透视场景效果
金币动画
布置场景
新建场景后,在场景中添加4个四方形(Quad
),通过旋转平移缩放,围成长方体的四个面。
![](https://i-blog.csdnimg.cn/blog_migrate/7f800930fef53da36778e89a42736607.png)
接着创建材质(墙/地板/天花板),采用 builtin-unlit.effect
(无光照),并选取对应的texture
,再把材质加在对应的四方形上。
![](https://i-blog.csdnimg.cn/blog_migrate/1c287f05719a90b4e62efb5e56ffdac2.png)
所有都创建完后,是这个样子的。
![](https://i-blog.csdnimg.cn/blog_migrate/6f5139cdf21fe169b33cb9825919257d.png)
这个洞的深处应该有个渐变黑影,把这个资源类型改成sprite-frame
,并加入场景的UI层。
![](https://i-blog.csdnimg.cn/blog_migrate/a0ab679e65204cca0fc207327d8dbe94.png)
接着调整一下摄像机的参数,让这个渐变黑影在中间,预览运行,结果如下。
![](https://i-blog.csdnimg.cn/blog_migrate/009dd50eeceff776bab0efc62a0682de.png)
帧动画
金币素材是2d的帧动画,要在3d实现透视效果这里同样采用四方形。
原素材有点挤,我们稍微处理一下,让其每一帧的图片位置均匀。
这边用的是 shoebox 拆图,然后放在ps里调位置,导出的图片长宽需要是2的n次幂
。
更程序员的做法是写个脚本分割图片,再重新生成图片(或者找美术爸爸出图)
![](https://i-blog.csdnimg.cn/blog_migrate/866104e65ca5afa24809a0c6d11c849c.png)
同样的,也建一个金币材质,选择builtin-unlit.effect
,选择transparent
(透明)的通道(因为该图要用到透明),修改tillingOffset
(纹理缩放偏移)参数。
![](https://i-blog.csdnimg.cn/blog_migrate/0aa4983036d5ce1d6b87ddb0b529ca32.png)
创建一个四方形,选择金币材质,添加动画,修改tillingOffset
中的偏移参数。
创建金币动画1
再把动画过程调成Const
,可以看到初步效果。
![](https://i-blog.csdnimg.cn/blog_migrate/7e4166bb8e4087b6f539450fc5d7d4fe.gif)
最后,多放几个金币在场景中,加一些墙纸放墙上~
![](https://i-blog.csdnimg.cn/blog_migrate/4749bed5777030f724f905793366529f.png)
更多可能
如果你想继续把这个做成游戏的话,可以参考以下几个步骤:
角色也是帧动画资源,可以放在UI层,控制其左右。
角色前进:可以通过控制摄像机向前推进。
地图生成:把地图块做成预制体,根据相机的位置,不断回收前面的和生成后面的地图块。
碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。
![](https://i-blog.csdnimg.cn/blog_migrate/5035e14135bf441fa8d12fece1de8b89.png)
「白玉无冰」自家种的红橙!酸甜口味!长按识别⬆️
“点赞“ ”在看” 鼓励一下▼