Live2DでUI制作
基本、人を動かすことを目的とされているLive2D。このLive2D技術でUI作ろうっていう記事です。
では、以下より順を追って…。
１ Live2DとUIの親和性
結論から言いますと、“デザイナーとは相性が良いが、使用が限定的”と言えます。
先にデザイナーとの相性について説明します。
デザイナーに特化された方ですと、どうしてもUnityやUnrealEngineなどの各種ゲームエンジンや、プログラミングによる開発を行った方が少ないのが現状です。そのため、動かすというようになると、AfterEffectsなどの動画制作ツールで疑似的なUIを作成し、動かすということになります。
そのため動画として見る分には良いですが、動かしている感覚を得にくいです。そのような状況下がひとつの例になります。そこでLive2Dを使い、パラメータ設定を行いUIを作ってしまうという考え方ができます。
２ Live2D製UIの制作できるもの・できそうなもの
そこそこ、作れると考えられます。
HPバーのような棒状のもの、ダメージ時のHPバーの振動やエフェクトなどが挙げられます。
他には、ボタン押下やバーを使ったパラメータの調整やテキストボックスのアニメーションなどがあります。
ここの問題点としては、ボタン押下などの“当たり判定からのアニメーション処理”は作成はできるもののリアルタイムでの制御が必要なゲームに使用は不向きです。というより、Live2Dの表示処理が結構重いので大量に、同時に出すことが厳しいです。そのため“使用が限定的”となってしまいます。
３ Live2D製UIの基本作成例
以下のGIFに例を示します。
このUIでは設定用によく使われるバーにパラメータを付け、動かしています。
他にはHPバーの作成だったりが出てきます。
上記GIFのボタン押下のパラメータですが、
予め上に色の違うボックスを置いて、それを表示非表示のパラメータを設定します。
それにより上のGIFのような見た目になります。この場合ですとレイヤー階層では下から
白ボタン地、灰ボタン地、文字
となっています。
ただ、ボタンのような「当たり判定をLive2Dで表現」するのは当たり判定を付けないと、リアルタイムでの実装が難しいです。今回使用したものは動画のみの使用だったので当たり判定は付けませんでしたが、以下のマニュアルを元に実装すれば、狙った効果が得られるかもしれません。
４ Live2D製UIの応用作成例
ここでは、応用的な作成例として、「クリッピングを利用した広告バナーの作成」になります。
以下のGIFをご覧ください。
画像が荒れているかもしれませんが、ご了承ください。
このように、“バナー内をLive2D使用で豪華にできる”というものがあります。
これが、Live2Dならではの有効なUI作成と考えています。バナー広告は基本1枚絵ですし、たまにGIFの利用などがありますがイマイチ動きが単調です。
そこでLive2Dを利用して、更に豪華な広告を作ろうということです。以下に作成例を提示します。
作成としてはシンプルです。
バナーの下地になるボックスにLive2Dアバターをクリッピングするだけです。
今回作成した方法だと一個一個パーツを丁寧にクリッピングしましたが、他に良い方法があるかもしれません。何も考えずにやるのならば、黒目を白目にクリッピングするような感覚でバナー下地にアバターをクリッピングするとこの手法ができます。
その後、Animatorでモーションを作成すれば最初のような動くバナーが完成します。
５ 最後に
如何でしたでしょうか？Live2Dはモリモリとイラストを動かせるツールなので、これ一本あればUIも作れます。
一つ使用例とすれば“デザイナーがプログラマに「このように動かしてほしい」と言って、Live2DEditor(Modeler,Animator)を使用して具体的な提案をする”という方法があります。
あとは“Live2DEditorでゲーム風なコンセプトを作りたい”などに有効です。
私はゲームが好きなので、ゲームに関係した例しか出せませんが、Webデザイン、アプリケーションのUIなどのコンセプト作成に使えるかもしれません。
それでは、皆様よき創作ライフを！
