Flash中导出在Cocos2d-x中使用的精灵表

最新推荐文章于 2017-06-08 17:09:00 发布
最新推荐文章于 2017-06-08 17:09:00 发布
阅读量2.2k 收藏
点赞数
分类专栏： Cocos2d-x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linchaolong/article/details/41007259
版权
本文介绍了如何在Flash中导出适用于Cocos2d-x的精灵表，并通过修改导出文件的命名规范，提高程序中创建动画帧的效率。通过调整Action Script脚本，将导出的.plist文件的key字段从'元件名称+补零序号'改为'元件名称+无补零序号'，简化了在Cocos2d-x项目中的使用方式。
摘要由CSDN通过智能技术生成


Flash中导出可在Cocos2d-x中使用的精灵表



1.打开fla文件，在库中选择要导出精灵表的元件，右键——生成Sprite表



2.选择数据格式为Cocos2D v2



3.导出文件如下：


plist文件



导出的文件可在程序里面直接使用，但有个问题，可以看到plist文件中动画帧的key是以“元件名称”+序号（前面补0）组成的，如果这样直接在程序里面使用的话，在创建动画

帧的时候需要判断序号的位数，并进行补0的操作，这样效率就不高了。


如果能让导出的plist文件中key字段的命名中序号不需要补0，这样在程序中使用就更方便了。这就需要修改flash中导出精灵表的action script脚本了。




修改导出文件命名规范


在Flash的安装目录下的这个路径：Adobe\Adobe Flash CS6\Common\Configuration\Sprite Sheet Plugins，就是存放导出精灵表相关的脚本。脚本的命名就是对应数据格式的。所以要修改的是cocos2dv2.plugin.jsfl




在函数frameExport中就是导出每一帧的处理，我先把这部分注释解除掉，再做一次导出操作，看看输出。


控制台输出如下：

==== frameExport
skill-1-0001   //frame.id
69
0
69
56
0
0
69
56
false
false
1             //frame.frameNumber
skill-1-      //frame.symbolName
undefined
undefined
---- frameExport


在脚本中默认是使用frame.id作为动画帧key字段的值，但如下使用“frame.symbolName + frame.frameNumber”拼接的字符串作为值会更方便在程序里面使用。

所以将以下代码：

var s ='\t\t\t<key>' + frame.id + '</key>\n';

修改如下：

var s ='\t\t\t<key>' + frame.symbolName + frame.frameNumber + '</key>\n';


重新导出后的plist文件，key值的命名如下：




修改后的代码如下：

function getPluginInfo(lang)
{
//	fl.trace("==== getPluginInfo");
//	fl.trace(lang);
//	fl.trace("---- getPluginInfo");

	pluginInfo = new Object();
	pluginInfo.id = "cocos2Dv2";
	pluginInfo.name = "cocos2D v2";
	pluginInfo.ext = "plist";
	pluginInfo.encoding = "UTF8";
	pluginInfo.capabilities = new Object();
	pluginInfo.capabilities.canRotate = true;
	pluginInfo.capabilities.canTrim = true;
	pluginInfo.capabilities.premultipliedAlpha = false;
	pluginInfo.capabilities.canShapePad = true;
	pluginInfo.capabilities.canBorderPad = true;
	pluginInfo.capabilities.canStackDuplicateFrames = true;
	
	return pluginInfo;
}

function beginExport(meta)
{
//	fl.trace("==== endExport");
//	fl.trace(meta.app);
//	fl.trace(meta.version);
//	fl.trace(meta.image);
//	fl.trace(meta.format);
//	fl.trace(meta.size.w);
//	fl.trace(meta.size.h);
//	fl.trace(meta.scale);
//	fl.trace("---- endExport");

	var s = '
   
   \n';
	s += '\n';
	s += '
   
   
    
    \n';
	s += '\t
    
    
     
     \n';
	s += '\t\t
     
     
      
      frames
     
     \n';
	s += '\t\t
     
     
      
      \n';

	return s;
}

