SVG Sprite Animation

Gresan SVG ライブラリの活用方法についてご提案差し上げます。

SVG ベースのスプライトアニメーション

左の画像は SVG ドキュメントをスプライトとして利用したアニメーションプログラムのスクリーンショットです。画像をクリックするとアニメーションの一部を GIF アニメーション化したものが御覧になれます。（実物のプログラムはより高品質です。）

このプログラムは Gresan SVG ライブラリを利用して作成したもので、SVG ドキュメントをスプライトとして利用し、これを制御しながらアニメーションを行っています。

実物のプログラムは以下よりダウンロードしてご覧になれます。

　「SVG アニメーションデモ」ダウンロード

Mac OS X/9/8 版 (730KB)

Windows 版 (810KB)

SVG スプライトアニメーションの作成方法

Gresan SVG ライブラリには、SVG ドキュメントを移動、反転、回転、拡大／縮小し、オフスクリーンに描画する機能があります。この機能を利用して、個々の SVG ドキュメントを１つのスプライトとして捕らえることにより、スプライトアニメーションを行うことができます。

上記の手法は、SVG ドキュメント全体の移動、回転などを意味します。では、SVG ドキュメント内の任意要素の属性を変えたい時はどうすれば良いのでしょうか？例えば、SVG ドキュメント内に記述されたボールの色を赤から緑に変えたい場合などが、これに当たります。Gresan SVG ライブラリでは、現在のところ SVG アニメーション機能はサポートされておりませんが、その代わりに DOM(注1)の編集機能がサポートされています。この機能を利用すれば、SVG ドキュメントに対して、あらゆる属性の動的な変更が可能です。つまり、DOM の編集機能を使用すると、SVG アニメーション機能と同等のことができてしまう、という面白い結果が得られるのです。

具体的な手順を追って見ましょう。

１．まず前準備として、SVGドキュメントの DOM 属性を変更したい要素には、id 属性を付加しておきます。これは、後に DOM 属性を変更する際、その要素を簡単に特定できるようにするためです。

２．SVG ドキュメントをロードします。（gsvg_load_file など）

３．アニメーションの各フレーム毎に以下を行います。

　・DOM 編集機能を使用して、SVG DOM に対し適切な属性変更を行います。

　・SVG ドキュメントを適切な位置、回転、スケールなどを指定して、オフ
　　スクリーンに描画します。
　　（gsvg_trans_blend_ofs, gsvg_trans_export_ofs などの API を利用）

　・合成されたオフスクリーンを画面に転送します。

４．終了の際に、SVG ドキュメントを解放します。

このように非常に簡単な手順で SVG スプライトアニメーションの作成が可能だということが、ご理解いただけると思います。

(注1) DOM（Document Object Model）
　　　　XML、HTML 文書を操作するための API（Application Programing Interface）です。
　　　　DOM では、これらの文書がタグに相当するオブジェクトのツリー構造で表現され、
　　　　これらのオブジェクトへの操作が可能になります。
　　　　SVG も XML 形式で記述されていますので、SVG DOM としての操作が可能になります。

SVG アニメーションデモとその応用

この SVG アニメーションデモでは、３つの SVG ドキュメントを使用しています。

ボール　（ball.svg）
影　　　（shadow.svg）
背景　　（back.svg)

この中でボールと影を SVG スプライトとして利用しています。上位アプリケーション側で疑似３D計算を行い、ボールと影の位置やスケールを Gresan SVG ライブラリに指事し、描画します。更にボールは、バウンドのタイミングでボール要素の fill 属性を変更し、色を変えています。

背景は JPEG ラスター画像(注2)を参照する SVG ドキュメントです。これを Gresan SVG ライブラリを利用して背景オフスクリーンにエクスポートし、フレーム毎の合成オフスクリーンのクリアに使用しています。

このデモではスプライトの回転は行っておりませんが、Gresan SVG ライブラリを利用すると SVG ドキュメントのサイズを適切に変更し、（回転した画像が SVG ドキュメントのサイズで切られることなく、）スプライトとして回転することができます。

またこのデモで行っている SVG DOM 属性の編集は fill 属性の変更のみですが、この DOM 属性の変更機能を利用すると、SVG ドキュメントのさまざまな属性の動的な加工が可能になります。実際には DOM 属性の変更だけにととまらず、要素の追加、削除を始めとして、あらゆる DOM 操作ができますので、アイデア次第で可能性は無限大です。

(注2) ラスター画像
　　　　画像データをピクセルで表現した形式です。JPEG、PNG などがこれに当たります。

Gresan スプライトアニメーションの利点

SVG スプライトを利用したアニメーションのメリットについて考えてみましょう。

アニメーションが簡単に作成できます。SVG スプライトの描画は、Gresan SVG Library に任せるので、アプリケーション側は、位置、回転、スケールの制御、および DOM 属性の制御に専念すれば良いのです。
スプライトの品質が良くなります。ラスター画像のスプライトとは異なり、SVG スプライトは拡大や回転を行っても解像度が落ちることがありません。
スプライトのファイル容量が少なくなります。SVG はベクター画像(注3)ですので、ラスター画像を使用した場合に比べ、ファイル容量はかなり少なくなります。また、圧縮 SVG 形式（.svgz）とすることで、更にコンパクトになります。
Macintosh と Windows のクロスプラットフォームなプログラム作成が可能です。Gresan SVG ライブラリは Mac OS X (9) 版と Windows 版の両方がありますので、コードベースを統一したアニメーションプログラムが開発できます。
さらに進んだ応用としては、Gresan SVG ライブラリ自体をニーズに合わせてカスタマイズすることも可能です。これは弊社にて請け負うこととなりますので、ご相談ください。

他にもアイディア次第で Gresan SVG ライブラリのさまざまな利用が可能でしょう。是非この機会に Gresan SVG ライブラリを御利用ください。

(注3) ベクター画像
　　　　データを数式で表現する形式の画像です。そのため、拡大しても図形が正確に表現され、ラスター
　　　　画像に比べて画像サイズも小さくなるという特徴があります。SVG はベクター画像形式です。