一枚の絵をアニメーションに昇華させる「Live2D」

最近、様々なゲームで2Dイラストのアニメーションを見ます。
私は、この手の技術に疎い為、今更知ったのですが、それは「Live2D」という技術でした。
 

Live2Dとは1枚の2Dイラストを専用のエディタを利用することで、アニメーションさせることができる技術のことです。
この素晴らしい技術によって、デジタルでイラストを描いている方だけでなく、アナログの絵をも素晴らしいものへと昇華させてくれます。
 

アニメーションさせるための準備

アニメーションさせるためには、いくつかの準備が必要になります。
今回は、アナログで描いたイラストをまばたきさせることを目指しました。
 
まずは、こちらから「Cubism 3」をダウンロードします。
こちらがアニメーションを表現するためのエディタになります。
 
基本的には動画によるチュートリアルも用意されていますので、難なく作業できると思います。
それでは、Cubism 3にイラストを取り込む前に準備作業を行います。
こちらのチュートリアルにしたがって、イラストをパーツに分けていきます。
 
1枚のイラストをアニメーションさせるためには、隠れている部分(まばたきならば「まぶた」)を追加で描いてあげる必要があります。
しかし、Photoshopの補修ツールを利用して、大まかな修正は簡単ですので、私はPhotshopだけで準備作業は完結しました。
Photoshopがあれば本当に簡単な作業です。
私はCreative Cloud フォトプランを利用しているので、Photoshopも利用できます。
Live2Dを利用するならば、是非ともPhotoshopは入手すべきです。
  

アニメーションさせる

準備作業でパーツを分けたら、PSD形式のファイルをCubism 3 に取り込みます。
こちらのチュートリアルを参照して、ワイヤーを貼っていきましょう。
初めての作業でしたが、直感的かつ簡単に作業することができました。
 
Cubism 3には「Modeler」モードと「Animator」モードがあり、設定などは「Modeler」で行い、アニメーション動画の作成は「Animator」で実施するようです。
 
作業は1時間ほどで瞬きさせることができました。
 
mabatakisample
▲GIF画像です。
 
これらの画像はUnityで利用することもできるようなので、ゲームアプリの開発に大いに役立ちます!
実際、様々なゲームで利用されている技術ですので、イラストレーターの方はこの技術を知っておく必要があるかもしれません。
 
 
既存のイラストをアニメーションさせるために、隠れた部分の表現が難しいのかなと思ったのですが、Photoshopの力も加わると、はっきり言って単なるプログラマーである私でも超絶簡単に作業できました。
 
素晴らしい技術なので、私も身につけていきたいと感じました。

あわせて読む

コメントを残す