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

Stella981
• 阅读 759

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

前言

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

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

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

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

预期效果

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

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

图片素材

这想到两个方案去实现:

  1. 纯2d实现:对一张图片的每个顶点做一次投影变换,算出每个顶点在2d屏幕中的坐标。

  2. 用3d实现:调整相机参数,图片放在 Quad (四方形) 上,布置3d场景。

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

实现

本次主要实现两个点:

  1. 透视场景效果

  2. 金币动画

布置场景

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

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

四个四方形围成的四个面

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

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

创建材质

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

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

山洞效果

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

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

修改资源类型

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

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

山洞效果+阴影遮罩

帧动画

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

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

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

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

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

金币图片处理

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

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

创建金币材质

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

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

创建金币动画1

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

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

创建金币动画2

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

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

最后效果预览

更多可能

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

  1. 角色也是帧动画资源,可以放在UI层,控制其左右。

  2. 角色前进:可以通过控制摄像机向前推进。

  3. 地图生成:把地图块做成预制体,根据相机的位置,不断回收前面的和生成后面的地图块。

  4. 碰撞检测:同样可以根据摄像机的位置以及角色的位置,和带检测物体的位置判断。

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

自家种的红橙!酸甜口味!老婆爱吃!长按识别⬆️

小结

巧用四边形!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 | 绳子纹理 | 四叉树 | 数学 样样都有!

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

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

点击“阅读原文”查看精选导航

“点赞“ ”在看” 鼓励一下Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!

本文分享自微信公众号 - 白玉无冰(lamyoung-com)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Redis 6.0 正式版终于发布了!除了多线程还有什么新功能?
!(https://oscimg.oschina.net/oscnet/b8c8b22b9f44bd806c26b486e1893a263a4.jpg)这是我的第56篇原创文章!(https://oscimg.oschina.net/oscnet/8bf00bc92f6a1cd46596ee44bac64a801ae.pn
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这