将 Flash 动画转换为 Cocos2D

发布于 2024-12-12 09:15:58 字数 1316 浏览 0 评论 0 原文

抽象的

我需要的是一种技术,在给定单个但分层的 Flash 动画的情况下,将每个帧中每个关键影片剪辑的位置和旋转导出为 XML。

代码将此信息读入cocos2d-ready格式会节省大量时间,但没有必要,因为我知道如何实现这一点。

我们的艺术家经常使用 Flash 绘制矢量并制作精彩且令人印象深刻的动画。过去,我们将这种艺术融入游戏的技术是将单独的动画导出为一系列 png,将它们粘贴在精灵表中,然后将它们转换为 CCAnimations。

这项技术效果很好,借助 spritesheets 和 pvrtc,我们可以在 20MB 的无线下载限制中获得相当多的艺术作品。然而,随着我们的成长,我们希望制作更大更好的游戏,这意味着更多的艺术!

我现在想要实现的是通过使用关键帧技术来模仿 Flash 行为,删除重复的艺术作品,从而大量减少艺术作品

即使用当前技术,一个字符将需要:

具有 10 帧的行走序列(例如 100 * 300 分辨率,30k 像素)将具有 10,每个姿势的全尺寸人类。 (总共 1000 * 300 分辨率,一个动画 30 万像素

说 5 个类似的动画,总共 150 万像素

同一角色的期望结果:

1条右腿:(40 * 30,1200像素)

1 条左腿:(40 * 30,1200 像素)

1 个躯干(50 * 50,2500 像素)

1 条左臂(40 * 30,1200 像素)

1条右臂(40 * 30,1200像素)

1 个头(30 * 30,900 像素)

所有动画的总计(8200 像素)

还有一个 xml 文件来解释每个帧的每个部分的转换。

我对Flash的了解有限。我导出了很多艺术作品,所以这不是问题,但我在 Actionscript 或导出其他信息方面没有太多经验。我注意到“将运动导出为 XML”选项,但它没有提供我需要的信息(它不会遍历影片剪辑的子级以获取其转换)。

Objective-c 方面的问题不那么严重,我知道如何解析 XML,不过如果有人也已经写过这个,如果您愿意分享,我将非常感激。

Abstract

What I require is a technique, given a single, but layered Flash animation, to export the position and rotation of each key movie clip in every frame as XML.

Code to read in this information into a cocos2d-ready format would save a lot of time but isn't necessary as I know how to achieve this.

Our artists often draw vector using Flash and have wonderful and impressive animations. Our technique in the past to put this art into our games is to export the separate animations as a sequence of pngs, stick them in a sprite sheet, and turn them into CCAnimations.

This technique works well and we can get quite a lot of art into the 20MB over the air download limit thanks to spritesheets and pvrtc. As we grow, however, we are looking to make bigger and better games, and this would mean more art!

What I'd like to achieve now is a mass reduction in the amount of art by using a keyframing technique to mimic Flash behaviour, removing duplicate pieces of art.

i.e. Using the current technique, one character would take:

A walk sequence with 10 frames (say 100 * 300 resolution, 30k pixels) would have
10, full sized humans in each stance. (for a total of 1000 * 300
resolution, 300k pixels for one animation)

Say 5 similar animations for a total of 1.5 million pixels

The desired outcome for the same character:

1 right leg: (40 * 30, 1200 pixels)

1 left leg: (40 * 30, 1200 pixels)

1 torso (50 * 50, 2500 pixels)

1 left arm (40 * 30, 1200 pixels)

1 right arm (40 * 30, 1200 pixels)

1 head (30 * 30, 900 pixels)

Total (8200 pixels) for all animations

And an xml file to explain the transform of each part for each frame.

My knowledge of Flash is limited. I have exported a LOT of art, so that's not a problem, but I don't have much experience in Actionscript or in exporting other information. I have noticed the Export Motion as XML option but it doesn't provide the information I need (It doesn't traverse to the children of movie clips to get their transform).

The Objective-c side of things is less of a problem, I know how to parse XML, though if somebody has already written this too, I'd be very grateful if you'd like to share.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

只是在用心讲痛 2024-12-19 09:15:58

