《三国之刃》动画、特效、UI编辑方案

2015.9.28 技术干货 by cocos

(以下内容依据Cocos秋季峰会演讲速记稿整理)

主持人王哲:

蔡加庚是《三国之刃》的技术负责人,也是我多年的好友。这个项目所有人都极其低调,即使游戏经常上榜Top10,但几乎从未对外分享技术和运营经验。这次我们有幸请到了蔡加庚同学为我们分享《三国之刃》的动画特效制作经验,有请。

演讲人蔡加庚:

这个图标是我们这个游戏一周年的图标,其实这个游戏从头出来到现在其实已经有三年的历史。第一款叫《闯三国》,用的是相当早的版本。后来第一版的这款游戏运营的效果一般,因为是一个单机游戏,有没有网络都可以玩。后来决定做拿第一款的游戏《闯三国》的创意改装成网络游戏,沿用了三国主题,横板格斗的游戏类型没有变,但是玩法和功能做了改进。这个是《三国之刃》的过程。今天主要讲一下我们的动画特效的制作和技能。

这边介绍一下当时立项的背景,当时用的算是当时最新的稳定版,是2.0.4。当时也有考虑说是否要用JavaScript,也有跟王哲他们讨论过。结果那个时间点上JS还没有今天那么流行,结果《三国之刃》整个项目使用C++写的,后来有点后悔想升级为JavaScript的时候大概是项目启动一年多以后,整个框架定的比较死,想升级很难难。我们下一款新的游戏会考虑JavaScript。由于目前整个游戏用的C++,导致iOS要升级整个包,是一个很大的问题。当时这个项目刚开始的时候确实是没有很多周边的工具,现在的环境比当年真的要好很多,studio 2.0之后成熟很多了。

项目开始的时候,我们团队背景是美术和开发对Flash都比较熟悉,所以我们就用JSFL导出并适配到Cocos上面。今天我就介绍一下我们用这个方案来做我们的一些工具包。

我们自己基于Flash开发的工具包大概有四类:

第一是人物动作特效的编辑器。这是《三国之刃》这样的横板格斗类最重要的编辑器。在这上面可以有三组人员开展工作,就是美术先编辑效果,然后策划配数据,配完之后开发再去导出需要的那组数据,最后整合到程序,运行起来跟Flash效果是一样的。

第二是UI编辑器。UI编排完之后也是跑一下我们的JSFL扩展,导出一个文件,程序可以使用。

第三类是地图编辑器,可以编辑地图所有的部件。第四是动画编辑器,这是在起来下半年才开始动工做的工具,可以直接在Flash,按照Flash做一个规范,出来的效果是一模一样的。

第四类是动画编辑器。

下面我就展开介绍。

这是一个人物站立状态,这边有一个属性配置,策划可以在这边做一些选项,这种配置选项属性,这种小的控件可以自己开发。Cocos也可以做一些可以自己放的控件,然后去做一些很特殊的导出,这样开发会很方便的字一些拓展。

一、动作编辑

这个是我们受击动作和攻击动作的配置,也是一样,会有一些小的控件,策划可以直接在上面配置这些数值,比如攻击矩形。上面就是动画是由美术上去,整个动作都在这里。最上面的是其实有策划来配置的。就是说动作上可以有哪些关键的点,这些点是属于攻击,还是属于没有攻击效果的之类。这个标签的规则我们是跟策划去协商。我来操作给大家看一下:这个可以直接在上面实时预览。这个其实是攻击时候判断用的矩形框。这个整个开发的过程。

二、UI编辑

UI编辑器,上面的所有图片可以直接放,按纽也是可以直接拖。这样子我们的开发流程和操作流程上效率上还是比较高的。这个有几个好处,一个是说美术人员对Flash一般很熟悉,基本上是零学习成本。开发也不用太关心说Flash要怎么摆。这个工具基本上是我一个人在维护,维护完之后其实就是开发和美术之间只需要通过Flash来看,我可以达到的效果就是Flash里面摆出来是什么效果,我的界面就是一模一样的效果,基本上没有偏差。这个就是单人UI的界面,上面可以直接编辑所有的控件。一个视图可以嵌另外一个视图。就是说策划和UI开发之间,UI只管摆这些位置,我通过脚本把这里面所有的位置全部都取出来,然后升成一份配置,这样整个开发的流程相对来说是比较迅速的。

三、地图编辑

地图编辑器,全部是由Flash来做操作,上面有远景、中景和地板。这条是地板线,这些都是直接用辅助线可以当做一个辅助的下面,然后我们就可以用JSFL版把参数弄出来,这就是我们需要的配置。

四、动画编辑

动画编辑:在上面可以做任何的旋转,透明度的变化,Flash原来怎么做动画就怎么做动画,做完以后就是整个Flash的参数。整个技能的效果就是这样子,美术要看完整,就是直接导出一个Flash,效果和我们在程序里实现的效果是一模一样的。

我就介绍到这里,谢谢大家!