《像三国》3D动效制作经验分享
(以下内容依据Cocos秋季峰会演讲速记稿整理)
主持人王哲:
下一个分享是《像三国》的3D特效制作经验分享。有个笑话说,《像三国》刚出来的时候,很多人赞扬他们:Unity3D用得不错啊。他们说:我们用Cocos做的。我赶紧上去拍马屁:Cocos 3D用得不错啊。他们说:我们只用Cocos的2D功能做的。我当时就跪了,很难想像不用3D接口怎么开发出来那样的效果。
所以这次峰会,我们很荣幸请到像素网络CTO杨清彦给大家分享一下他们到底是怎么只用2D接口开发出高大上的3D效果。
演讲人杨清彦:
大家好!我是像素网络CTO杨清彦,是《像三国》的技术负责人。《像三国》是一个什么游戏呢?我给大家演示一个视频,可能更了解一点。
《像三国》是一个集换式策略卡牌游戏,当时我们做出来以后有不少的人问我们这个游戏是不是用3D做的,因为看起来有点像2D游戏,但是又有一些3D的元素里面,所以大家比较好奇。但是我们游戏确实是一个2D游戏。这里面的3D效果怎么做的?我们可以来看一下,其实就像魔术一样,表面上看起来感觉很惊奇,但是抛开外面的包裹的话,会觉得其实技术原来很简单,我们大家都会做。
我们先看一下登录的界面。这个界面看起来可能会有一种错觉,好象是一个3D的场景,但是其实这里面用的还是一些2D的技术来模拟的3D效果,比如说它看起来有一个景深的效果。
这在资源上我们可以看到,这个界面的远景和近景是有两个图层来构成的。背景是用小的带有一点模糊效果的图片来作为效果。近景是一张比较简单的图片来构成近景。会用到一些动画的技术,实现了场景看起来被风沙吹,有一种摇动的感觉,看起来更接近于3D效果。
这是背景方面。比如说这个灯笼,感觉像是一个模型,但是其实它本身还是一个2D的图形,用动画来模拟原生的效果。资源还是这样几个简单的东西,比如说灯笼的背景,灯笼上的图标的展示。这个灯笼其实看起来好象觉得它有一种遮挡的关系,在摇动的时候会觉得有一部分的被挡住了,看起来这个东西有一点3D的效果。但其实这张图片本身是没有经过3D处理得,我们的做法是在灯笼上做了一个裁剪,类似于裁剪的节点类型。这种类型可以提供一个灰度图,作为裁剪的区域。就是灯笼我们作为一个裁剪的节点,来限制文字写字的区域,当你的灯笼在动的时候就可以限制它像素的图片的显示不会超过裁剪区域,这样的话,当你运动整个灯笼的话看起来就会有3D的旋转的效果。就是因为遮挡之后会有一种旋转的效果。
这个场景也是讨论比较多的,看起来有点像3D的场景。这场景的美术是用3D的技术来做,我们用的Maya。然后我们看一下场景的一些效果,当时为了更逼真地模拟3D效果,在各个场景之间做切换的时候,有一些过渡的效果,看起来感觉不会像普通2D的游戏,从一个界面跳到另外一个界面,我们做的时候尽可能的用到一些方法,好让过渡看起来比较自然和平和,像是一个3D模型的旋转。
我们以登录为例,在这个地方首先是这里有一个场景,这个城墙是登录界面的城墙,给玩家的感觉是从登录进入主场景的时候,让他感觉是从山上的场景跟随镜头的移动进入到主场景里,而不是一个2D界面的切换效果。这是怎么做的?其实也比较简单,就是说我们提供了几张比较模糊的过渡场景的图片。当把这几张模糊的过渡图片串联起来以一个动画形式来播放的时候,看起来就会有3D界面切换的效果。从程序上来看,还是需要一些技术,工具上提供制作的支持。我们用的是Cocos Builder。这个工具给大家介绍一下,这里面可以把Cocos里面常用的精灵、节点可以把这些东西组合起来,可以构成一个模型。这个模型可以在编辑器里对它设置很多的动画帧。比如你做一个人物模型的话,你套上时间轴,会表现出很多运动的效果。我们用标准的做法,实现方法也比较类似,用静态的图片和粒子构成整个场景。在场景上针对每一张图片、一些粒子和一些节点去设置不同的运动的动画时间线。这些时间线编辑就类似于3D的骨骼动画,你可以选择其中某一条时间线来播放,这样就可以按照你在编辑器里设计的缩放和旋转的效果来进行场景动画的播放。
卡牌翻转:其实这个地方我们是用的两张图片来模拟这样的效果,纹理都是在Maya里面预烘焙好了的。第一张图片就是这样一个卡牌的背面,这张图片我们首先还是通过设置它的属性,让它可以扭曲成这样子。大家比较疑惑为什么可以做这样一张图片的扭曲,实际上有一个扭曲的属性,可以让一张平面的图片可以做倾斜或扭曲的效果,就类似于这种。然后你在结合缩放和旋转。进入到切换状态的时候,比如说到这个位置的时候,可以把背面的卡牌隐藏掉,用另外一张正面的卡牌替换掉他,同样用反向的手段让这张卡牌转,就可以实现翻面类似于3D的效果。
我的介绍就到这里,谢谢大家!
《像三国》3D动效制作经验分享相关推荐
- 杨清彦:《像三国》游戏3D动效制作经验分享
杨清彦,像素网络CTO,<像三国>的技术负责人.以下内容给大家分享他们到底是怎么只用2D接口开发出高大上的3D效果. 有个笑话说,<像三国>刚出来的时候,很多人赞扬他们:Uni ...
- 盘点在H5小游戏里常用的动效制作套路
近年来,越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来,而也正是这些炫酷的交互动效,才能够成功地吸引住用户的眼球,让用户为此驻足. 而「动效制作」也伴随着H5的大热而火遍前端圈及设计界,下面就 ...
- HTML5培训教程学习之动效制作
近年来,HTML5应用愈发广泛,并有取代Flash的趋势.很多人知道利用HTML5可以做出好的动作效果,但你知道它是怎么做出来的吗?今天小千就来给大家分享一下HTML5培训教程中动效制作的几种方法. ...
- AE 动效制作和交付方案
在界面设计中,设计师利用动效让整个界面更加活泼,给界面元素带来生命力,解决功能上的问题,在更好地展示产品功能的基础上,凸显品牌的特色.而作为用户,动效增强了体验者的审美感受.情感需要,让用户更容易理解 ...
- sketch交互动效能导入html吗,UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作...
UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作 许多人都在脸书上谈论framer的最新更新的倒计时,当时时钟敲过零点,Framer的新一个版本产生了,有了很多有趣的东西,例 ...
- 代码敲累了就来看看《PPT制作经验分享-发布版PPT》
版权声明:本文为博主原创文章,未经博主允许不得转载. 博主的<PPT制作经验分享-发布版PPT> 话不多说,直接上PPT. 博主目前是一名刚出道不久的底层码农 在本科及研究生阶段一直从事宣 ...
- Unreal Open Day 2017 参会总结——ACT(动作)游戏制作经验分享
国产游戏 失落之魂 (英文名 Lost Soul Aside ) 是由杨冰先生独自一人花费3年左右的时间开发的一款动作游戏,目前还处于并不完整的demo阶段.前不久杨冰先生在网上上传了一个宣传视频,网 ...
- 网页版简历制作经验分享
转自:Heero.Luo 2012年中,因为换工作面试的需要,我得更新旧的简历.但是在Word中排版实在是各种不顺手,于是就发挥了作为前端工程师的优势把简历做成了网页:2014年末想换工作时又对其进行 ...
- APP Tab Bar 图标动效设计技巧分享
Tab bar 作为整个 APP 的第一触点,给用户传递的理念及信息在整个 APP 中具有不可替代的重要性.我们的第一感受是粗糙或是精致,都会通过这个简单的操作切换而感知.因此 tab bar 的设计 ...
最新文章
- Mybatis中 Dao接口和XML文件的SQL如何建立关联
- CPU缓存一致性协议MESI
- 【C++ Priemr | 15】虚函数表剖析(二)
- aspnet_UsersInRoles_GetUsersInRoles
- hive對於數據是懶加載的_hive 安装 文档
- 蓝桥杯 基础练习 查找整数
- 汇添富基金总经理张晖:做选股专家,更以“选股专家”的视角管理公司
- comsol入门闲聊
- 如何提高睡眠质量快速入睡,改善睡眠的小妙招你要知道
- 51智联等已成“厕所”,猎聘网建“会所”求突破
- Golang之Shadowed Variables(幽灵变量)
- 计算机公务员写材料吗,公务员写材料到底从哪入手啊
- 通读cheerio API
- C语言基础 判断周几
- 关于对比损失(contrasive loss)的理解(相似度越大越相似的情况):
- 【EMNLP20 论文笔记】HGN:基于分层图网络的多跳阅读理解模型
- 统计学知识整理—正态分布
- 使用Matplotlib绘制南丁格尔玫瑰图
- 如何查询声卡芯片型号
- linux 查看cacti 信息,Linux 之cacti 监控介绍