EJPスタッフブログ

ソフトウェアやボードゲームの開発を行うEJP株式会社のスタッフブログです。

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

最近、様々なゲームで2Dイラストのアニメーションを見ます。 私は、この手の技術に疎い為、今更知ったのですが、それは「Live2D」という技術でした。   [adsense] 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の力も加わると、はっきり言って単なるプログラマーである私でも超絶簡単に作業できました。   素晴らしい技術なので、私も身につけていきたいと感じました。