FlashCCからHTML5 Canvas書き出しの際の画像ファイル形式変換の謎

こんにちは。ソーシャルゲーム1部開発課　Hチームのマスミツです。

長いタイトルですみません。初めての投稿です（ドキドキ）

FlashCCで制作したアニメーションをHTML5 Canvasに書き出した際に起こった、「png画像がjpgに勝手に変換されてしまう」世にも恐ろしい（大げさ）怪現象に遭遇したのでご紹介します。

HTML5 Canvasとは？

Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。 Flash CCから、制作したアニメーションをこの[HTML5 Canvas ドキュメント]に書き出すことが可能になりました。

これにより、ブラウザのプラグインの有無に関わらず再生できるアニメーションを簡単に作れるように！

書き出されるファイル

ドキュメント形式を「HTML5 Canvas」で新規作成、あるいは「ドキュメント形式をAS3からHTML5 Canvasに変換」にて制作し、パブリッシュを行うと下記のファイルが書き出されます。

HTML
JavaScript
imagesフォルダ（の中に使用するimg）

imagesフォルダでおこった怪現象

このパブリッシュですが特に難しい操作がなく、Flash氏がいいようにしてくれるので、書き出されたHTMLを開けばブラウザだけでちゃんとアニメーションが再生されます。何もしなくてJSもできてるし・・・ナニコレ便利!!

で、できたJSを見てみますと。画像の記述のところがこのようになっています。

// library properties:
lib.properties = {
    width: 480,
    height: 660,
    fps: 24,
    color: "#000000",
    manifest: [
        {src:"images/sample_01_01.jpg", id:"sample_01_01"},
        {src:"images/sample_01_02.jpg", id:"sample_01_02"},
        {src:"images/sample_01_ｂｃ.jpg", id:"sample_01_ｂｃ"},
        {src:"images/sample_01_title.png", id:"sample_01_title"},
        {src:"images/sample_02_balloon_01.png", id:"sample_02_balloon_01"}・・・

ここまできて・・んん？なんでjpg入ってるの？全部pngのはず・・・(((( ;ﾟдﾟ)))

とりあえずJSと同時にFlashから書き出されたimgesフォルダの画像を見てみると、こちらも一部の画像がjpgになっています。

まあそうですよね。だからちゃんと再生されるんですけど。

まったく原因がわからないので、制作したFlashのライブラリを再度見てみてると、こちらは確かにすべてpngです。

画像をシンボル化したものとそうでないもので関係あるのかとか、そもそも元画像が壊れてるのかとか、いろいろと疑ってみたのですが特にそういうわけでもなく・・・詰みました。

調査結果

そして、答えはここにありました。

参考サイト：http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html

画像も、JPGフォーマットまたはPNG32フォーマットでライブラリから書き出されます。画像に透過が含まれるか、ユーザーが圧縮タイプをlosslessに設定してある（オリジナルソースがJPGではない）場合を除き、Toolkit for CreateJSは、JPGを使用します。このToolkitは、JPG出力される各画像に対して、「properties（プロパティ）」ダイアログボックスに指定された品質設定を使用します。

簡単にまとめると、

画像は、jpgまたはpng32フォーマットでライブラリから書き出される
透過が含まれる画像・圧縮タイプをlosslessに設定している画像（※且つ元画像がpng）はpngで書き出される
それ以外はjpg

つまり、透過画像はそのままやってくれるけど、背景など透過してない画像は何も設定していないと勝手に圧縮しちゃうってこと！！？画質とかどうなんのよ！・・はい、そうです。ひどい話です。完全におこです。

回避方法

ということで、

デフォルトでは透過が含まれない画像はjpgに圧縮して出力されてしまうので、回避する場合は「圧縮タイプをlosslessに設定する必要がある」てことですね。こんな簡単なことでした

各画像のビットマッププロパティにて「圧縮タイプ：劣化なし（PNG/GIF）」を選択する

※透過が含まれる画像は自動でpng書き出しされるため必要なし

その他気づいたこと

Flash上でのライブラリは、libネームスペース内の再使用可能なクラスとしてJavaScriptファイルにパブリッシュされます（アニメーションに使用している画像はライブラリでのアイテム名を使用してJavaScript上で処理される）。

「ライブラリでのアイテム名を使用」するので、これに気づかず画像名をちゃんと決めないままで気にせずライブラリに突っ込んで使っていると、JSにその名前で書き出されてしまいました。

上に晒しましたソースを見てみると、ファイル名テキトーすぎる…ﾊｽﾞｶｼ…しかもよく見ると全角とか入っちゃってるしorz

JSに使うのでそりゃエラーにもなるってもんです。

ライブラリ内のアイテムはパブリッシュ時にそのまま書き出されてしまうので、半角英数を使用してください。全角や日本語を使用するとJS上でのエラーの原因になる場合があります。全角は悪！ダメ、ゼッタイ。

まとめ

ほかにもFlashCCからのHTML5 Canvasにおいてはいろいろとありましたが、ネット上でもなかなか情報を探せなかったこの問題が一番謎だったので記事にしてみました。最後まで読んでいただき、ありがとうございました！

FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。