Как стать автором
Обновить

Комментарии 29

То есть с вашим подходом возможно экспортировать только растровые символы?
Да, это одно из ограничений на текущий момент.
Ясно. В моем проекте нужно было экспортировать в том числе и векторную анимацию, поэтому был написан простой парсер swf… Swf файлы экспортировались в спрайтшиты и простой xml или plist, структура у которого напоминала swf — очень ограниченный набор тегов. Настройка масштаба для разных разрешений легко производится во время экспорта.
А можно по-подробнее, о подготовке psd файла и атласа для движка. C флэшем всё ясно, послойный psd в качестве атласа. А в движке вы как реализовали такой же атлас? В каком-нить texture packer'e тот же psd редактировали под движок и в png?
Есть небольшой парсер формата PSD, умеющий вытаскивать слои и упаковывать их в атласы.
В Gimp я делаю это при помощи GMIC, Layers to Tiles
как вы решали подобные задачи в своих проектах.

парсится swf, по ней генерируется спрайтшит, xml описания анимаций и код.

За счет генерации кода есть возможность обращаться к частям анимации, изменять в рантайме ее свойства. Кроме того это упрощает работу с графикой.
Можно делать так (весь код MyClip и его детей генерируется):

var clip = new MyClip();
clip.child1.partOfChild.Rotation = 40;
clip.someOtherChild.GotoAndPlay(12);
clip.FinishEvent += OnAnimationFinish;

Код на C#, так как пишу на моно.
Не пойму в чем новизна подхода автора статьи.
Эта техника давно уже используется.
Вот пруф из недавнего:

Added by Raymond Lu 4 months ago

I create a tool named Super Animation Converter, which is a simple SWF (a file format supported by Adobe Flash Player software) converter. It can parse and extract transformation data from SWF file. With these transformation data and the right images, you can reproduce the animation in any game engine just as Adobe Flash Player can do.

The native animation solution in Cocos2D game engine is “frame by frame” animation, which means if there are 20 frames in your animation, you need 20 pieces of image(texture), and draw these images one by one on the screen to create animation effect. There are two flaws in this solution:

1 High resource consuming, one frame one image;
2 Hard to make smooth animation, since no interpolation between frames, which means it “jumps” directly from the current frame to the next frame.

So I try to provide a better animation solution which is based on Super Animation Converter for Cocos2D game engine. The idea is very simple:

1 Use Flash as your animation editor, create any animation you want in it, then export these animation as SWF file.
2 Parse the SWF file with Super Animation Converter, get the transformation data and images(NOT the whole frame) from the SWF file.
3 Reproduce the animation in Cocos2D game engine with the transformation data and images.

This project costs me lots of time.
But since we are so close to the end of the world, I decide to share it with all of you guys.
Please read «super_anim_help_english_version_1.pdf» first, then enjoy it!

I’ve put the tool & source code in github:
github.com/raymondlu/super-animation-samples

Updates
1 Support sprite sheet, which means you can use TexturePacker to pack some small images into one big images
2 Support resize animation, you can resize one animation to different size to support multiple resolution
3 Add set flip x&y function
4 Fix some crash bugs, some depth bugs, alpha blend bugs, more stable now

Enjoy it!

www.cocos2d-x.org/boards/6/topics/19621?r=19711
Полностью с исходниками
I’ve put the tool & source code in github:
github.com/raymondlu/super-animation-samples
На новизну я и не претендовал. Видел реализацию, на которую вы ссылаетесь, исходники Super Animation Converter недоступны.
А зачем Вам исходники Super Animation Converter? Можно подумать, что Вам еще необходимы срочно исходники Adobe Flash или Adobe Photoshop только потому, что Вы используете эти инструменты. Имелись в виду исходники для встраивания в двиг.

А Вы выложили исходники тулзы на паблик?

Если нет, в чем преимущество Вашего решения по сравнению с приведенным мной примером?
Как вы делаете скейлинг лэйаута интерфейса для разных разрешений?
Привязываем объекты интерфейса к различным опорным точкам, углам экрана, например. В двух словах не объяснить, это тема для отдельной статьи.
Немного не понял. А можно еще раз на примере? Вот есть такой объект — резиновый прямоугольник. И его анимация, левая часть объекта уходит вниз, правая — вверх, а середина остается на месте. Я хорошо себе представляю, как это анимируется во флеше. Но каким образом, можно провести такую трансформацию над растровым спрайтом, который ложится на полигон из 2ух треугольников?

image
Двигаете вершины треугольников и все.
Обычная трансформация, shear называется вроде.
Also 2 soulburner. Я немного про другое говорю. 1 — это исходный резиновый кирпич на полигоне. 2 — то, что получиться с помощью shear (правые вертексы вверх, левые вниз). 3 — то что нужно и очевидно невозможно получить, простыми трансформациями.

Так и 3-й вариант вы и во флеше без векторного морфа не получите.
Собственно, этот вопрос у меня потому и появился. Я в принципе не мог себе представить, что вообще все анимации в Pudding Monsters это тупо skew и scale. Для меня это выглядело настоящим вектором. И только сейчас, с лупой посидев над айфоном, вижу отдельные спрайты. Нереально крутая работа)
а еще таким же образом анимируется зелененький Om-nom из Cut the Rope. Шедевр!
Om Nom вообще покадровый :-)
пруф! :)

Не могу, конечно, утверждать, что он не покадровый, т.к. это мое предположение.
И раньше тоже думал, что он покадровый, но присмотревшись под лупой… :)
Для Android APK-файлы не зашифрованы, достаточно заглянуть в папку assets на png файлы :-) В случае iOS примерно так же.
Отличный подход! А есть ли его opensource реализация для javascript?
Не встречал.
Расскажите немного подробней. Есть у вас векторная анимация в fla файле. Как она воспроизводится в iOS? Приложение полностью создается во Flash Builder-e или у вас есть какой-то свой компонент, который воспроизводит такие анимации?

Магия рук между атласом 4016х2086 и атласом 518х942 для меня также осталась загадкой. :)
Есть у вас векторная анимация в fla файле

Есть анимация с растровыми символами во fla файле.

Как она воспроизводится в iOS?

Игровым движком, написанном на C++, средствами OpenGL.

Приложение полностью создается во Flash Builder-e или у вас есть какой-то свой компонент, который воспроизводит такие анимации?

Flash Builder не используется. Как воспроизводятся анимации, я ответил выше.

Магия рук между атласом 4016х2086 и атласом 518х942 для меня также осталась загадкой. :)

Каждый ключевой кадр не хранится полностью на атласе, а собирается по кусочкам, никакой магии :). Это становится понятнее, если присмотреться к последним двум скриншотам.
Спасибо за детальный ответ. Стало много яснее. :) Хорошие у вас аниматоры, раз рисуют такую красоту из статических картинок используя пару трансформов.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий