Cocos Creator 3.0 入门! 2D 素材 3D 效果

Posted by lamyoung on December 10, 2020

用2D素材实现3D效果!

前言

好久没写教程笔记了,不知大伙是否想念教程了?

温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh

最近逛论坛,看到有一位小伙伴想实现以下这种透视效果。

预期效果

接着,去找了这个游戏的素材,都是2d图片。

图片素材

这想到两个方案去实现:

  1. 纯2d实现:对一张图片的每个顶点做一次投影变换,算出每个顶点在2d屏幕中的坐标。
  2. 用3d实现:调整相机参数,图片放在 Quad (四方形) 上,布置3d场景。

综合考虑,用3d实现相对方便一点,行动起来吧!

实现

本次主要实现两个点:

  1. 透视场景效果
  2. 金币动画

布置场景

新建场景后,在场景中添加4个四方形(Quad),通过旋转平移缩放,围成长方体的四个面。

四个四方形围成的四个面

接着创建材质(墙/地板/天花板),采用 builtin-unlit.effect(无光照),并选取对应的texture,再把材质加在对应的四方形上。

创建材质

所有都创建完后,是这个样子的。

山洞效果

这个洞的深处应该有个渐变黑影,把这个资源类型改成sprite-frame,并加入场景的UI层。

修改资源类型

接着调整一下摄像机的参数,让这个渐变黑影在中间,预览运行,结果如下。

山洞效果+阴影遮罩

帧动画

金币素材是2d的帧动画,要在3d实现透视效果这里同样采用四方形。

原素材有点挤,我们稍微处理一下,让其每一帧的图片位置均匀。

这边用的是 shoebox 拆图,然后放在ps里调位置,导出的图片长宽需要是2的n次幂

更程序员的做法是写个脚本分割图片,再重新生成图片(或者找美术爸爸出图)

金币图片处理

同样的,也建一个金币材质,选择builtin-unlit.effect,选择transparent(透明)的通道(因为该图要用到透明),修改tillingOffset(纹理缩放偏移)参数。

创建金币材质

创建一个四方形,选择金币材质,添加动画,修改tillingOffset中的偏移参数。

创建金币动画1

再把动画过程调成Const,可以看到初步效果。

创建金币动画

最后,多放几个金币在场景中,加一些墙纸放墙上~

![效果预览]](/img/in-post/202012/10-12.gif)

更多可能

如果你想继续把这个做成游戏的话,可以参考以下几个步骤:

  1. 角色也是帧动画资源,可以放在UI层,控制其左右。
  2. 角色前进:可以通过控制摄像机向前推进。
  3. 地图生成:把地图块做成预制体,根据相机的位置,不断回收前面的和生成后面的地图块。
  4. 碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。

红橙

小结

巧用四边形!3d效果值得拥有!

游戏开发程序员必备英语单词回顾:

  • opaque - [oʊ'peɪk] 不透明的
  • transparent - [træns'perənt] 透明的
  • unlit - [ʌn'lɪt] 无灯光的

以上为白玉无冰使用 Cocos Creator 3.0 preview-1 实现 "用2D素材实现3D效果 的技术分享。欢迎分享给身边的朋友!

更多

基础光照模型! Cocos Creator 2D 光照! 2020 原创精选! shader | 挖洞 | 流体 | 3D | 绳子纹理 | 四叉树 | 数学 样样都有!
四元数
3D膨胀



原文链接
原创文章导航