Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!
共 1462字,需浏览 3分钟
· 2020-12-11
用2D素材实现3D效果!
前言
好久没写教程笔记了,不知大伙是否想念教程了?
温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh
最近逛论坛,看到有一位小伙伴想实现下面这种透视效果。
![](https://filescdn.proginn.com/404c165931afdc59104297e04223d68c/76cb8c5a8eeee95c9e6c6389bc0a4d56.webp)
接着,去找了(扒)这个游戏的素材,都是2d图片。
![](https://filescdn.proginn.com/044ad4972503019124309722d1ff341b/096f0b72eb9242e97e3221579c80f829.webp)
这想到两个方案去实现:
纯2d实现:对一张图片的每个顶点做一次投影变换,算出每个顶点在2d屏幕中的坐标。 用3d实现:调整相机参数,图片放在 Quad
(四方形) 上,布置3d场景。
综合考虑,用3d实现相对方便一点,行动起来吧!
实现
本次主要实现两个点:
透视场景效果 金币动画
布置场景
新建场景后,在场景中添加4个四方形(Quad
),通过旋转平移缩放,围成长方体的四个面。
![](https://filescdn.proginn.com/f1bc689aca75ad01a760da84ca1e2895/2db9415bbbc19d9c9c3ec6bbe0a31c4f.webp)
接着创建材质(墙/地板/天花板),采用 builtin-unlit.effect
(无光照),并选取对应的texture
,再把材质加在对应的四方形上。
![](https://filescdn.proginn.com/a975ae1a429ba629dc75af9d4b33fc44/2ad5fca38f3e73b85c9e7ae5129fafe6.webp)
所有都创建完后,是这个样子的。
![](https://filescdn.proginn.com/c92fb9328d4ca839485ef6e0b29aa647/517726a528e29845b3eb59b7e638e57e.webp)
这个洞的深处应该有个渐变黑影,把这个资源类型改成sprite-frame
,并加入场景的UI层。
![](https://filescdn.proginn.com/04ee89e686570713a54aeb4240048714/a6e7f74bf81a2f0f0d5d4bdd86c0aa95.webp)
接着调整一下摄像机的参数,让这个渐变黑影在中间,预览运行,结果如下。
![](https://filescdn.proginn.com/510dc1b06946d586785152c038c87921/b308c0b581c51f38edb43ead57994171.webp)
帧动画
金币素材是2d的帧动画,要在3d实现透视效果这里同样采用四方形。
原素材有点挤,我们稍微处理一下,让其每一帧的图片位置均匀。
这边用的是 shoebox 拆图,然后放在ps里调位置,导出的图片长宽需要是2的n次幂
。
更程序员的做法是写个脚本分割图片,再重新生成图片(或者找美术爸爸出图)
![](https://filescdn.proginn.com/ec6afe345e11635034cda229fee941cb/8a2b8c7b584401694e841c85ccea904c.webp)
同样的,也建一个金币材质,选择builtin-unlit.effect
,选择transparent
(透明)的通道(因为该图要用到透明),修改tillingOffset
(纹理缩放偏移)参数。
![](https://filescdn.proginn.com/0009556273ec0a1d9000ba7b4645f720/e20d277452e532a4c11f4f00917896c2.webp)
创建一个四方形,选择金币材质,添加动画,修改tillingOffset
中的偏移参数。
创建金币动画1
再把动画过程调成Const
,可以看到初步效果。
![](https://filescdn.proginn.com/e8636c7517b53e36348d79089352dad9/b967500a6c888a57cf2ba7976868a13e.webp)
最后,多放几个金币在场景中,加一些墙纸放墙上~
![](https://filescdn.proginn.com/e12b4b6836a8267c144dc4320bf13bff/6c85a62cb38943da72a03db8b2863be6.webp)
更多可能
如果你想继续把这个做成游戏的话,可以参考以下几个步骤:
角色也是帧动画资源,可以放在UI层,控制其左右。 角色前进:可以通过控制摄像机向前推进。 地图生成:把地图块做成预制体,根据相机的位置,不断回收前面的和生成后面的地图块。 碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。
![](https://filescdn.proginn.com/93688980fe5ebebf70289cf9e860277e/1192b345d2b5f0058ade53b60a48e653.webp)
小结
巧用四边形!3d效果值得拥有!
游戏开发程序员必备英语单词回顾:
opaque
-[oʊ'peɪk]
不透明的transparent
-[træns'perənt]
透明的unlit
-[ʌn'lɪt]
无灯光的
以上为白玉无冰使用 Cocos Creator 3.0 preview-1
实现 "用2D素材实现3D效果
的技术分享。欢迎分享给身边的朋友!
更多
![](https://filescdn.proginn.com/5d04d0c412958c4fe6de48221b305565/922fa1ce04f36bebeb7390babd25c6b3.webp)
![](https://filescdn.proginn.com/529caba1a59d728732e28d464a16a2f9/806cca608219389661c328ae99cd3319.webp)
点击“阅读原文”查看精选导航
“点赞“ ”在看” 鼓励一下▼