14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Unityで始めるLive2Dを使った映像制作【ノンコーディング】

Last updated at Posted at 2023-01-10

はじめに

こんにちは、株式会社 Live2Dにて Cubism SDKの開発に携わっている田中です。
今回は、Unity 2021.2から利用できる「Sequences」という機能を使った映像制作の方法について解説していきます。

前回は Unityの概要やアカウント作成から詳しく解説した Unity入門記事「知識0からのUnity入門 with Live2D Cubism SDK」を書きましたが、今回は Unityのアニメーションシステムやゲームオブジェクト等の基礎知識がある方に向けた内容となっています。

今回はコーディングの必要はありません。
デザイナーの方でもアニメーション作品を作りたい場合にオススメの手法となっています。
今回の記事内容がエンジニアの方とデザイナーの方が共同で何かを作る橋掛かりとなることを願い、執筆させていただきます。

今回は Live2Dモデルを使って説明をしますが、3Dアニメーション作品を作る場合でもほぼ手順に代わりはありませんのでぜひご一読ください。

Unity公式の Youtubeでも Sequencesの基本的な機能について解説されていますので、この記事と併用してご確認いただければより分かりやすくなると思います。
Unity2021.2で映像制作 手順を確認しよう

環境情報

今回の筆者の開発環境は以下の通りです。

Windows 10 Pro (22H2)
Unity Hub 3.3.0
Unity 2021.3.8f1

今回使うパッケージ

以下の二つのパッケージを事前にプロジェクトへインポートしておいてください。

Cinemathic Studio

これは、「Timeline」「Sequences」「FBX Exporter」「Alembic」「Cinemachine」「Recorder」の6つのパッケージが1つとなったものです。
まさに映像制作のためのパッケージと言えるでしょう。

今回この中で実際に使うのは「Timeline」「Sequences」「Cinemachine」「Recorder」の4つとなります。

各パッケージのバージョンは以下の通りです。

パッケージ名 バージョン
Timeline 1.6.4
Sequences 1.0.4
FBX Exporter 4.1.2
Alembic 2.2.2
Cinemachine 2.8.6
Recorder 3.0.3

packages.png

Cubism SDK for Unity

以下のリンクからダウンロードしプロジェクトにインポートしてください。
今回は Cubism SDK for Unity R5を利用します。
https://www.live2d.com/download/cubism-sdk/download-unity/

Sequences機能とは

まずは簡単に「Unity2021.2以前よりあったタイムライン機能を強化した・置き換えたもの」と考えてください。

Sequences機能は、まず Master Sequenceを作り、その中でいくつかの Sequenceを子要素として入れることで機能します。

Sequences機能の一番の特長は、この Sequenceごとに利用するアセットやカメラ、ライティングを管理することが出来るという点です。
Sequenceとはすなわち映像作品で言う「カット」や「場面」であり、これらの管理・制作をタイムライン機能よりも行いやすく改良した機能と言えます。

Sequences機能の使い方

Master Sequenceを作る

Master Sequenceとは、主に Sequenceの親要素として利用される Sequenceです。
もちろん Master Sequence単体でも後述の Sequenceとしての機能を利用することが出来ます。

基本的にはシーンにつき、一つ作成で問題ありません。
作成するには任意のシーンで Hierarchyウィンドウを右クリックし、「Sequences/Master Sequence」をクリックします。
mastermenu.png
すると、シーンヒエラルキー上に Master Sequenceオブジェクトが現れるので任意の名前を付けてください。
masterobject.png

ウィンドウを配置する

Master Sequenceを作り終わったら次は必要なウィンドウを配置します。
メニューバーの「Window」から「Timeline」「Sequences」「Sequence Assembly」をそれぞれ配置します。

筆者はこのように配置してみました。
windows.png

Sequenceの作成とアセットの追加

