完全オリジナル人型キャラクター岡田ーマンを通してSVGアニメーション作成手順を解説していきます。

アニメーション作成に利用するのは同じくオリジナルアプリケーションのBlendic SVGです。
あの3Dモデリングソフトウェアの巨頭、Blenderに大いにインスパイアされて絶賛開発中のアプリケーションです。まだベータなのかも怪しいですが最低限やりたいことはできる状態です。

デモページはこちら

本家Blenderはこちら。
https://www.blender.org/

ライセンスもBlenderリスペクトのGPL3としていますが、エクスポートした生成物は本家Blenderと同じくその製作者のものです。そしてプレイヤー部分は面倒な予感がしたので別リポジトリにてMITライセンスとして用意しました。

https://www.blender.org/about/license/

以下引用

Your Artwork

What you create with Blender is your sole property. All your artwork – images or movie files – including the .blend files and other data files Blender can write, is free for you to use as you like.

That means that Blender can be used commercially by artists, by studios to make animation films or VFX, by game artists to work on commercial games, by scientists for research, and by students in educational institutions.

Blender’s GNU GPL license guarantees you this freedom. Nobody is ever permitted to take it away, in contrast to trial or “educational” versions of commercial software that will forbid your work in commercial situations.

引用ここまで

なお今回は技術的な解説は何もありません。完全オリジナル人型キャラクター岡田ーマンを通して自分だけの完全オリジナルSVGアニメーションを作ってオリジナルウェブサイトで再生するまでの手順を紹介するための記事です。

ステップ1: 岡田ーマンを用意する

各々お好きな岡田ーマンをSVG画像にてご用意ください。
SVGであればどのソフトを使っても問題ないと思いますが、少なくともそれぞれの要素にidが振られている必要があります。
Inkscapeであればデフォルトで適当なidを振ってくれるようです。
ただ後々解説しますが、その要素がどのパーツなのかある程度見分けが付くようなidを手動で付けておくことをおすすめします。

不運なことにお手元に手ごろな岡田ーマン素材がない場合、こちらにCreative Commonsライセンスな素材を用意したのでご利用ください。先ほど10分くらいで、、、失礼。約31年と10分をかけて作り上げた作品です。

zennにSVGは貼れないということへSVG芸人を勝手に代表して遺憾の意を表明しつつ、仕方ないのでここに置いておきます。

ステップ2: インポートする

画面右側のファイルパネルからSVG画像をインポートします。
プロジェクトファイルとしての保存と読込もここから行えます。

無事に読み込まれました。岡田ーマンです。

操作Tips

キャンバス内のスクロールはBlenderと同じく中ボタンドラッグにて行います。トラックパッドでどうやるかは分かりませんごめんなさい。
拡大縮小はホイール操作にて可能です。

ステップ3: ボーンを入れる

編集モード

初期状態ではキャンバスはObjectモードになっています。
キャンパスにマウスを乗せた状態でaキーを押下してアーマチュア（ボーンのまとめ役のようなもの）を選択します。クリックでも選択可能です。

続けてEditボタンを押下してEditモードに入ります。このモードにてボーンを画像に合わせて生やしていきます。

選択

Editモードではボーンに3つの選択状態があります。膨らんでいる方のヘッド、細い方のテイル、そして全体です。それぞれクリックで単独選択、Shiftキーを押しながらクリックで複数を選択可能です。

移動

選択した状態でg、s、rキーを押すとそれぞれ移動（grab）、スケール（scale）、回転（rotate）編集が開始されます。そのままマウスを移動することで移動量が増減されます。
移動を確定する場合は左クリック、キャンセルする場合は右クリックかEscapeキーを押下します。
移動方法は3種類それぞれ違いますが、単純に座標を移動するだけなので結果が同じであればどの方法を用いても差異はありません。

それではさっそくデフォルトで作られているボーンを腰の位置に移動させてみます。

シンプルにgキーの移動にてヘッドを移動し、

同様にテイルも移動して位置を合わせます。

ボーン追加

ボーンという名前の通りに骨を接いでいきます。

まずは先ほど移動したボーンのテイルを選択し、

eキーを押下するとボーンが追加されます。Blenderでは押し出し（Extrude）と呼ばれる操作です。追加後はそのままgキー押下時と同じ移動が可能です。

曲がってしまって気になる場合は移動状態のままyキーをさらに押下すると、y軸に沿った移動が可能です。x軸ならxキーで同様のことが可能です。

続けて肩のボーンを生やします。

今回はかなり簡略化した骨格を作っているので、このままだと不自然です。こんなときは画面右側のDetailパネルからConnectのチェックを外します。

すると親のボーンから離れた場所にヘッドを置くことが可能になります。親子関係自体が切れたわけではありません。

ボーンを選択した状態でShift + dを押下すると複製（Duplicate）が可能です。そのまま移動状態になるのでxで軸を固定して動かして反対側に持っていくこともできます。
左右対称化機能も入れたいのですがまだ手が回っていません。今後にご期待ください。

対称化機能に思いを馳せつつ手動移動で調整していきます。

骨格がそれっぽくなるように残りのボーンを生やしていきます。

操作Tips

選択を含めた大体すべての操作はCtrl + zでUndo、Ctrl + Shift + zでRedoが可能です。
履歴一覧は画面右側のHistoryパネルに表示されています。確か最大62件の制限をかけています。

ステップ4: ウェイトを付ける

ボーンを入れ終えたら次はWeightモードに入ります。