function frameExport(frame)
{
//	fl.trace("==== frameExport");
//	fl.trace(frame.id);
//	fl.trace(frame.frame.x);
//	fl.trace(frame.frame.y);
//	fl.trace(frame.frame.w);
//	fl.trace(frame.frame.h);
//	fl.trace(frame.offsetInSource.x);
//	fl.trace(frame.offsetInSource.y);
//	fl.trace(frame.sourceSize.w);
//	fl.trace(frame.sourceSize.h);
//	fl.trace(frame.rotated);
//	fl.trace(frame.trimmed);
//	fl.trace(frame.frameNumber);
//	fl.trace(frame.symbolName);
//	fl.trace(frame.frameLabel);
//	fl.trace(frame.lastFrameLabel);
//	fl.trace("---- frameExport");

	
	
	//var s ='\t\t\t
      
      
       
       ' + frame.id + '
      
      \n';
    //修改动画帧key字段的值为“文件名+序号”（不补0）
	var s ='\t\t\t
      
      
       
       ' + frame.symbolName + frame.frameNumber + '
      
      \n';
	
	s += '\t\t\t
      
      
       
       \n';

	s += '\t\t\t\t
       
       
         frame 
       \n';

	//fl.trace("key----");
	//fl.trace(s);
	//fl.trace("----key");

	var scrx = frame.sourceSize.w - frame.frame.w;
	var scry = frame.sourceSize.h - frame.frame.h;
	s += '\t\t\t\t
       
       
         {{' + frame.frame.x + ',' + frame.frame.y + '},{' + frame.frame.w + ',' + frame.frame.h + '}} 
       \n';

	s += '\t\t\t\t
       
       
         offset 
       \n';
	var srcofsx = 0 - frame.offsetInSource.x;
	var srcofsy = 0 - frame.offsetInSource.y;
	s += '\t\t\t\t
       
       
         {' + srcofsx + ',' + srcofsy + '} 
       \n';

	s += '\t\t\t\t
       
       
         rotated 
       \n';
	s += '\t\t\t\t<' + frame.rotated + '/>\n';

	s += '\t\t\t\t
       
       
         sourceColorRect 
       \n';
	var scrx = frame.sourceSize.w - frame.frame.w;
	var scry = frame.sourceSize.h - frame.frame.h;
	s += '\t\t\t\t
       
       
         {{' + scrx + ',' + scry + '},{' + frame.frame.w + ',' + frame.frame.h + '}} 
       \n';

	s += '\t\t\t\t
       
       
         sourceSize 
       \n';
	s += '\t\t\t\t
       
       
         {' + frame.frame.w + ',' + frame.frame.h + '} 
       \n';

	s += '\t\t\t
      
      \n';

	return s;
}

function endExport(meta)
{
//	fl.trace("==== endExport");
//	fl.trace(meta.app);
//	fl.trace(meta.version);
//	fl.trace(meta.image);
//	fl.trace(meta.format);
//	fl.trace(meta.size.w);
//	fl.trace(meta.size.h);
//	fl.trace(meta.scale);
//	fl.trace("---- endExport");
	
	var s = '\t\t
     
     \n';
	s += '\t\t
     
     
      
      metadata
     
     \n';

	s += '\t\t
     
     
      
      \n';

	s += '\t\t\t
      
      
       
       format
      
      \n';
	s += '\t\t\t
      
      
       
       2
      
      \n';

	s += '\t\t\t
      
      
       
       realTextureFileName
      
      \n';
	s += '\t\t\t
      
      
       
       ' + meta.image + '
      
      \n';

	s += '\t\t\t
      
      
       
       size
      
      \n';
	s += '\t\t\t
      
      
       
       {' + meta.sheetWidth + ',' + meta.sheetHeight + '}
      
      \n';

	s += '\t\t\t
      
      
       
       textureFileName
      
      \n';
	s += '\t\t\t
      
      
       
       ' + meta.image + '
      
      \n';

	s += '\t\t
     
     \n';

	s += '\t
    
    \n';
	s += '
   
   \n';

	return s;
}


测试工程svn地址（可用svn客户端checkout到本地，是一个Cocos Code IDE的工程）：http://code.taobao.org/svn/flash_sprite_sheet_cocos2dx/trunk


运行效果：