ウィンドウを配置し終わると Sequencesウィンドウに Master Sequenceが配置されていることが確認できます。
そちらを右クリックし、「Create Sequence」を選択して、Master Sequence以下に Sequenceを作成してください。
create_sequence.png
sequence1.png
Sequencesウィンドウの Master Sequenceを選択すると Timelineウィンドウに先ほどの Sequenceが配置されています。
timeline_master.png
これで Master Sequenceの初期設定は完了です。
続いて、Sequenceで使うAssetの作成を行っていきます。

Sequencesウィンドウの Asset Collectionsの「Character」を右クリックし、「Create Sequence Asset」を選択します。
create_sequence_asset.png
すると、Asset Collectionsにプレハブが生成されます。
character_asset.png
Sequences機能では原則としてここに生成したプレハブ内に Assetを配置し、Sequence Assemblyを使って Sequenceに配置します。

「Create Sequence Asset」で生成したプレハブを使わなくても大丈夫ですが、正しく動かすには手動で設定が別で必要になります。
「Create Sequence Asset」では Sequence Assetとして使うために必要な設定を勝手にやってくれるので、使わない手はありません。

さて、Sequence Assemblyを使って Sequenceに配置する前に、今作ったプレハブ(画像内の「CharacterAsset」)を開いて、その中に既存のアセットを配置します。
これを行うことで、既存のアセットを Sequence Assetの一部として呼び出すことが出来ます。

「CharacterAsset」を開いたら、ここで Live2D Cubism SDKの出番です。

事前にインポート済みの Cubism SDKで生成された以下のフォルダを開きます。

Asset/Live2D/Cubism/Samples/Models

その中から今回は「Mao」を選択してください。
mao.png
Maoフォルダを開いたら、中にあるプレハブを CharacterAssetゲームオブジェクトの直下に入れてください。
mao_prefab.png
階層はこのようになります。chara_asset_mao.png
完了したら、先ほど作成した Sequenceを開いてください。
すると、Seaquence Assemblyウィンドウの Nameが作成された Sequenceのものになり、次の画像のような表示になります。
seaquence_assembly.png
基本的にはこちらで Sequence Assetを管理します。
Seaquence Assemblyウィンドウの Characterのプラスボタンを押して、先ほど作成したCharacterAssetを選択してください。
set_character_asset.png
すると、CharacterAssetが追加され、Timelineにもトラックとして表示されるようになります。
add_character_asset.png
timeline_character_asset.png
この状態で Hierarchyウィンドウを見ると Seaquence Assemblyウィンドウで登録した CharacterAssetとその中身(今回は Maoモデル)がシーンに登録されています。
scene_mao_haiti.png
ここで一度シーンを再生する必要があります。
これは Cubism SDK for Unityの都合なのですが、Unityでモデルを描画するときに一度Unity側の描画更新が入る必要があります。
その更新を入れるために、再生を行うのが一番簡単で早いです。

一度再生すると再生を停止した後でもシーン上でモデルが描画されます。
mao_draw.png

SequenceでLive2Dモデルをアニメーションさせる

次に Sequenceを利用してアニメーションを再生させます。

まずは Seaquenceに先ほど置いた Character(大元の方です。CharacterAssetではないので注意してください)に「+」マークがあります。
そちらの「Animation Track」を選択してください。
animation_track.png
すると、次のようなトラックが追加されます。
animation_controller.png
このトラックの Animatorをアタッチする場所で「Scene」タブから Maoモデルを選択してください。
select_mao.png
mao_animator.png
これでこの Animation Trackは Maoモデル専用にアニメーションを割り当てることが出来ます。
準備が出来ましたら、この節の最初で紹介したアニメーションクリップを Animation Trackに組み込みます。
今回は、Maoモデルに付属している「special_01」モーションを利用します。
今回行う手順では特に気にする必要はありませんが、場所は以下のフォルダ内です。

Asset/Live2D/Cubism/Samples/Models/Mao/motions

