ポリゴンメッシュで2Dアニメーション on Papervision3D
Papervision3Dのポリゴン描画機能を使って、ペラペラアニメーションをさせる仕事があったので、そこで作ったものを紹介します。
概要
マイクロソフトの展開している「Touch! Windows Mobile キャンペーン」用のアトラクションとして、携帯端末と液晶ビジョンの連携したコンテンツ「TOUCH THE ILLUMINATION」を制作しました。Windows Mobileを搭載した携帯端末でオリジナルのキャラクターを作成して送信すると、それがビジョン側に登場し、クリスマスツリーのオーナメントの一部になるという、ロマンチックな思い出を残すコンテンツとなっています。現在六本木ヒルズの展望台「東京シティビュー」にて毎夜公開されていますので、お立ち寄りの際はぜひ遊んでみてください。ぜひカップルで。
このなかで私は「ビジョン側のキャラクターアニメーション」という極めてピンポイントな開発を託されました。
一見簡単に思える作業なのですが、通常のFlashアニメーション手法とは異なり、ポリゴンメッシュによるアニメーション手法を取ったため、まずアニメーションさせるためのエディタから作り始めるという、非常に地道な下準備が必要になりました。
今回用意したツールは案件に即して作ったものなので、他のプロジェクトに直接転用することは難しいのですが、もう少し汎用化すべく作りこんでいけば、もしかしたら一般的に有用なツールになるかもしれません。
その可能性に期待しつつ制作した内容を説明したいと思います。
手法
普通、Flashでキャラクターをアニメーションさせるとき、例えば右手を振る動作をさせるときは、右手をムービークリップでパーツ化してトゥイーンさせる、というのが一般的な方法かと思います。今回もその方法で実装してもよかったのですが、今回はコンテンツ全体をPapervision3Dで実装していたので、どうせならアニメーションもその機能を使ってやってみたい、と欲を出しました。
Papervision3Dで扱える形状には、PlaneやCubeなど何種類かあるのですが、こういったものは全て3角形ポリゴンを組み合わせることで実現しています。であれば、そのポリゴンを独自に組み合わせてキャラクターの形状にし、各ポリゴンをグニャグニャ動かせば、アニメーションさせることができるだろう、という発想です。
そうすることで、今回のキャラクターの特徴である、ネオンサインのようなラインをうまくつなげたままアニメーションさせられることができるのではないか、と考えました。また、イラストが2Dを前提に作られているので、それを2Dのペラペラのままアニメーションさせることにしました。
モデリング
まずキャラクターの形状を作成する必要があります。今回、ポリゴンでグニャグニャさせたいのは体の部分だけなのでそこの形状を作ります。
ポリゴンを組み合わせてキャラクターの形状にし(モデリング)、同時に、各ポリゴンに対してテクスチャを貼っていきます(UVマッピング)。
この2つを同時に行うツールを作成しました。
《使い方》
左下の"New Vertex"というボタンで頂点を追加します。
右上の"New Face"で、ポリゴンを追加し、v1,v2,v3の入力欄で頂点を指定していきます。
右上のexportXMLで形状データをXMLとして吐き出します。
（Remove系の機能は実装が間に合わず、XMLから直接消してました。）
《仕組み》
ポリゴンは、3つの頂点で構成されています。ポリゴン同士が2つの頂点を共有すると、ポリゴン同士が接して存在することになります(ポリゴンメッシュ)。これを組み合わせていくことで、キャラクターの形状を作っていきます。
この辺りの実際のコードに関しては、Flashで3Dを学ぶときに誰もが眺めるnote.xさんのページに分かりやすいコードが載っていますので、そちらをご参照ください。
[Papervision3D2.0] TriangleMesh3D
こうして3Dの形状ができたら、UVマッピングを行います。UVマッピングとは、ポリゴンごとに画像のシール貼り付ける作業です。ポリゴンの各頂点がテクスチャ画像上のどの位置(UV値)に対応しているか指定すると、その頂点で囲まれた画像がポリゴンに貼り付けられます。この画像はポリゴンの頂点変化に応じてグニャグニャと歪みます。ちなみに、UVというのは3D空間のXYZ座標と混乱しないよう、便宜的にテクスチャ画像のXY座標をUV座標と言ってる、とのことです。
今回のツールで特徴的なのは、キャラの頂点を指定したら、それがそのままテクスチャのUV値を指定したことになる点です。テクスチャは通常、おそらくメモリ効率の観点から、プラモデルのパーツのようにできるだけ小さいサイズに全ての要素を並べて載せる気がするのですが、それに対して、今回のテクスチャ画像は、イラストがそのまま載っているだけですので、3Dの頂点の座標とUVマップの座標がそのまま一致してます（実際には基準の座標が違うのでちょっとスライドさせる必要がありますが。）
今回しっかりとしたテクスチャを用意しなかったのは、今回やろうとしているキャラクターくらいの絵であれば、そこまで最適化する必要はないんじゃないかということと、あとは単純にその技量がなかったからです。(実際この工程は既存のモデリングツールに任せたほうが楽だったんじゃないかと思ってます。)ただ、その分、テクスチャ単体でもFlash上でビットマップとして表示できて便利でした。
あと、どうもポリゴンには裏表の概念があるようなのですが、今回は両面にテクスチャを張る前提なので、気にしませんでした。
あと、実際には、体のテクスチャはひとつではなく、6種類の中から選ぶようになっているので、どの体でも全部表示されるよう、かなり余裕をもってポリゴンを定義しています。
ここでのポリゴンの作り方が、次のアニメーション付けのときに思い通りに動かせるかどうかに影響してきます。実際、アニメーションさせてみて、うまく動かせなかったらもう一度モデリングをやり直す、ということを何度か繰り返しました。
アニメーション
モデリングが完了したので、次にアニメーションに移ります。
《使い方》
右側の"Animation Scene"でどれか適当に選ぶと画面下部にFlashのタイムライン的なものが表示されます。
再生ボタンを押すと再生されます。
キーフレームを選択すると、その部位によって、上部ステージ画面に編集ハンドルが現れるのでドラッグなどし、
また右側のTweenerトランジションオプションから適当にトゥイーンの種類を選んだりなどして、アニメをつけていきます。
（回転用のハンドルはステージの左右どちら側でドラッグしたかで回転の方向が決まるというひどい作りです）
新しくキーフレームを追加する場合は、タイムライン左側の各部位の名称をクリックし、キーフレームを追加したい場所までヘッド位置を動かしてADDボタンを押してください。
《仕組み》
先ほどのモデリングエディタで作ったキャラ形状XMLデータを読み込んだ上で、頭やハンドベルなどの要素を足しています。
毎フレーム、キーフレーム間をTweenerのTansition関数群で補間することでアニメーションを実現してます。
編集結果は、XMLとして吐き出されます。
このツールについて技術的に語ることはそれくらいなのですが、とにかく作るのが地味な上に大変でした。
ポリゴンメッシュのアニメーション方法については、本当はボーンなどという概念を用いるのかもしれません。が、今回の要件にはオーバースペックな気がしたのと、難しそうな気がしたので、そもそも調べてません。どうなんでしょう。
まとめ
今回作ったツールは、3Dを有効に活用しているわけではないのですが、Flashアニメーションではなかなか出せない雰囲気を出せているという点で、PV3Dのちょっと面白い使い方かと思います。これを更に本当に汎用的に使えるツールまで作りこみ、FlashのIDEに組み込むくらいまでもっていけば、それなりに価値のあるものになる気がします。例えば、1枚の木の葉が舞っているアニメーションなど、今までのトゥイーンだけではできなかったようなニュアンスをつけることができるでしょう。
また一方で、本当に3DのアニメーションをFlashのアニメーションを作るのと同じような感覚で作れるようにするには、城戸さんのようにFlashと3Dソフトを連携する仕組みを模索するのが、少なくとも今回のようにFlash上でエディタを作るよりは最適な方法だと感じます。いずれにしろ相当ハイレベルなチャレンジではありますが。
ソースを置いておきますので、万が一そういったことを志す方がいましたらご活用ください。
ただ、ちょっとサンプルにしては規模が大きすぎて簡単に全体を眺めるのが難しい状態になってるので、すみません。
あと、Papervision3Dは2.0の2008年9月9日版を利用していますが、Vertex3Dをcloneするところを書き換えています。