杨清彦：《像三国》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的效果。

via:Gad