Inkscapeを作ったキャラクターをブラウザでウォークアニメーションさせる方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ブラウザゲーム制作をしていて、画像を全てSVGで対応するという仕様に対して、ゲームキャラクターアニメーションは通常画像の場合は、パターン分のpngを用意するか、アニメーション単位でのGIF画像を使って行うのですが、SVGフォーマットは内部に階層も持てるし、スタイルセットも行える、これを使わない手はないと考え、1ファイルで静止画からアニメーションまで対応できる方式を確立しようと考えた。
 

条件としては、「画像ファイルを1つにして、親要素の属性値切り替えで、方向切替や、各種アニメーションを行えるようにする」という事で、サンプルを作ってみたので、それを公開しておきます。
 

もう一つの条件としては、SVG画像の作成は、InkScapeを使うのが効率的なので、後から修正ができるという事も想定しておきたい。
 

SVG画像を修正して上書き保存したら、アニメーションデータが消えてしまうというのは、トラブルに繋がりかねない。

Inkscape作業

世の中的には、ピクセル画像操作は「Photoshop」、Draw系データ操作は「Illustrator」を使うというのがセオリーなのだが、SVGデータを作成するには、Inkscapeが最も適している。
 

何故なら、Inkscapeは、データ保存の標準フォーマットがsvgで行うようになっており、svg仕様に準拠している為である。
 

こんな便利なツールがあるのに、Illustratorを使ってsvgデータを出力しているデザイナーを見ると、もう少し幅を広げたほうがいいのに・・・と考えてしまいますが、これは僕の心の中だけで考えるようにします。
 

ここでは、キャラクターデータの作り方ですが、Inkscapeの使い方をレクチャーするのは行なわず、出来上がったsvgデータを元に解説します。
 

 

test.svgというデータを作りましたが、レイヤーでパターン分の画像をインポートして区分けしています。
 

完成したsvgデータをテキストエディタで開いて、”inkscape:label”という属性を探します。
 

Inkscapeのレイヤーに付けた名前は、inkscape:label=”**”という属性で記述されるので、その横にcssで扱いやすいように、class属性を手作業で追加します。
 

Inkscapeでclass名まで設置できたら便利だったのに・・・

事前にライブラリを準備

一般的なjQueryを使って準備してもいいのですが、ライブラリ容量を増やしたくないのと、ピンポイントな機能を実現したいので、以下の22ファイルを用意しました。
 

 

 

以前に記事で書いた、svgを操作可能な状態でHTMLに読み込むためのライブラリです。
 

[Javascript-Tool] imgで読み込んだsvgファイルをcssでコントロールできる「svgControl.js」

その他のソースコード

 

 

 

解説

上記のソースコードを全てファイルに書き込んでindex.htmlをブラウザ(PC専用)で表示すると、カーソルによってキャラクターの向きが変わり、カーソルを押している間、ウォークアニメーションをします。
 

anim.jsでは、カーソルイベントをコントロールして、cssに、アニメーションパターンを作成しています。
 

今回は、jsとcssを別ファイルで設置しましたが、svgデータの中に入れ込むことも可能です。
 

この辺は、複数キャラクターを表示した際に共通化したいポイントと、特化した機能をもう少し定義してから最適値を決めていこうと考えています。
 

とりあえず、ゲーム内で、座標を動かしてあげれば、キャラクターが歩くアニメを1ファイルで実現することができました。
 

意外と誰もやっていないこの方式、今後のブラウザメインの世の中になることを考えるとゲーム以外でも使えそうですね。
このジャンル盛り上がってくれないかな?

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です