Synfig StudioでつくるVectorアニメーション

iPhone Dev Sap勉強会 May 2012

須釡達雄 @gamako

Agenda

• 自己紹介

• SynfigStudioの紹介

• iPhoneアプリで使うときの工夫

自己紹介• 須釡達雄

• Twitter: @gamako

• 株式会社ビーユージー

• iPhone, Android, node.js, golang...

• 会社でジリリ、個人でうさこアプリなど

うさこでんたく

• うさこが手書きで計算

• 数字を喋る！

• なごむ！

今日の話題

Synfig Studio

• Vectorアニメーション作成ツール

• Win, Mac, Linux

• オープンソース

• Adobe Flash高いよ（泣）！という人に

Vectorアニメーション

• Vectorグラフィックスのアニメーション

• 点と線と塗りの時間変化を表現（間を計算で補完）

計算で補完

Raster vs Vector

• 一枚一枚描かなくてもいい

• 解像度、フレームレートの変更も自在

• プラットフォーム の変更

デモ

Synfig Studio

• Macでもインストール簡単になったけど・・・

• gtkベース（泣）

• 重い、わりとよく落ちるorz

• IKとか何それ、おいしいの？

正直• あまりおすすめできないかも、、、orz

• べつに・・・

いいところもあるよ

• ファイル形式がSVGに近い（xml）

• コア部分のコマンドライン実行ファイルが提供されている

• 書き出しを自動化できる

iPhoneアプリで使う

• pngのパラパラアニメを書き出して

• TextureAtras化して

• cocos2dでanimation

png書き出し• フレームレートを指定して

• 連番のpng

• コマンドラインでもできる

余白を削除• 余白を削除

• 切り出した座標を出力するツールを自作

TextureAtlas化• TexturePacker 有料ツール

• （GUI＆コマンドライン）

• コマンドラインで連番png → Texture & plist

読み込むコード• CCAnimationCache 順番にaddFrame

自動化

• synfigファイルからTextureファイル＆コード生成まで行うPythonスクリプト

• できたものをごっそりXcodeに追加

希望• ほんとはiPhoneでVectorデータをそのまま扱いたい

• Retina用、非Retina用pngをバイナリに含めたくない

• 誰か作って！

まとめ

• Synfig StudioでiPhone用のアニメーションをつくる方法。

• 安定性は不安。これからに期待。

• 工夫の余地あり。

おしまい

• UIKitベースで作ろうとすると、またいろいろ・・・

• うさこでんたくよろしくね