使用FlashCS6制作cocos2d-x动作脚本的思路整理

前言

最近参加了一个卡牌游戏项目的前期准备工作，工作内容是做一个卡牌游戏的战斗场景demo。其中有不少动作特效动画，比如攻击的时候卡牌需要扭动、被攻击时需要斜后方抖动平移等等。cocos2d-x引擎实现这些动画不是问题，无非是Sprite执行MoveBy、RotateTo、EaseIn、EaseOut等动作极其组合，难点在于动作特效的编辑。作为一个程序猿，我是有自知之明的，动作特效编辑不是我擅长的，这种事情最好交给专业的美术去做。

问题在于，美术用什么工具去编辑这些动画？程序如何去读取？

首先想到的是CocoStudio，但最终放弃了，因为这不是CocoStudio擅长的领域，最直接的，CocoStudio无法实现颜色透明度的渐变。

最理想的工具非Flash莫属，说道做动画，首先想到Flash。但是Flash做出来的动画怎么应用到程序呢？总不能将动画分解，然后一段段用程序翻译吧？

偶然间遇到这篇文章 http://baike.baidu.com/link?url=uZwJfQlmQzF6R88DmJdK9gv2q-L6jMwiIgkIz9YdUNukYnkBt7mVuR64m2LDDiWmLbr_Iq3UYLB5TLG_fsCkp_

突然眼前一亮，救星啊，原来FlashCS5以后的fla文件其实是个ZIP包，所有的帧数据都保持在zip包里面的DOMDocument.xml文件里面。而且，保持Flash的时候，你可以选择*.xfl格式，这样其实就是一个文件夹，DOMDocument.xml就躺在文件夹里面等你。

好啦，基本思路就有了，想办法解析DOMDocument.xml文件，将其翻译为cocos2d-x能读懂的。

PS:实现代码我已经发到github了，地址https://github.com/ctbinzi/FlashCS6ForCocos2d-x

解读DOMDocument.xml文件

在解读DOMDocument.xml之前，我们先了解一下Flash存档的目录结构，如下：

左侧是Flash的lib库结资源目录构，右侧是该Flash项目的存档目录结构，可以发现，lib库下面的每一个资源都对应一个位于存档文件夹下的LIBRARY目录下面的文件，位图资源对应的是图片文件，目录对应的是同名文件夹，MovieClip对应的是xml文件，且该xml文件完整地描述了该MovieClip的详细信息。当然，在存档目录的根目录位置有一个DOMDocument.xml文件，该文件描述的是该Flash舞台及其相关属性。

好了，了解完Flash存档目录结构和Flash资源的关系后，我们可以开始逐一分析他们了。

首先，我们还是从DOMDocument.xml开始入手，我将该xml文档中一些暂时不太关心的内容去除，并在需要我们着重关心的部位加上注释，记录如下

<DOMDocument frameRate="60">
<!-- DOMDocument是该xml文档的根节点，其中我们比较关心的属性只有一个frameRate，该属性值记录的是该Flash的帧频率，FlashCS6的默认值是24--><folders><!-- 该节点下罗列了我们在LIBRARY里面创建的文件夹，其实我们可以不必关心它 --><DOMFolderItem name="folder_effect" itemID="537776ce-000001df" isExpanded="true"/></folders><media><!-- 该节点下罗列了该Flash所用到的图片及其它从外部到了的多媒体资源信息 --><DOMBitmapItem name="8.png" itemID="5313e068-000001f8" sourceExternalFilepath="../Actions/LIBRARY/8.png" sourceLastImported="1392726125" externalFileCRC32="1072798625" externalFileSize="34982" originalCompressionType="lossless" quality="50" href="8.png" bitmapDataHRef="M 1 1393811560.dat" frameRight="4200" frameBottom="3840"/><!-- 该节点描述了该多媒体资源的相关属性，其中我们比较关心的属性如下：--><!--name    该多媒体资源的名字，即我们在Flash编辑器的库视图里面看到的名字，如果是在文件夹里面的话，其名字会带上文件夹路径--><!--itemID   唯一ID，Flash里面的所有资源都会被分配一个类似这样的唯一ID--><!--href   该资源对应存储目录下的文件相对路径，相对LIBRARY文件夹的路径--><DOMBitmapItem name="effect1.png" itemID="531d709d-000001e6" sourceExternalFilepath="../Actions/LIBRARY/effect1.png" sourceLastImported="1392901873" externalFileCRC32="2070406904" externalFileSize="16942" originalCompressionType="lossless" quality="50" href="effect1.png" bitmapDataHRef="M 2 1394436802.dat" frameRight="3480" frameBottom="3420"/><DOMBitmapItem name="folder_effect/effect2.png" itemID="531e6ce8-000001ee" sourceExternalFilepath="../Actions/LIBRARY/effect2.png" sourceLastImported="1362735664" externalFileCRC32="1477998738" externalFileSize="36159" originalCompressionType="lossless" quality="50" href="folder_effect/effect2.png" bitmapDataHRef="M 3 1394500443.dat" frameRight="8000" frameBottom="5200"/></media><symbols><!-- 该节点下罗列了该Flash所拥有的MovieClip信息，每一个MovieClip对应一个xml文档，存放于LIBRARY目录下面 --><Include href="1.xml" loadImmediate="false" itemID="5332958a-000001da" lastModified="1395884060"/><!-- 该节点描述了一个MovieClip的相关属性，其中我们比较关系的属性如下：--><!--href   该资源对应存储目录下的文件相对路径，相对LIBRARY文件夹的路径--><!--itemID 唯一ID，Flash里面的所有资源都会被分配一个类似这样的唯一ID--><Include href="2.xml" loadImmediate="false" itemID="531e636b-000001db" lastModified="1395884063"/><Include href="Card1.xml" loadImmediate="false" itemID="5313e070-000001fa" lastModified="1395884065"/><Include href="effect1.xml" itemID="533295a5-000001de" lastModified="1395912879"/><Include href="effect2.xml" itemID="533295a2-000001dd" lastModified="1395914886"/><Include href="folder_effect/effect3.xml" itemID="5333f886-00000213" lastModified="1395914979"/></symbols>... ...
</DOMDocument>

需要特别说明的是，<timelines>节点及其子节点我没有做任何说明，因为我们这个项目不打算把动画直接做在舞台上。主要原因是为了方便管理，我们把所有动画都做到了MovieClip里面。从上述描述信息中我们可以看到，在这个xml文档中，我们比较关心的内容主要是图片资源信息和MovieClip信息，下面我们需要做的事情就是逐一解析MovieClip。

从上述内容我们知道每一个MovieClip在LIBRARY目录下面都有一个对应的xml文档来存储其详细信息，下面，我们还是按照DOMDocument.xml分析方法，分析一个MovieClip文档。

<DOMSymbolItem xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://ns.adobe.com/xfl/2008/" name="test" itemID="5377877f-000001fc" lastModified="1400342648" lastUniqueIdentifier="1"><timeline><DOMTimeline name="test"><!--时间轴，每个MovieClip有且只有一个，不必关心--><layers><DOMLayer name="layer1" color="#9933CC" autoNamed="false"><!-- 层，对应Flash编辑器里面的的层，每个层可以添加多个关键帧，每个关键帧对应一个DOMFrame节点 --><frames><DOMFrame index="0" duration="9" tweenType="motion" motionTweenSnap="true" keyMode="22017" acceleration="-100" soundName="test.mp3"><!-- 记录关键帧信息，关键帧即如上图所示，带有实心点的帧。我们比较关系的属性有如下：--><!-- index            帧索序号，从0开始--><!-- duration      该关键帧持续帧数，即从改帧开始到下一个关键帧之间间隔的帧数 --><!-- tweenType        渐变动画类型，在我们这个项目中只会用到传统补间动画，对应值为motion--><!-- acceleration    缓动效果，比较有意思的是，该值和我们在Flash编辑器里面设置的值符号刚好相反--><!-- soundName        声音，其值对应DOMDocument.xml文档里面记录的名字--><SoundEnvelope><SoundEnvelopePoint level0="32768" level1="32768"/><!--声音属性，level0和level1分别对应了左声道和右声道音量值[0~32768]--></SoundEnvelope><elements><!--记录该帧放置内容，我们可以在一个关键帧放入影片剪辑、图片、声音等信息，这些信息都将一一记录如下--><DOMSymbolInstance libraryItemName="1" centerPoint3DX="-159.95" centerPoint3DY="-52"><!--每一个被放入该帧的MovieClip都将对应一个该节点，其中我们比较关系的属性是--><!-- libraryItemName   该属性值记录了该MovieClip的名字，对应DOMDocument.xml文档里面记录的名字--><matrix><!--该节点记录了该MovieClip在该帧时的位置信息，通过选择矩阵的方式记录，包括了坐标位置、旋转角度、缩放等信息--><Matrix a="0.30902099609375" b="-0.9510498046875" c="0.9510498046875" d="0.30902099609375" tx="-77.8" ty="-25.3"/></matrix><transformationPoint><Point y="-86.4"/></transformationPoint><color><!--该节点记录了该MovieClip在该帧时的颜色信息，主要包括argb是个颜色通道的值，Multiplier是百分比值[0~1]，Offset是相对值[-255~255]]--><Color alphaMultiplier="0.4296875" redMultiplier="0.83984375" blueMultiplier="0.87890625" greenMultiplier="0.87109375" alphaOffset="14" redOffset="8" blueOffset="29" greenOffset="15"/></color></DOMSymbolInstance><DOMBitmapInstance libraryItemName="8.png"><!--每一个被放入该帧的位图都将对应一个该节点，其中我们比较关系的属性是--><!-- libraryItemName  该属性值记录了该位图的名字，对应DOMDocument.xml文档里面记录的名字--><matrix><Matrix tx="-299.95" ty="57.15"/></matrix></DOMBitmapInstance></elements></DOMFrame></frames></DOMLayer></layers></DOMTimeline></timeline>
</DOMSymbolItem>