我从未了解过任何现有工具,因此最终学习了一些 ActionScript 并自己编写了解决方案。

不幸的是,由于公司政策,我无法分享我的代码,但我将概述采取


ActionScript / Flash

  • 所需的步骤,逐步浏览每个帧
  • 让孩子们站在该帧的舞台上,并记下他们的变换
  • 浏览他们的每个子级并记下它们相对于父级的变换
  • 递归执行此操作,直到子级没有子级或您已到达 DrawingObject
  • 将信息保存为 XML

Art

  • 从库中导出您需要的每个符号并将其添加到精灵表中。 (我使用 JSFL 完成此操作)

Obj-C / Cocos2d

  • XML 应该包含一组框架,其中每个框架都有一个子级列表,并且递归地包含它们的每个子级。每个子节点都包含变换信息。
  • 阅读此 XML,在找到子项时将其添加到动画帧中,并将子项添加到其各自的父项中。应用儿童变换。

希望这对其他人有帮助。

I never did find out about any existing tools and so ended up learning a bit of ActionScript and writing the solution myself.

Unfortunately due to corporate policies I won't be able to share my code but I will outline the steps I needed to take


ActionScript / Flash

  • Step through each frame
  • Get the children on the stage on that frame and note their transform
  • Go through each of their children and note their transform with relation to their parent
  • Do this recursively until the children have no children or you have reached a DrawingObject
  • Save the information as XML

Art

  • Export each symbol you need from the library and add to a sprite sheet. (I did this using JSFL)

Obj-C / Cocos2d

  • The XML should contain a set of frames with a list of children for each frame and, recursively, each of their children. Each child node contains transform information.
  • Read in this XML, adding children to frames of an animation as you find them and children to their respective parents. Apply children's transforms.

Hope this helps somebody else.

未蓝澄海的烟 2024-12-19 09:15:58

我认为你的问题是关于“质量减少”部分。您绝对应该看看 TexturePacker。使用TexturePacker,您可以创建仅包含多个相同动画帧的单个图像的纹理图集,同时保留使用其原始文件名寻址该帧的能力。

TexturePacker 有一个 cocos2d 和 flash 导出器,可以从常用的文件格式导入。如果有些东西不完全符合您的需要,您可以联系作者 Andreas Löw。他反应非常灵敏,并致力于提供尽可能最好的纹理打包工具。

I assume your question is about the "mass reduction" part. You should definitely have a look at TexturePacker. With TexturePacker you can create texture atlases that contains only a single image of multiple, identical animation frames while retaining your ability to address that frame with its original filenames.

TexturePacker has a cocos2d and flash exporter, and can import from the usual file formats. If there's something not quite as you need it you can contact the author, Andreas Löw. He is very responsive and committed to providing the best texture packing tool possible.

眼眸里的那抹悲凉 2024-12-19 09:15:58

我编写了自己的轻量级解决方案。

一个简单的库,用于在 iOS / cocos2d 中导出 Flash 符号并对其进行动画处理,并包含示例。

工作流程:

  • 在 Flash 中将动画创建为带有包含图形符号的动画层的影片剪辑。
  • 使用附带的 JSFL 脚本将动画导出为 JSON + 帧 PNG。
  • 将 PNG 转换为精灵表(使用您自己的工具,我使用 - http://www.codeandweb.com/纹理打包器)
  • 在应用程序包中包含动画 JSON 文件和精灵表。
  • 加载纹理,使用简单的命令在精灵上运行复杂的多层动画。

在 github 上查看:

这是我的第一个 github 提交,我很好奇人们发现它有多有用它,所以让我知道。

I wrote my own lightweight solution.

A simple library to export and animate Flash symbols in iOS / cocos2d, with included example.

Workflow:

  • Create your animations in Flash as MovieClips with animated layers containing Graphic symbols.
  • Export animations as JSON + frame PNGs using included JSFL script.
  • Convert PNGs into sprite sheets (use your own tools, I use - http://www.codeandweb.com/texturepacker)
  • Include animation JSON file(s) and sprite sheets in app bundle.
  • Load textures, run complex multilayer animations on sprites using simple commands.

Check it out on github:

This is my first github submission and I'm curious how useful people find it, so let me know.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文