Live2DとCubism AEプラグインを使用して、モーショングラフィックスのような表現を作る！
こんにちは。Live2D公式デザイナーチーム、Live2D Creative Studioです。
今回のnoteでは、Live2DとCubism AEプラグインを使用したモーショングラフィックスの表現について、こちらの作品を通してご紹介します。
この作品は「Live2D Creative Awards 2020」のメインビジュアルをLive2DとCubism AEプラグインを使用してアニメーション化したものです。
Live2Dといえば、キャラクターを生き生きと動かせる技術というイメージがありますが…
今回はあえてLive2Dでモーショングラフィックスを作ることに挑戦した、制作担当チームの奮闘記と一緒にメイキングを紹介していきます！
Cubism AEプラグインって何？と思われた方へ
Cubism AEプラグインとは、Adobe After Effects上で直接Cubismのモデルを表示したりモーションを扱うことができるようになるプラグインです。
Cubismで作ったモデルやモーションファイルを読み込んで、AE上でアニメーションを作ることができます。
ダウンロードや操作方法、プラグインの説明については公式マニュアルに案内がありますので、興味のある方は是非ご覧ください！
Live2D Creative Awards 2020バナーアニメーションについて
先ほども触れましたが、この作品は「Live2D Creative Awards 2020」のメインビジュアルをLive2DとCubism AEプラグインを使用してスタジオのスタッフがアニメーション化したものです。
「Live2D Creative Awards」とは、Live2Dを使ったオリジナル作品のクオリティを競い合う年に一度のコンテストです。
現在開催中のこちらのコンテストですが、法人での参加を除き誰でも参加することができ、入賞した方には賞金も出ます！
参加して賞を狙うもよし、多くのLive2D作品を見て楽しむのもよしと、Live2D好きにはたまらないイベントとなっていますので是非チェックしてみてくださいね！
【🏆Live2D Creative Awards 2020 開催🏆】
— Live2D (@Live2D) August 28, 2020
最優秀賞は賞金55万円！Live2Dの大規模コンテスト「Live2D Creative Awards 2020」の作品募集を開始！
今年はみなさんがより参加しやすいように賞金の増額や作品投稿ができる場所を追加しています！https://t.co/qKKrAEavLI#Live2D #Live2D_2020 pic.twitter.com/G999xEWi24
さて、毎年開催されているAwardsですが、今年のメインビジュアルはこのようなデザインになっています。
デザインはLive2DマーケティンググループのMさんが作ったもので、「近代的、革新的、国際的」というイメージでデザインされています。
「海外クリエイター含め、Live2Dの実力に関係なく例年より多くの人たちに参加してほしい」という強い思いが込められており、どんな国でも受け入れられやすそうなシンプルでインパクトのあるデザインを目指したとのこと。
そんなデザインにする上で、色数を少なくし統一感を出しつつ「明るく楽しいポップな感じ」を与えられるよう配色をこだわったそうです。
加えて「創作意欲を掻き立てるデザイン」が裏テーマとして存在しています。
今回の”モーショングラフィックス風のLive2D”のように、皆さんにも自分だけのLive2Dの表現を生み出していってもらいたい…
そんな思いのこもったメインビジュアルをスタジオの制作担当チームがLive2D化したアニメーションがこちらです。
（冒頭で紹介したものとは別バージョンです！）
改めて見ても、普段のLive2D作品で見かけない多彩なアニメーション表現が含まれていて面白いですね！
それでは早速メイキングを紹介していきます！
モデルの中身公開！Live2Dを使用したモーショングラフィックス
まずはモデルについてです。
メインビジュアルを元に「四角形」や「三角形」、「月」など各図形ごとのモデルが作られており、それらのモデルを組み合わせて最終的にアニメーションが作られています。
こちらは一部のモデルの動きをまとめたものです。見ているだけでリズムに乗りたくなる可愛い動きですね！
それぞれのモデルには、以下のgifのような色変えや一連の動きが付けられています。
今回使用した曲は４拍子だったため、パラメータの数値は「0~40」や「1~2」などに設定し、AE上で簡単にリズムよく動かせるように工夫したそうです。
今回の記事では、いくつかあるモデルの中でも最もこだわりが隠されているロゴのモデルについて細かく紹介します！
まずは文字の周りに配置されている四角形について、どんなパラメータが作られているか見ていきましょう。
回転・拡大など音楽に合わせて豊かな表現ができるよう、様々な動き付けがされています。
中でも四角形から円形に変わる動きは、綺麗に変形するよう工夫（苦労）されたそうです。
格闘の跡が見える頂点量ですね…
gifを見て分かるように、構造としては１つの角の変形を作成した後、その素材をコピーして組み合わせることで作られています。
下書きに合わせて円形に変形させ、カクつきが出たらその都度頂点を増やしながら制作したそうなのですが、実はそのメッシュ割りにも工夫がされています。
以下の画像は角の元素材なのですが、割り方に注目してみてください。
テクスチャを全部囲い切らないメッシュ割になっています。
本来こういった割り方をすると、断面にギザギザとしたジャギーが発生してしまうのですが…
今回は幾何学的な素材を綺麗に変形させたり、拡大した時に解像度が原因で汚い見た目にならないようあえてこのようにメッシュが割られています。
Live2Dのモデリング画面上ではジャギーが発生してしまいますが、こちらはAEでの作業時にモデルにスムージングをかけることで防いだそうです。
次に文字の動きについてです。こちらもまずはどんな動きがつけられているかパラメータをお見せします。
一見単純な動きに見えますが…こちらはモデリングの仕方に秘密があります。例えば「文字が圧縮する動き」と「散らばるような動き」ですが、
こちらは以下のgifのように「C」や「r」など文字ごとに回転デフォーマを用意し、それらの親として設定したワープデフォーマを変形させることで、動きが付けられています。
一つ一つ回転デフォーマに動きを付けるよりもデフォーマの管理がしやすく、ワープデフォーマだけで直感的に動きを作ることができるので参考にしてみてください！
以上でモデルについての紹介は終わりです。次はAEプラグインを使った動き付けについてご紹介していきます。
AEプラグインの使いどころをご紹介いたします！
では、上記で用意したモデルを使用し、AEでどのような作業がされているのか見ていきます。
AEと聞くとちょっと難しそう…と思われた方、ご安心ください！
今回の制作担当はほとんどAEを触ったことがなく、AEプラグインも初めて触ったそうです。
初めてでもあまり悩まず使用できたそうなので、是非この記事をきっかけに試してみてくださいね！
AEでは主に、先ほど紹介したモデルのスムージングや、カメラワーク、音楽に合わせた各モデルの動き付けがされています。
中でも音楽に合わせた動き付けは、制作担当によると最も大変な制作工程で、夜寝ている間も頭の中に音楽が流れるほど作業したそうです…。
そんな動き付けですが、ロゴ以外のモデルはAE上で動きを付けたとのこと。
例えば、三角形がウェーブのように動くこのシーンですが…
こちらは、三角形のモデルを使用して１つ動きを作った後、それを複製して組み合わせることで作られています。
一見複雑そうな動きですが、単純な三角形のモデルを組み合わせることでこのアニメーションができているんですね...！
三角形のモデルは汎用性の高いモデルにしたそうで、このシーン以外にも繰り返し使われています。
また、先ほど少し触れたようにロゴのモデルだけはCubismでモーションを作成し、AEプラグイン用にデータを書き出しして動き付けがされています。
こちらを書き出ししたモーションファイルをCubism AEプラグインを使用して読み込み、音楽に合わせて速度やモーションの調整をしたり、カメラワークをつけたそうです。
全体の流れを見ながら調整したり、グラフを使ってタイミングを調整したりするのにAEプラグインはとても有用だったとの事なので、モデルを使用した映像作品を作る際は是非使ってみてください！
いかがでしたか？
少し根気のいる作業もありますが、是非皆さんもAEプラグインを使ったアニメーションや、Live2Dでのモーショングラフィックスに挑戦してみてくださいね！
また、今回紹介した作品についても記事を読んだ後に見ると、読む前とはまた違った見え方になると思います。どんなモデルで作られているか是非想像しながら何度もご覧ください！
Live2D Creative Studioではスタッフの熱意がこもった作品を随時制作・公開しています。
他の作品も見たい方はぜひスタジオ公式Twitterのフォローをよろしくお願いいたします！
YouTubeチャンネルでもLive2Dで制作した映像作品を投稿していますので、
こちらもよかったらチャンネル登録してくださいね！