杨清彦：《像三国》游戏3D动效制作经验分享
杨清彦，像素网络CTO，《像三国》的技术负责人。以下内容给大家分享他们到底是怎么只用2D接口开发出高大上的3D效果。
有个笑话说，《像三国》刚出来的时候，很多人赞扬他们：Unity3D用得不错啊。他们说：我们用Cocos做的。我赶紧上去拍马屁：Cocos 3D用得不错啊。他们说：我们只用Cocos的2D功能做的。我当时就跪了，很难想像不用3D接口怎么开发出来那样的效果。
《像三国》是一个集换式策略卡牌游戏，当时我们做出来以后有不少的人问到这个游戏是不是用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动效制作经验分享
(以下内容依据Cocos秋季峰会演讲速记稿整理) 主持人王哲: 下一个分享是<像三国>的3D特效制作经验分享.有个笑话说,<像三国>刚出来的时候,很多人赞扬他们:Unity3D ...
- 盘点在H5小游戏里常用的动效制作套路
近年来,越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来,而也正是这些炫酷的交互动效,才能够成功地吸引住用户的眼球,让用户为此驻足. 而「动效制作」也伴随着H5的大热而火遍前端圈及设计界,下面就 ...
- HTML5培训教程学习之动效制作
近年来,HTML5应用愈发广泛,并有取代Flash的趋势.很多人知道利用HTML5可以做出好的动作效果,但你知道它是怎么做出来的吗?今天小千就来给大家分享一下HTML5培训教程中动效制作的几种方法. ...
- sketch交互动效能导入html吗,UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作...
UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作 许多人都在脸书上谈论framer的最新更新的倒计时,当时时钟敲过零点,Framer的新一个版本产生了,有了很多有趣的东西,例 ...
- AE 动效制作和交付方案
在界面设计中,设计师利用动效让整个界面更加活泼,给界面元素带来生命力,解决功能上的问题,在更好地展示产品功能的基础上,凸显品牌的特色.而作为用户,动效增强了体验者的审美感受.情感需要,让用户更容易理解 ...
- Unreal Open Day 2017 参会总结——ACT（动作）游戏制作经验分享
国产游戏 失落之魂 (英文名 Lost Soul Aside ) 是由杨冰先生独自一人花费3年左右的时间开发的一款动作游戏,目前还处于并不完整的demo阶段.前不久杨冰先生在网上上传了一个宣传视频,网 ...
- APP Tab Bar 图标动效设计技巧分享
Tab bar 作为整个 APP 的第一触点,给用户传递的理念及信息在整个 APP 中具有不可替代的重要性.我们的第一感受是粗糙或是精致,都会通过这个简单的操作切换而感知.因此 tab bar 的设计 ...
- 十年建模师带你学习3D建模，次时代游戏建模人物制作经验分享！越努力越幸运
正好现在在学次时代游戏建模,简单分享下流程. 1.先用max或者maya搞出低模的大体形态:(复制一份卡出硬边,导出obj) 2.用zb雕细节:(肌肉纹理,金属破损等等) 3.减面导出obj,在May ...
- 次时代游戏建模人物制作经验分享
正好现在在学次时代游戏建模,简单分享下流程. 1.先用max或者maya搞出低模的大体形态:(复制一份卡出硬边,导出obj) 2.用zb雕细节:(肌肉纹理,金属破损等等) 3.减面导出obj,在May ...
最新文章
- Spring --- SpEL
- Ubuntu 下编译ffmpeg和x264解编码器(翻译的一篇文章：)
- 图解用工具对BHO做初步研究
- VTK：图片之ResizeImage
- Java黑皮书课后题第9章：*9.3（使用Date类）编写程序创建一个Date对象，设置它的流逝时间分别为...，然后使用toString()方法分别显示上述日期
- Easy Tech：什么是I帧、P帧和B帧？
- swift date 计算差_[Swift 设计模式] 适配器
- 2011年1月28日早会资料（最终版本）
- 程序员如何在未来之路寻找自己的“龙椅”
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_11使用骨架创建maven的java工程...
- 第一章（1.2） 机器学习算法工程师技能树
- mysql jdbc 水晶报表,水晶报表Crystal Report2008使用JDBC连接MySQL数据库-详细步骤
- [ecshop 资料]ecshop积分充值可充值等级积分余消费积分教程 pay_points
- nuxt如何添加背景图片
- Windows使用Dism备份操作系统快捷命令 系统备份
- 计算机文化基础形考作业,(精华版)国家开放大学电大专科《计算机文化基础》网络课形考任务6作业及答案（2页）-原创力文档...
- 2020电脑配置基本知识入门,电脑配置知识大全2020
- 手机归属地查询示例代码
- 解析「Web3悖论」的内在机理与突破路径
- 2020行业进阶趋势：传统IT式微已显而易见