夏までにiPhone アプリつくってみっか!

趣味でiPhone/Androidアプリを開発し、日々勉強した事を書いています。オープンワールド系レースゲームをUnityで開発中です。

Macの標準機能で簡易パラパラアニメを作る方法

iPhoneのゲームに使うキャラクターのアニメーション具合をプログラムに組み込まずにとりあえずMac上で確認したいときに使える方法をググって見つけました。

1. アニメーションさせたい絵をGIF形式でセーブする

最近はGIF形式というのはあまりポピュラーじゃないんですかね?
私が使っているお絵描きソフトClip Studio Paint ProではGIFでのセーブはできないようです。

また、プレビューの書き出しのフォーマットにもGIFと言う選択肢は見当たりません。
しかしここで諦めてはいけません。
プレビューのファイルメニューで書き出しを選び、フォーマット選択ボタンをOptionキーを押しながらクリックしてみると、
f:id:takujidev:20140125222418p:plain
選択肢がずいぶん増えています。GIFもしっかり一番上にありますので、無事にGIF形式に変換する事ができました。
こんな感じで、アニメーションさせたい絵を1枚ずつGIFに変換します。

2. GIFファイルを1つにまとめる

例えば、Run0.gif 〜 Run5.gifという6枚のファイルからなるアニメーションの場合、Run0.gifをプレビューで開きます。
そして、プレビューの表示メニューからサムネールを選択します。
f:id:takujidev:20140125223436p:plain

サムネールのサイドバーが表示されるので、既にあるサムネールに重なるようにRun1.gifをドラッグ&ドロップで置きます。すると、Run0.gifにRun1.gifの内容が取り込まれ、下の画像のように、サムネールの下にはファイル名ではなく1、2といった数字が表示されます。
このとき、重なるようにドロップしないと別のファイルとして認識されてしまうので注意が必要です。
あとは、Run2.gif〜Run5.gifを順にドラッグ&ドロップして行きますが、今度は、一番下のサムネールのすぐ下に置くようにすると正しい順番に並ぶはずです。
順番がおかしくなったときはドラッグして正しい順番に入れ替えます。
f:id:takujidev:20140125223818p:plain
全部のファイルをドラッグしたらアニメーションGIFファイルの完成です。
この例の場合はRun0.gifというファイルがアニメーションGIFファイルになっています。

3. Quick Lookで再生してアニメーション具合をじっくり確認

FinderでRun0.gifを選択し、スペースキーを押すとQuick Lookでアニメーションが再生されます。
ループして連続再生されますので、じっくりとアニメーションに不自然な部分が無いか確認できます。
Safariで開くと1回しか再生されないので、Quick Lookがおすすめです。

この方法で作ったアニメーションを貼っておきます。多分ブラウザ上ではアニメーションしてないと思いますので、Macをお使いの方はダウンロードしてQuick Lookで再生してみてください。
この筋肉モデルのアニメーションは、POSEMANIACSというサイトのスクリーンショットから作成したものです。

元のデータはもっと滑らかにアニメーションするのですが、自分のゲームにはそこまでの滑らかさは必要ないので、ゲームに必要十分かどうか実際にアニメーションさせて確かめながらコマを間引いて行きたいというのが今回の目的です。
あとは、この筋肉モデルをガイドにして自分のキャラクターを描けばゲーム内のアニメーションはバッチリなはずです。
f:id:takujidev:20140125220711g:plain

とりあえず動きを確認するだけなら今回の方法で十分ですが、全フレームをGIFに変換するのがちょっと面倒です。
また、アニメーションのスピードを調整する方法もないのでゲーム内でのアニメーション速度を決める用途には使えそうにありません。

Mac App Storeで検索してみるとGIFQuickMakerというアプリがあるようです。

GIFQuickMaker

GIFQuickMaker

  • STUDIO SHIN
  • グラフィック/デザイン
  • ¥370
このアプリではJPEGPNGなどGIFでないファイルをドラッグ&ドロップしてアニメーションGIFに変換できたり、フレームの時間を指定できたりいろいろと便利そうな機能があるようです。
有料ですが、¥100と安いので、今度試してみたいと思います。
https://itunes.apple.com/jp/app/travelshooting-jp-toraberushutingu/id917570972?mt=8&uo=4&at=10laCt
https://itunes.apple.com/jp/app/beecluster-wu-liaono-zongsukurorushutingugemu/id663801586?mt=8&uo=4&at=10laCt