まずは Animation Trackの Timeline上で右クリックしてください。
すると、次のようなコンテキストメニューが出てきますので「Add From Animation Clip」を選択します。
add_from_animationclip.png
今回使用する「special_01」アニメーションクリップは出てきたウィンドウの下の方にあります。
animclip.png
上手く読み込めるとタイムラインは次のような表示になります。
このままだとモデルの表示やアニメーションが途中で途切れてしまうので、長さを調整します。
charactor_timeline.png
まずは Character Assetの長さを調整してください。
charactor_asset_length.png
その状態で Master Sequenceを選択します。
すると、以下のような表示になっているはずです。
master_sequence_length.png
シーケンスバー(白い線の箇所)まで Sequenceを伸ばし、以下のような状態にします。
master_sequence_length_fix.png
あらためて Sequenceを開くと、Timeline上部の水色の線が CharacterAssetと同じ長さまで伸びています。
これはすなわち CharacterAsssetの表示時間と同じだけの長さ、Sequenceが表示されることになります。
charactor_asset_length_fix.png
最後にカメラを調整します。
インスペクタ上から直接設定してもいいのですが、せっかくなので Sequence(Timeline)の機能を使います。

まずやることは CharacterAssetとほぼ同じです。
Asset Collectionから Photographyを見つけ、「Create Sequence Asset」を行います。
create_sequence_asset02.png
出来上がった PhotographyAssetを開き、右クリックのコンテキストメニューから Cinemachine/Virtual Cameraを選択して追加します。
select_virtualcam.png
追加した後シーンに戻ると、Main Cameraに自動的に CinemachineBrainコンポーネントが付いています。
maincam.png
ちょうどいいので、ここでMain Cameraの設定をひとつだけ行います。
MainCameraの Cameraコンポーネントにある Projectionを「Orthographic」に設定してください。
画面の映る範囲を設定する「size」に関してはまた別のところで設定しますので、今は触れなくても問題ありません。
projection.png
Seaquence Assemblyウィンドウの Photographyの「+」を押して作成した PhotographyAssetを Sequenceに追加します。
add_photo.png
photo_timeline.png
次に操作するために Cinemachine Trackを追加します。
Photography(PhotographyAssetではない)に「+」マークがありますので、そこをクリックしてください。
cinemachine_track.png
Cinemachine Trackには Cinemachine Brainを登録する必要があります。
cinemachinebrain.png
これは先ほど Main Cameraに自動的に設定されたコンポーネントと同じものなので、今回は Main Cameraをここに適用します。
set_cinemachinebrain.png
Cinemachine Brainを設定し終えたら、次に Cinemachine Trackの Timeline上で右クリックしてください。
その後、出てきたコンテキストメニュー内の「Add From Cinemachine Virtual Camera Base」を選択します。
add_vcbase.png
先ほど作成した Virtual Cameraである CM vcam1の長さを Timeline上で揃えます。
cmcam1_length.png
完了したら、CM vcam1を選択して Gameウィンドウのプレビューを見ながら「Lens Ortho Size」を任意の値に設定してください。
これはモデルが見やすい位置に来るように設定するだけです。
筆者は0.7に設定しました。必要に応じて「Transform」も設定してください。
lens_size.png
この状態で再生すると、Maoモデルがアニメーションを行う様子が見れると思います。
再生せずタイムラインでシーケンスバーを動かしても、アニメーションを行うモデルの様子が確認出来ます。
mao_anim.png
基本的な Sequenceシステムの使い方はこれで完了です。
しかし、Sequenceシステムはアニメなどで言う「カット」のような仕組みなので、本来は次のように使います。

複数の Sequenceを扱う

まずは Master Sequenceを選択します。
Timelineが次のような状態になってるかと思います。
ready_master_sequence.png
その後、Sequencesウィンドウの Master Sequenceを右クリックし、「Create Sequence」を押して、2つ目の Sequenceを作成します。
create02sequence.png
sequence02.png
すると、Master Sequenceを選択したときの Timelineウィンドウが次のようになっています。
sequence02_master.png
Sequence01から Sequence02に行く場合、Sequence01で利用していたオブジェクトは非表示になります。