Blenderではポリゴンの頂点それぞれに各ボーンが与える影響度合いをウェイトとして設定するのですが、SVGは名前の通りベクターグラフィクスなので頂点というものの存在が怪しいです。なので名前こそBlender流を拝借してウェイトペイントですが、各SVGの要素をボーンにバインドしていくだけです。

ウェイトを付けるときは画面右側のTreeパネルを表示しておくと便利です。インポートしたSVGのツリーが表示され、そこから要素を選択することもできます。

キャンバス側でも要素を選択することができます。ただし裏に隠れていたり、自身の描画要素がない<g>タグなどはツリーからでないと選択することができません。

右腕として<g>タグでまとめておいた要素を選択しました。このウェイトペイントをやりやすくするためにもある程度識別しやすいidを付けておくことをおすすめします。

要素を選択しているとサイドバーにアーマチュアとボーンの選択肢が現れます。アーマチュアはインポートしたSVG全体で1つだけ参照することができます。実はアーマチュアは複数作れるんですが、現在は作れるだけであまり活用手段がないです。
細かいことは気にせずとりあえずデフォルトのアーマチュアを選択します。

続けてバインドするボーンを選択します。今回右腕としてバインドしたいのはbone.002のようなので、それを選択します。

同様に右肘先にもボーンをバインドします。今回は手首から先のボーンはないのでShiftクリックでまとめて選択してbone.003をバインドしてしまいます。

以下変形させたい要素にボーンをバインドしていく作業の繰り返しです。
ある程度バインドしたら先に次のステップに進んで何が起きるかを確認してみるのもおすすめです。先にすべてをバインドしなければならないというわけでもありません。

操作Tips

今回は右腕として<g>タグにボーンをバインドしましたが、直接右上腕要素の<rect>にバインドすることもできます。<g>タグにバインドした場合はその配下要素すべてにも変形が反映されるという違いがあります。しかし今回は配下要素（肘先）にもそれぞれボーンをバインドしているので同じ結果となります。
もし<g>タグと上腕<rect>両方に同じボーンをバインドすると、おそらく期待した結果とはなりませんのでご注意ください。

ステップ5: キーフレームを打つ

次はPoseモードに入ります。
ステップ5とステップ6はそれぞれ繰り返して行う操作となります。

画面が見にくい場合はサイドメニューのViewに少しだけ調整メニューがあります。とりあえずボーン名は以後そこまで使わないので消してみます。

画面下側のタイムラインパネルがいよいよ活躍しだします。まずは+ボタンを押下してアクションを作りましょう。これが実際に1つのアニメーションとなるデータです。

複数作ることもできます。

アクションを作ったら、おもむろにキャンバスへマウスを乗せて全選択aからのiキー押下でキーフレームインサート（Insert）を行います。

するとタイムラインにキーフレームが追加されます。現在は0フレーム目が選択されているので、そのまま0フレーム目にキーフレームが打たれました。

なおこのキーフレームは選択中のボーンに関するものだけがタイムラインに表示されます。
非表示になっているキーフレームは選択されていても操作対象とはなりません。

ボーンを全選択した状態で、Summary部分のキーフレームをクリックすると、そこに連なるキーフレームをすべて選択することが可能です。

そのままShift + dでボーンのときと同じく複製し、マウス操作で移動することが可能です。ループアニメーションを作る場合は60フレーム目まで移動させてループの開始と終了を同じポーズとしておきましょう。

ステップ6: ポーズを付ける

ステップ5にてアニメーションの始点と終点にひとまずキーフレームを打ったので、中間の30フレーム目に移動します。
タイムライン内はキャンバス同様に中ボタンドラッグでスクロール、ホイールでフレーム間隔の拡大縮小が可能です。そして上部のフレームラベル部分をクリック or ドラッグすると選択中のフレームが変更できます。

次はキャンバスにて右腕のボーンを選択します。Poseモードではヘッド、テイルのみの選択はできず、ボーン全体でのみ選択可能です。

そしてEditモードと同様に、選択した状態で移動g、スケールs、回転rを組み合わせてボーンにポーズをとらせていきます。確定は左クリック、キャンセルは右クリックです。

バインドしたSVG要素も一緒に変更されていることが確認できます。

フィーリングのままにポーズをとらせてみたら、変形を加えたボーンを選択した状態でiキーを押下してキーフレームを追加します。
ちなみに現在は線形補完しか対応していないので、全選択してキーフレームを打っても大した違いはありません。

ステップ7: 命を吹き込む

さぁ、再生ボタンを押しましょう。

無事、岡田ーマンに命が吹き込まれました。

操作Tips

Spaceキーにて再生と停止をトグルすることが可能です。

ステップ8: エクスポートする

ファイルパネルからBakeボタンを押下してアニメーションを焼き付けたデータをエクスポートします。現在この焼き付けはかなり富豪的な焼き付けを行っているので、データ量は多めです。また元のSVG画像もそのまま含んでいるのでその分も膨らみます。

ステップ9: プレイヤーで再生する

クライアント用のプライヤーは別リポジトリにて管理しています。

さくっと試したい場合はデモページをどうぞ。
プレイヤー部分が本体なのでUIはデモ用の最低限です。

先ほどエクスポートしたjsonファイルをフォームから読み込み、いざPlayボタンを押下します。

生命の息吹を感じます。

プレイヤーもアニメーション再生のための最低限機能を搭載しただけで、かなり富豪的なレンダリングをしています。このあたりのパフォーマンスは今後の課題です。

終わり

完全オリジナルキャラクター岡田ーマンはCreative Commonsライセンスです。
生命力溢れるアニメーション作った報告お待ちしております。

Discussion