Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!
用 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
,可以看到初步效果。
最后,多放几个金币在场景中,加一些墙纸放墙上~
更多可能
如果你想继续把这个做成游戏的话,可以参考以下几个步骤:
角色也是帧动画资源,可以放在 UI 层,控制其左右。
角色前进:可以通过控制摄像机向前推进。
地图生成:把地图块做成预制体,根据相机的位置,不断回收前面和生成后面的地图块。
碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。
小结
巧用四边形!3D 效果值得拥有!
游戏开发程序员必备英语单词回顾:
opaque
-[oʊ'peɪk]
不透明的transparent
-[træns'perənt]
透明的unlit
-[ʌn'lɪt]
无灯光的
以上为白玉无冰使用 Cocos Creator 3.0 preview-1
实现 "用 2D 素材实现 3D 效果
的技术分享。欢迎分享给身边的朋友!
如果大家想了解更多更全面的动画编辑效果,欢迎戳【阅读原文】前往 B 站观看我们放空老师新鲜出炉的动画视频教程:
https://www.bilibili.com/video/BV1jK4y1S7jM
这期视频教程基于 Creator 3.0 制作,通过“小羊快跑”的案例帮助大家快速了解 Cocos Creator 动画编辑器的使用。
今后我们也会在 B 站不定期发布实例+技术这种实用性更强的视频教程,大家有什么想要了解的技术内容可以随时留言告诉我们噢~
往期精彩
“点赞“ ”在看” 鼓励一下▼
Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!相关推荐
- 绝!2D素材3D效果!
用2D素材实现3D效果! 前言 好久没写教程笔记了,不知大伙是否想念教程了? 温馨提示:所有内容纯属个人瞎玩研究,如要上线项目,请自行评估~ oh 最近逛论坛,看到有一位小伙伴想实现下面这种透视效果. ...
- Cocos Creator 3.0 教程! 标志板! Billboard !
用2D素材节省包体!节约性能! 前言 标志板是什么呢? billboard 英文翻译为广告牌,标志板和广告牌肯定会有不可告人的联系! 广告牌的使命是什么?就是无论你在哪里,都要让你看到! 标志板也是这 ...
- 折纸效果! Cocos Creator 3.0
效果 折纸效果 实现 整体思路 思路遵循以下几步 初始化一个多边形. 折叠后分割成两个多边形. 如果需要继续分割,对场上的所有多边形进行折叠,折叠出新的多边形的层级正好与原来的相反. 整体思路 所以, ...
- 一文搞懂 Cocos Creator 3.0 坐标转换原理
一文搞懂 Cocos Creator 3.0 坐标转换原理 屏幕坐标 UI 触点坐标 UI 多分辨率适配方案 UI 触点获取 不同坐标之间的转换 屏幕坐标与 3D 节点世界坐标互转 3D 节点之间的坐 ...
- Cocos Creator 2.0 正式版发布
我拟了不下10个标题,用来描述这个里程碑事件,但最后发现,还是这样简单的<Cocos Creator 2.0 正式版发布>最直接. 回头一看,时间过得真是太快了. 两年前,我和团队都顶着各 ...
- 使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏 描述 一个抽奖小游戏demo, 点击 抽奖按钮 进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击 抽奖按钮 ...
- Cocos Creator 2.0.1 正式发布
2.0.0 是一个经历了大量底层重构的全新版本,部分开发者在升级项目过程中遇到了一些恼人的问题,这些问题我们一一收集并尽全力解决,现在为大家带来 2.0.1 版本.这个版本除了大幅度提升稳定性和项目升 ...
- cocos creator jsb2.0手动绑定过程
在打包原生包的时候js层想调用c++层,但是没有对应的实现需要自己扩展自己的jsb,官方有两种绑定方式:手动绑定和自动绑定,这里着重介绍手动绑定: 首先找到cocos creator自带的c++层的源 ...
- 麒麟子Cocos Creator实用技巧五:技能CD效果制作
今天带给大家的是一个关于技能CD的效果制作. 此效果不仅可以用于技能CD,一些按钮的CD也是可以用的. 为了照顾大家迫不及待(猴急)的心情,我写了一个DEMO给大家.DEMO上面做了5个英雄的技能和一 ...
最新文章
- 在Asp.Net MVC中设定site路径所对应的默认action
- c++检测a字符串是否包含b字符串_Python编程基础—字符串
- 用扫描的方式实现Rosenfeld and Pfaltz提出的距离变换!
- FastReport分页和空行填充
- 3.2 神经网络表示-深度学习-Stanford吴恩达教授
- 使用新的 apt 命令在 Ubuntu 16.04 LTS 下管理软件包
- eclipse maven打包_我的Java Web之路47 - 使用Maven改造租房网工程
- 微课|中学生可以这样学Python(5.6.1节):列表推导式1
- java内存漏洞_处理Java程序中的内存漏洞
- 分布式一致性算法-paxos详解与分析
- HMM:隐马尔科夫模型 - 学习
- 关于vs2015每次打开都要配置opencv问题
- 14张图+年终秀完整版视频:给错过的和想温故知新的你
- C99标准的新特性介绍
- AI人工智能在自动写歌词软件的最新应用,AI机器人小芝
- Linux驱动学习--ALSA框架(三)PCM设备的创建--以SCO虚拟声卡为例
- npoi word生成HTML,C# 使用NPOI生成Word文档(按照模板)
- 两条线段之间的最短距离
- mininet 主机双网关拓扑设计
- soj2093: Farmer John