ボスを操れ！
2015年11月5日 21:48 | 超科学戦隊オレ一人 | ＫａＺ | 481 views
まいど。忍者Ｋです(ｏ´・∀・)ｙ～
絵描き屋なら誰しもが、一度は持つ願望、いや欲望。
「ワイの絵を、動かしたいドン」
そして、誰しもが一度は通るであろう道。
１．セルアニメみたく枚数を書きまくって動画にするドン！
⇒１枚の絵に全力を注いだのち、こんなん量産でけへんわ！と絶望する。
２．Flashで作ればできるドン！
⇒ワイのキャラはこんな記号みたいなベクター図形ちゃうんや！と絶望する。
３．モーフィングソフトを使って中割画像を自動生成すればいいドン！
⇒これただオーバーラップさせて画像切り替えてるだけやん！と絶望する。
４．時代は３Ｄ！ポリゴン！モデル＆モーションデータで動かすドン！
⇒ワイのキャラはこんなカクカクの顔とちゃうんや！と絶望する。
あるある。しょっちゅうある。
まぁだいたい１年に１回はあるね、このサイクル。
結局、１回も完成した試しがない。
それからぼんやりと、ただの屍（しかばね）のように毎日を惰性で過ごしておりましたところ、
すごいの見つけました。
いまさら。
最近よくテレビＣＭとかでやってる萌えロリゲームみたいなやつ。
絵がうごいてますよ。
「ふん。どうせ３ＤＣＧをトゥーンレンダリングでイラストっぽくみせとんじゃろ。」
と思ってたけど、ちょっと違ったっぽい。
Live2D。
なにそれ、しらん。
Live2D。
調べてみたらびっくりよ。
Live2D。
１枚の絵が、動く動く動く動く・・・うわぁああああ！
いっておきますが、僕はLive2D社さんの回し者ではありません。
システムキューブ忍者部の者ですから、回し者ではありません。ただの曲者です。
しかし、しらなんだ・・・世の中進んでるんですね。
Live2Dのカラクリはまだよくわからないけど、きっとこんな感じ（想像）。
まず、絵をパーツ分割します（腕なら腕、目なら目、前髪は前髪）。
それら、パーツを３Ｄの板ポリ（？）にテクスチャとして貼りつけます。
パーツごとにポリをゆがませて、いろんな形状を生み出します。
Live2Dというソフトは、この一連の流れに加え、キャラの演技づけをするためのツールというわけです。
ふぅむ。
その仕組み、自作でけへんやろか？(ｏ´・∀・)＜自作したいドン！
ということで、自前でLive2D”もどき”を作ってみた結果がこれだよ。
モデルは、うちの社長（ヒロシ）です。
どうでしょう。Live2Dに比べると（かなり）見劣りしますが、ちゃんと横向きます。天才。
社長ー！
右向けー、右！
右向けー、右！
右向けー、右！
ﾁｬｷﾁｬｷ動かんかい！
ﾜｰﾊﾊﾊﾊ(ｏ´・∀・)ｙ～
このツールを、ヒロシ2Dと呼ぶことにします。
では、ヒロシ２Ｄのカラクリを説明します。
まず、ヒロシの顔が、プログラム内部でこんな感じでメッシュ状にサンプリングされていると想像してください。
次に、丸をつけた各頂点を以下の図のように移動させます。
左端のラインが奥に向かって進みつつ、右端が手前につき出てくる感じにする・・・。
このときメッシュの各交点が、別の交点の移動量に影響してひっぱられるようにする。
すると、当然、画像が格子の窓の単位でニュルリとゆがみますが、この効果を利用して右向きの顔に必要な差分を実現してます。
（お絵かきソフトの４点指定の自由変形みたいなもんだけど、右半分左半分に分割してるのが特徴かな）
動画撮影のための環境はAndroidです。実装言語はJavaです。
ビットマップをメッシュ描画できるdrawBitmapMeshというメソッドがあるので超便利。
もちろんアニメーションの原理は、すべての交点の座標を毎フレーム更新してるだけです。
それぞれの交点がバラバラにしかし互いに影響し合って移動するというのを、プログラムでシミュレーションさせる部分にけっこう頭を使ったような、使わなかったような、そんなキガス。
もちろん、このツールを使いたい人は、ただ絵を用意すればいいだけです。
【ヒロシ２Ｄの特徴】
１．ヒロシでなくても、どんな人の絵でも、右向け右ができます。
２．速度を自由にカスタムできます。
３．メッシュの細かさ（滑らかさ）も自由にカスタムできます。
４．ただし、右を向かせることしかできません。
いつも通りソースコードも公開しようと思ったけど長くなったのでまたの機会に・・・。