こんにちは、harayokiです。
この記事はDragonBonesの裏技的な使い方、の第二弾です。
意外な使い道#2 美しいテクスチャ画像を扱う
DragonBonesが書き出すキャラクターアニメーションデータは、テクスチャアトラス(png + json形式)とアニメーションデータ(json形式)という（アニメーションツールでよくある）フォーマット以外に、独自のdbswf形式で書き出す事ができます。ある事情により拡張子が異なるが中身はswfそのものです。loadMovieして再生する類のものでなく、ランタイムが読み込んで使う、パーツ画像とアニメーションデータ詰まったデータとしてのswfなのですが、これがかなりの優れものです。
このdbswf形式を的確に用いた場合、ファイルサイズが小さく、美しいアトラス画像のキャラクターアニメーションを再生させる事ができます。(メカニズムは後述します。）そしてキャラクターアニメーションデータ内で使われているテクスチャは、プログラムからパーツ別に参照することができますので、キャラクターアニメーションを用いないコンテンツでも、利用したい画像を適当に配置しただけのdbswfを書き出すなどして、美しい画像データを得るためだけの目的にDragonBonesを利用する事ができます。
ちょっと意味が通じないかな。簡単にまとめると、DragonBonesを利用すると綺麗なテクスチャ画像が得られる、ということです。
dbswf形式の長所
下記にテクスチャアトラス形式と比較した場合の、dbswf形式の長所を解説します。
・アニメーションデータサイズが小さい
アニメーションデータはJSONテキストでなくdbswf内にバイナリのまま保持されているので、非常にサイズが小さくなります。swf形式ですのでさらに全体にZLIB圧縮もかかっているかと思われます。
・画像ファイルサイズが小さい
アニメーションに画像ではなくパス素材を使っていた場合、dbswf内にはパスのままデータが保持されていますので、場合によってはファイルサイズが激しく小さくなります。(制御点が多い複雑パス画像の場合は逆にファイサイズが大きくなります。そのような場合はFlashPROの機能でパスをビットマップ変換してしまえば良いでしょう。)
・テクスチャ画像が劣化しない
同じくパス素材を使った場合ですが、DragonBonesランタイムはデータの初読み込み時にパス画像をテススチャアトラス形式に変更しますので、事前にテクスチャトラス画像(pngやその他形式)を減色してファイルサイズダウンするときにおこしてしまう画質の劣化が起こりません。減色にさまざまなツールを用いて、画質とファイルサイズのバランスを取る戦いは日々開発現場で行われているかと思いますが、dbswfを使う場合、その戦いから解放されるわけです。特にグラデーションを多用したデザインを扱う場合に効果的で、顕著に美しさが感じられると思います。
・ピクセルパーフェクト可能
スケーリング指定したテススチャアトラス変換も可能なので、端末の解像度に合わせてピクセルパーフェクトな画面を作ることも可能です。
・透明度付きjpgが使える
dbswf内ではswfの画像書き出し設定がそのまま適用されて画像が書き出されています。ロスレスにするか jpgにするか、というあれです。ここでswfフォーマットではビットマップ素材のjpg書き出しでもアルファ情報を保持できることを思い出してください。透明度をもった大きな画像パーツを扱わなくてはいけない場合、透明度付きjpgはかなり効率良く画像ファイルサイズを圧縮します。通常は泣く泣くpngにせざるを得なかったりしていないでしょうか。
これらの長所を生かしてdbswfデータを作成すれば、比較的ファイルザイズを気にしないで開発を進められるので、美しいテクスチャ画像を持ったアニメーション再生をさせることができます。
dbswf形式を扱う際の注意点
以下は dbswf形式を扱う際の注意点です。
-
動的なテクスチャアトラス変換処理は同期で最初の１回だけおこなわれ、データ構造によってはそこそこ重たい処理となります。ゲームではシーンの初めにまとめてデータを読み込んで初期化しておくのが良いでしょう。途中でdbswfを読み込んで初期化すると、ロード時にガクガクっとフレームレートが落ちるあれが出てしまいます。Webコンテンツだとあまり気にされてませんでしたが、最近のアプリでこれがあると目立ちますね。
ActionScript Workerを利用するなどしてデータの初期化時にも滑らかな演出を見せておくなどの対応も良いかもしれません。(自分はWorker機能はちゃんと活用したことがないのでうまくいくかわかりませんが。）
-
あまり大きいアトラス画像に動的変換すると、メモリが足りなかったり、GPU側が対応している画像サイズを超えてしまう場合があります。アトラス画像拡大率の上限は決めておき、上限を超えた場合、それを画面サイズにあわせて拡大表示する方法をとれば良いでしょう。
-
パフォーマンスを優先する場合などはdbswfでなくアトラス画像形式でデータを書き出したほうが良い場合もあります。
-
素材に細かいpng画像が多い場合などでは、画像にロスレス書き出し設定がされてると、そこまでdbswfのサイズは小さくならないと思わます。その場合も最初からアトラス画像形式で書き出し、外部画像ツールで減色対応をしたほうが良いでしょう。
その他
-
テクスチャの直接参照の仕方はここのチュートリアルに例があります。最後の方のドラゴンがTシャツを着替えているコードがそれです。
https://dragonbones.github.io/DBGettingStarted_V2.0_ja.html
-
アトラス変換処理中はStage.qualityの値をHIGHかBEST設定にしてください。LOWにしておくと、生成されるテクスチャアトラス画像を回転した際にジャギジャギに見えてしまう事があります。変換処理完了後は適切な値に戻して大丈夫です。スマホではアンチエイリアス処理をいれても目立たないので、Stage.quality はMEDIUMにする事が一般的かと思います。
終わりに
上記テクニックは適用しずらい場面もあるかと思いますが、うまくはまるとかなり効果的です。機会があればぜひ一度お試しください。
今回は以上です。次回も(カレンダーの空きと自分の時間があれば）DragonBones絡みでUIを作る方法のポストをします。ではまた。