CYRUS STUDIO
关注
专栏目录
cocos2d-x播放序列帧动画
江南岸
06-28 4038
cocos2d-x播放序列帧动画 最近做项目，需要用到特效，首先我想到的是动画编辑器，目前用于cocos2d-x的动画编辑器不是很多，我曾经用过一款， Spriter 网址 http://www.brashmonkey.com/ 这是一款不错的编辑器，而且对资源的节省也是不错的，但是可惜的是，我们的美术没有用过。我看了看他们做特效用的是Flash或者AE，可以很轻松的导出序列帧动画，我想既可
cocos2d-x面试题（一）
zcl1804742527的博客
09-27 9467
cocos2dx
Flash转cocos2dx骨骼动画
08-12
功能简介： 1 可将常规SWF资源转化为骨骼动画资源； 2 可将常规SWF资源转化为序列帧动画资源； 3 支持PNG、JPG、PVR、ETC、WEBP等多种资源格式； 4 支持动态分割纹理； 5 支持批量打包； 6 支持cocos2dx； 适用场景： 1 可以帮助2D网页游戏做优化资源； 2 可以帮助2D网页游戏做GPU渲染优化； 3 可以快速将2D网页游戏资源转化为2D手机游戏资源； 4 适合flash爱好者开发cocos2dx手机游戏； 适用说明： 1 加载动画 -- 用于加载SWF资源，最终打包成序列帧资源； 2 加载骨骼 -- 用于加载SWF资源，最终打包成骨骼资源（推荐使用，资源更小）； 3 生成位图 -- 用于生成资源纹理； 4 排序 -- 用于重新排列生成的纹理贴图； 5 发布 -- 用于导出最终的纹理资源； 6 批量打包 -- 用于批量打包资源； 7 设置 -- 用于设置路径，如资源导出路径、TexturePacke路径等； 如需使用PVR，WEBP等格式，只需在“设置”中设置 TexturePacke 的路径即可。 批量打包： 1 按照“batchConfig.xml”中的格式配置所有的资源 2 将“设置”中“批量打包配置路径”设置为“batchConfig.xml”的路径； 3 点击“批量打包”按钮开始批量打包；
cocos2d-x与FLASH动画之Flash2Cocos2d-x
weixin_34399060的博客
01-29 304
当前我学习把cocos2d-x应用于Android平台的游戏开发（C＋＋版本）。目前，缺少的是动画编辑器。如果能够把FLASH用作这个平台的动画编辑器那是再理想不过的。我搜索了许多的网站，最终得出如下结论：1，读出FLASH中动画的逐帧数据可以通过较容易地读出FLASH中动画的逐帧数据，然后创建cocos2d-x动画。这方面的主要工具是老G的AnimatePacker。它提供的参考文章是：http...
(转)cocos2d-x 动画工具 Flash2Cocos2d-x
gxj1680的专栏
07-25 1227
本文由社区会员jjyinkailejj分享 最近在研究cocos2d-x引擎，制作游戏非常重要的一点就是需要一个动画工具，在网上找了一下，发现找到的工具不是很符合自己想象的，要么没有缓动效果， 要么没有骨骼等。 其实在使用libgdx的时候就用到过一款叫做spriter的工具, 网址：http://www.brashmonkey.com/spriter.htm，那时用的版本还不支持tw
关于pc上的flash动画转移到Cocos2d-x使用
码农之初心
05-26 1290
关于pc上的flash动画转移到Cocos2d-x使用 Jetion: 某些时候，我们可能需要把pc上面的Flash动画拿到Cocos2d-x上面使用。 解决方案： 第一： 若你的.fla源文件中不带有骨骼动画，则你可以使用TexturePacker结合AnimatePacker来解决这个问题。 a.把.fla文件导出为.swf b.把.swf文件
Flash2Cocos2d-x
DevXP的专栏
03-22 1447
Cocos2d-x的Flash解决方案 Flash2Cocos2d-x   https://github.com/jyinkailej/Flash2Cocos2d-x 移植于一个Flash2D的开源框架 https://github.com/DragonBones/ 作者blog：http://blog.sina.com.cn/s/articlelist_1460
cocos2d-x 动画工具 Flash2Cocos2d-x 1.3
09-28
开发者可以利用Flash强大的动画编辑功能，创建出丰富的动态效果，然后在cocos2d-x中无缝使用。 其次，该工具提供了详细的资源映射，确保Flash中的图层、帧和时间轴等元素能够准确地对应到cocos2d-x的节点结构中。这...
cocos2d-x播放flash序列帧示例
10-16
在cocos2d-x中播放Flash序列帧动画，我们通常会利用到`CCSpriteBatchNode`和`CCActionInterval`类。`CCSpriteBatchNode`用于优化多个精灵的渲染，而`CCActionInterval`则负责控制动画的播放速度和顺序。 1. **导入...
cocos2d-x学习笔记（持续更新）
热门推荐
we000636的专栏
12-06 2万+
接受触屏事件的优先级是值越小，响应触屏事件的优先级越高 Z值越大，越外面 粒子系统设计工具：Particle Designer软件  目前只支持MAC平台 导出 plist文件 地图设计工具：Tiles 目前有两个版本，一个是Java版本，另一个是QT版本  导出TMX格式文件 图片编缉工具，将多个精灵整合成一个大图：  导出plist文件 Zwoptex 两个版本，
修改AnimatePacker以导出plist格式
03-28
修改AnimatePacker以导出plist格式,这样就必用第三方的播放库,也可以快速生成动画序列了
Flash动画导出到Cocos Studio动作编辑器
hufang360的专栏
01-18 3668
最近遇到需要将flash动画制作成cocos骨骼动画的需求，记得一年前曾研究过，简单的标记了下注意事项，但最近动手时还是踩到一些坑，叫苦连连啊，于是就有了本文。首先准备好Flash CS6 + Cocos Studio Animation Editor 1.6（官方帮助）。*2018.03.22补充 官方链接已失效，1.6版编辑器地址 百度云：https://pan.baidu.com/s/1ls...
flash的动画如何转换到cocos2d-x上用呢？
游戏人生
03-27 830
http://gafmedia.com/converter/    ok 就是他了 不过现在只支持2.x版本。蛋疼~ 项目刚升到3.0 作者会在3.0稳定后出的 期待呀
Animate CC导出spriteSheets给原生js使用！
weixin_30547797的博客
06-08 924
一、准备工具 Adobe Animate CC 2017 jsMovieclip 类库 二、工作流程 使用Adobe Animate CC 导出sprite sheets 新建一个元件（影片剪辑MovieClip），在这个元件里添加 序列帧动画； 在库中选中这个元件，右击——生成Sprite 表——然后如图，进行设置 注意： ①这里算法...
plist文件生成及使用(帧动画实现)
hwh的博客
01-11 5448
生成： 1、打开cocos studio，并新建项目。 2、点击菜单的文件----新建文件----合图----取名称。 3、把需要的png图片拖进项目下，再拖入中间的大页面。 4、点击右边的导出合图，并选择文件夹，导出。 使用： 1、先将plist的图片加入缓存，再使用相应方法读取图片，例子： SpriteFrameCache::getInstance()->addSpriteF
Adobe源码泄漏？3行代码搞定，Flash动画无缝导入Android/iOS/cocos2dx（一）
hard_man的专栏
04-22 7017
一. 项目介绍 — 软件名称：[FlashAnimationToMobile] 这是一个把flash中的关键帧动画(不是序列帧)导出，然后在iOS／Android原生应用中解析并播放的一个插件。 除了原生App，它也能够支持Cocos2dx（3.x）。 这个库能够满足游戏，App开发中90%的2D
自定义TexturePacker插件导出自己的plist文件
weixin_33885676的博客
08-18 320
原地址：http://www.cppblog.com/sunicdavy/archive/2014/02/06/205645.html   cocos2dx引擎使用plist文件, 一种特殊的xml格式作为其atlas纹理的描述文件. plist遵循苹果的xml中key-value的设计风格.对于OC来说是合适的, 但xml本身性能低下, 垃圾内容过多, 也让plist对于高性能游戏引擎不再适...
[Unity基础]将sprite导出为texture
宏哥的博客
09-06 5585
原文链接： http://www.manew.com/thread-42456-1-1.html 1.将图集放置到Asset/Resources下，切割图集 2. using UnityEngine; using UnityEditor; using System.IO; public class TestSaveSprite { [MenuItem("Tools/导
使用cocos2d-x开发Uphone游戏：移动精灵实践
在cocos2d-x中开发游戏，精灵（Sprite）是基本的游戏对象，它们通常代表游戏中的角色、道具或其他可视化元素。本教程将介绍如何在Uphone平台上使用cocos2d-x创建和移动精灵，为初学者提供基础指导。 首先，我们需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值