2014年10月15日

備忘録:アルファチャネル付きアニメーションgifからスプライト画像の変換

個人的備忘録です。
アニメーションgifからスプライト画像を生成する方法。

現時点での正攻法は、
ImageMagickなどの画像処理ツールを使うのが、
要望を全て叶えるための手段だと思いますが、
自分のようなゆる業務アプリ屋が酒飲みながら挑戦するには敷居が高いので、
制限があったり、できるファイルの品質は若干低いですが、
テスト用のスプライト画像として使えるものくらいは生成できる方法です。

準備:
対象となるアニメーションgifファイルを準備します。
ここでは、
http://erihamu.blog.fc2.com/blog-entry-71.html
上記サイト様から拝借しましたこの画像を使用します。
(上記サイトで配布されているテクスチャも高品質で要チェック。)
MIKU-00.gif

@animated gifからスプライト画像への変換
本格的なツールはいろいろ設定が大変なことから、
Webサービスを探したところ、英語のサイトですが、このようなサイトがありました。

Gif2sprite
http://gif2sprite.com/

ローカルのアニメーションGifをアップロードして、
JPEGのスプライト画像を生成するWebサービスです。

使い方はシンプルな反面、細かな指定はできません。(圧縮率の指定のみ)
対象ファイルも、web上の素材の直接指定はできません。
そして何より、変換先ファイルはJPEGのみです。
これは、gifの透過色情報が消えてしまうことを意味します。
また、イラスト系画像では余計なノイズが乗ってしまうことも意味しています。

できあがったスプライト画像はこちらです。
(横長すぎるのでサムネイル画像で表示しているため、ぼやぼやです。詳細はクリックしてご確認ください。)
sprite-miku-008d4fa498e7121d96137c58bc1f2e0b83.jpg

スプライト画像のほか、分割情報を格納したCSSファイルもダウンロードできます。
(自分は細かいこと分かりませんが(ちょっと調べたが太刀打ちできなかった)、
 CSSでアニメーションさせるためには、ここで生成されるCSSのほかに、
 アニメーションさせる仕組みを自前で付加させる必要がありそうです。CSSなりJavaScriptなりで。
 この辺りを参考に。
  http://clubringo.com/css%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%83%91%E3%83%A9%E3%83%91%E3%83%A9%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95/

A透過情報の再設定
先の作業で生成したスプライト画像には透過情報が消失してしまっているので、
再度透過情報を付加してあげる必要があります。

透過部分には純色の黒が設定されるようなので、
これを画像処理ツールでうまく透過します。
PhotoShop(自分使ったこと無いですが)や、
貧者のPhotoShop;GIMPのファジー選択ツールや色域選択ツールなんかを駆使します。
とはいえ、元画像で純色の黒を多用しているものだと、
透過色との区別が付かず、相当苦労すると思います。

こうして出来上がった画像がこちら。(適当に処理してます。)
(横長すぎるのでサムネイル画像で表示しているため、ぼやぼやです。詳細はクリックしてご確認ください。)
sprite-miku-alpha.png

以上です。

単にWebページでアニメーションさせるだけなら、アニメーションGIFでOKなのですが、
Flash的にアニメーションの進行を制御したりするためには、
Flashが特にモバイル環境で使用できなくなってきた昨今では、
このスプライトの使用が重要になっているそうです。

追記
上記の方法、ダメみたいです。
(アニメーションのフレームの順序がバラバラになる場合がある。)
なので、
http://www.mojimaru.com/animegif/animebunkai.php
このサイトでアニメーションgifを単体画像ファイルに分解して(zipでダウンロード可)、
http://ja.spritegen.website-performance.org/
今度はこっちのサイトでスプライト画像として結合する方法が取れます。(さっきのサイトのzipがそのまま使える)
ただし、どちらもアップロード可能なファイルサイズの制限がある(3MB?と1MB)のと、
スプライト画像結合は1px未満のマージンを設定できないので、
実運用に使用するようなファイルは手でしこしこ作るしかないかも知れません。
posted by curren at 23:17| Comment(0) | TrackBack(0) | 日記 - 一般 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/407189653

この記事へのトラックバック