原則として Sequenceに登録したオブジェクトを他の Sequenceで使いまわすことは出来ません。
例えば、Maoモデルを Sequence02に置いた場合は新たなオブジェクトとして登録することになります。

今回は再生時に Sequenceが切り替わったことが分かりやすいように Sequence02には Maoモデルとは別のLive2Dモデル「Rice」を設置し、アニメーションを再生してみます。

Sequence02で作業するということ以外は「SequenceでLive2Dモデルをアニメーションさせる」と同じような内容ですので省略します。
作業後の Sequence02の Timelineは次のようになります。
sequence02_timeline_fin.png
実際の画面はこんな感じです。
sequence02_anim.png
実際に再生したときの動作と Master Sequenceの Timelineは次の画像のようになります。
play_sequence_lite.gif

TIPS: カメラを切り替えることなく移動させる

瞬間的なカメラの切り替えは Sequence自体の切り替えなどを使うことで簡単に行わせることが出来ますが、1つの Sequence内でカメラの移動を行いたい場合の方法も行ってみます。
今回は先ほど利用した Sequence01を流用します。Sequence02はMaster Sequenceから削除して問題ありません。

まずは1つの Sequenceに2つの Cinemachine VirtualCameraを用意します。
PhotographyAssetの中に2つのカメラを用意すると楽です。
cvcam02.png
そして、Sequence01の中に 今作った Virtual Cameraを追加して、長さを調整します。
sequence_length_fix.png
この状態では瞬間的にカメラが切り替わる状態になります。
Assetを変えずに Sequenceを複数利用した時のような演出をしたい場合にこの手法は有効です。

カメラを切り替えるような見せ方ではなく移動させたい場合は次のような手法で行います。
まず、移動開始のカメラ位置を「CM vcam1」に設定します。
今回はカメラを左寄りにしてみます。
left_cam.png
left_mao.png
次に、移動終了時のカメラ位置を「CM vcam1_2」に設定します。
今回はカメラを右寄りにしてみます。
right_cam.png
right_mao.png
これでカメラの位置設定は完了です。

続いて、ブレンドの設定を行います。
CM vcam1と CM vcam1_2の間を重ねるようにすることで簡単にブレンドを行うことが出来ます。
CM vcam1か CM vcam1_2をもう一方に重なる位置に移動させるか、下のGIFのように端を引っ張り、重ねることでも可能です。
image3.gif
この時の実際の画面は次のようになります。
image16.gif
ブレンドの時間と開始位置・終了位置を変えずにカメラワークの挙動を変更したい場合、Virtual CameraのBlend Curvesを動かすことで実現することが出来ます。
デフォルトでは Autoになっているので、Manualにしてから調整を行います。
image10.png
Manualにするとグラフ部分がクリックできるようになります。
クリックすると Curve Editorが開かれるので、自分の理想の動きになるように編集することが出来ます。
image2.png

あとがき

ここまで読んでいただきありがとうございました。
今回は筆者が個人的に気になっていた機能を弊社の Live2Dと絡めて、映像制作の手法としてご紹介しました。

この解説が Unityでの映像制作やゲーム制作の助けになれば幸いです。
Unityの映像表現機能と組み合わせてぜひ挑戦してみてください。

お疲れ様でした、良き Unity ライフを!

関連リンク

知識0からのUnity入門 with Live2D Cubism SDK
https://qiita.com/live2d_dev/items/cd3309b5a807078964f4

Unity2021.2で映像制作 手順を確認しよう
https://youtu.be/74VblliIzfQ

株式会社 Live2D
https://www.live2d.jp/

Live2D 開発公式Twitter
https://twitter.com/live2d_dev

Cubism SDK for Unity
https://www.live2d.com/download/cubism-sdk/download-unity/

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?