需要注意的是，为了列举尽可能多的情况，并控制文档不会过长，我对原始文档做了调整，可能无法被FlashPro正常解析，但不影响我们理解。

从上述解析文档可以看出，需要我们着重关心的是<DOMFrame>节点属性，以及<SoundEnvelope>、<DOMSymbolInstance>、<DOMBitmapInstance>节点内容。此外，我们需要理解在Flash里面，动画师由关键帧组成的，即关键帧在时间上的延续，以及关键帧到下一个关键帧的渐变过程。

另外，Flash的舞台其实也是一个MovieClip，也就是说，如果我们直接在Flash舞台上放置了元件，或是在舞台的时间轴上添加了关键帧，那么在DOMDocument.xml文档里面的内容也将跟上述解析内容类似，一样对待即可。

使用FlashCS6制作cocos2d-x动作脚本的思路整理相关推荐

图文并茂使用CocosBuilder制作Cocos2D游戏分享0
图文并茂使用CocosBuilder制作Cocos2D游戏分享0 目录 The Game 设置工程创建动画类型的主界面本文由Zynga 工程师原创,翻译:Iven,张作宸,Butterfly ...
图文并茂使用CocosBuilder制作Cocos2D游戏
手把手教你使用CocosBuilder一次性导出Cocos2d-html5,Cocos2d-x和Cocos2d-iPhone的游戏资源文件.这个游戏90%的工作量是用工具完成. CocosBuilde ...
记录Python selenium制作自动化农民世界脚本第一天
@记录Python selenium制作自动化农民世界脚本第一天第一步,实现自动化登录农民世界直接上代码 class Wish(object):# def __init__(self):def g ...
用java的robot类以及Gui 制作一个游戏(阴阳师)脚本
** 用java的robot类以及Gui 制作一个游戏(阴阳师)脚本 ** 由于阴阳师这个游戏肝度太大,就决定写一个脚本来模拟玩家的重复性操作.所以我就决定用java中的robot类中的一些方法来 ...
01 NCC常用动作脚本
01 NCC常用动作脚本节点脚本入口销售出库 N_4C_ 调拨出库 N_4Y_ 销售订单 N_30_ 调拨订单 N_5X_ 采购订单 N_21_ 预订单 N_38_ 材料出库 N_4D_ 库存采 ...
超神，chatgpt帮你制作任意油猴脚本
场景: 超神,chatgpt帮你制作任意油猴脚本,为所欲为! 屏蔽网页所有非文字内容 // ==UserScript== // @name 屏55555 // @namespace none // @ ...
python制作简易阴阳师游戏脚本（基础问题篇）
正值过年的关卡,疫情严重,在这里盼望武汉马上恢复起来,武汉加油!!! python制作简易阴阳师游戏脚本(代码篇) 在一动不动的这几天里,受朋友的邀请写了个阴阳师刷御魂的脚本. 因个人水平有限,希望各 ...
游戏脚本开发思路总结
初级版 1 看见屏幕的某个位置有某个图片,点它 2 看见屏幕上某个位置有有些字,我要去点某个位置或图片 3 看见屏幕上某个位置进度满了(空了),我该点屏幕上某个图片或某个位置了 4 屏幕上某个位置一直 ...
【有趣的Python小程序】Python多个简单上手的库制作WalkLattice 走格子游戏（思路篇）上
篇写上一个思路篇,那么今天我们就来完成这一项工作源代码和配套文件链接: https://caiyun.139.com/m/i?135ClY1yWrSKX 提取码:e4pq 复制内容打开中国移动云盘 ...
anki 插入表格_【anki|批量制作选择题的另一种思路】- 一点资讯(Yidianzixun.com)
本文脱稿于以下一篇文章,十分感谢 @NetTeel 的文章.如果没有这篇文章,这篇文章估计也是无法产生的. 出了点意外,为了不打扰到其他人,删掉一些文字,并不影响这篇anki制作选择题的另一种思路的内 ...

使用FlashCS6制作cocos2d-x动作脚本的思路整理

前言

解读DOMDocument.xml文件

使用FlashCS6制作cocos2d-x动作脚本的思路整理相关推荐

最新文章

热门文章