【画像で解説】Unityを使った3DダンスMV制作かんたん入門講座

どうも、コニーです

この記事では

という方向けに、3DダンスMVの入門講座をしていきます！

Unityはいろんな機能があるので、初めて触れたときにめっちゃ迷うんですよね

そこで今回は実際に3DダンスMVを作る過程を画像付きチュートリアルで解説します！！

この記事を読めば

がわかります

完成動画がこちら

丁寧に解説していくので、初心者の方も一緒に作っていきましょう！

Unityで3DダンスMVを作る全体像

いきなり作り始める前に
「今回どんなステップでやっていくか？」
の全体像を紹介します！

今回のステップは大きく分けて５つです

いろいろありますがどれも理解してしまえば単純です
画像を見ながらこなしていきましょう！

Unity初心者が特に苦戦しやすい②についてはめっちゃ丁寧に解説していきます！！

また3DダンスMV制作に必要な素材について知りたい方は、こちらの記事がおすすめです

【初心者向け】3DダンスMV制作に必要な素材まとめ！どうも、コニーです この記事では ・3DダンスMVを作ってみたい！！ ・でも何が必要なのかわからない... という方...

素材のダウンロード

まずは今回使用する素材をダウンロードしましょう！

必要な素材は２つで、どちらも無料です

①ユニティちゃん3Dモデル

まず最初にダウンロードするのは3Dモデルです

下のリンクからダウンロードしちゃいましょう！

ユニティちゃんダウンロードページ

リンク先に飛んだらライセンスの説明画面が出る場合があります
そのときは「ライセンスに同意する」という欄にチェックをするとダウンロードページに行けます！

 

ダウンロードページに行けたら下の方を見ていってください
するとこんな画像があるはずです

 

これの一番左の「ユニティちゃんSunnySideUp(URP版)というものが今回使うモデルです！

赤い「DOWNLOADボタン」をクリックしてファイルをダウンロードしましょう

「UnityChanSSU_URP-release-1.0.1」
というzipファイルがダウンロードされたら完了です！

zipファイルを開き、
「UnityChanSSU_URP」というフォルダをデスクトップなどに保存しておきましょう！

 

②Unite In The Skyの音源

次に今回使う曲の音源もダウンロードしましょう！

曲データは先ほどの3Dモデルと同じダウンロードページから入手できます

ユニティちゃんダウンロードページ

ライセンス画面が出たら先ほどと同じように
「ライセンスに同意する」にチェックして進んでください

そして今度はダウンロードページ上部にあるタブで「Sound」をクリックします

 

下の方にスクロールして次の画像を探してください！

 

こちらも赤い「DOWNLOADボタン」をクリックしてダウンロードします

Zipファイルがダウンロードされたら完了です！

環境の準備

それではいよいよ3DダンスMVの制作に入っていきましょう！！

ここではプロジェクトの作成や各機能の設定など、環境の準備をしていきます

①プロジェクトの作成

まず最初に「プロジェクトの作成」をします

プロジェクトというのは、簡単にいうと「Unityの作業データ」のことです

たくさんある作業データはUnityHubで管理されていて、その１つ１つが「プロジェクト」なんです！

何はともあれUnityHubを起動しましょう

そして左のリストから「プロジェクト」を選択し、
さらに「リストに追加」ボタンをクリックします

 

フォルダを選択する画面が出るので、
先ほどしたダウンロードした「UnityChanSSU_URP」を選択します

そして「フォルダーの選択」をクリックするとUnityのプロジェクトが作成できます！

 

 

プロジェクトがリストに追加されたものの、
そのままでは何やら黄色い三角の注意アイコンが出ているはずです

 

これは
「リストに追加されたUnityと今持っているUnityのバージョンが違うよ？」
という注意です

Unityは日々アップデートされていくので、ソフトのバージョンにずれが発生します
ですが特に気にすることはないので大丈夫です！！！！！

まず「Unityバージョン」の列に下三角があるので、
そこをクリックします

そして自分が使うUnityのバージョンを選択してください

 

 

すると次のようなポップアップ画面が出てきます

 

問題ないので「確認」を選択して次に進みましょう！

確認をしてプロジェクト名をダブルクリックしたら、
いよいよUnityが起動します

すると最初に次のようなポップアップ画面が出てくると思います

 

これは「Unityのバージョンが新しくなったことでいろいろ設定変わったよ～」というお知らせです

後でこれの対応をするので、「OK」を選択してください

するとUnityのデフォルト画面が開きます

 

とりあえずここまでで「プロジェクトを作成する」ことができました！

次はいよいよユニティちゃんに会いに行きましょう

②シーンを開く

プロジェクトが作成出来たので、次は「シーンを開きます」

シーンというのは場面のことです

同じ学園アニメでも
「学校」での場面と「川沿い」での場面では場所が違いますよね？

すると当然配置する素材も違います

それを分けているのがこの「シーン（Scene)」です

通常は自分で一からシーンを作りますが、
今回の「UnityChanSSU_URP」ではすでにほぼ完成されたサンプルがあります！！

なのでそれを使っていきましょう

まずは画面下の方にあるAssetという欄から
「UnityChanSSU」というフォルダをダブルクリックします

するとたくさんのフォルダが出てきます

この中から「Scene」というフォルダを探して開きます

 

するとお目当てのシーンがあります！！

この「UnityChanS…」をダブルクリックしてください

 

シーンが開かれ、次のような画面になったらOKです

 

ピンクになっている場合は次の章で説明するやり方で修正していきましょう

追記）ピンク色バグの修正

何やらユニティちゃんがピンクになっていますね…

この章ではそのバグを直していきます

やることは

です

実はこのバグは
Unityの機能が新しくなった影響で起こっています

Unity2020.2以降はこうなるようです

ですが簡単に直せるので安心してください！

まず画面の下のほうにある「Console」というボタンを探してください
大体先ほどシーンを開くときに使った画面の近くにあります

 

Consoleにはエラー内容が書かれてあります
※今回は詳しいことは無視してOKです！

エラー内容が書かれている箇所をダブルクリックしてください
するとVisualStudioが立ち上がります

 

ええ、今あなたが考えていることはわかります

「やべぇもん開いてもうた…」
ですよね？笑

大丈夫です、すぐに終わらせます！！

このプログラムの中から今回のエラーの原因である

InitializeStandardLitSurfaceDataUTS()

というコードを探していきます

とはいえ頭から探していくのはしんどいので、
検索のショートカットを使いましょう

 

すると右上に検索ボックスが出てくるので、
そこに

InitializeStandardLitSurfaceDataUTS()

をコピペします

 

 

するとそのコードがある位置にジャンプできます

そこまでできたら、
画面の青い位置に次のコードをコピペして追加してください

outSurfaceData = (SurfaceData)0;

 

 

わかる方は
「関数の先頭に先ほどのコードを追加する」
という認識でOKです

そして

するとUnityの画面からエラーがなくなり、
かわいいユニティちゃんが見れます

 

これでピンク色バグの修正は完了です

追記）背景が違う場合の修正

読んでいる方の中には

という状況の方もいると思います

ちょうど下の画像みたいな感じですね

 

その方はUnityを入れてから表示設定をしていない可能性があります

Skyboxという背景を表示する設定にしていないと上の画像のようになります！

設定を変更するには下の図のような「ひし形重ねたアイコン」を探して、下三角ボタンを押してください

 

そこで「Skybox」にチェックを付けたら背景が表示されます！

③Timelineの準備

次にやることは「Timelineの準備」です

Timelineというのは
アニメーションや曲の再生を簡単に編集できる機能です

これを使うことで、
動画編集みたいに3DダンスMVを作ることができます！

ちなみにこれはUnityにもともと入っているものなので、何かを買う必要はありません

まずは画面上のツールバーに注目！
（Fileとか書いてあるところです）

Window>Sequencing>Timelineを選択します

 

するとTimelineウィンドウが追加されます

 

しかしこの位置だと後々の編集で使いづらいです

なので使いやすい位置に移動させます！

Timelineウィンドウの「マーク」と「Timeline」と書いてある場所をクリックし、
そのまま「Console」などがある位置にドラッグします

 

上の画面のようになったらOKです！！

確認のためTimelineを開いてみましょう

画面左にあるヒエラルキー(Hierarchy)ウィンドウで「Timeline」という項目をクリックします

 

すると先ほど表示させたTimelineウィンドウが次の画像のようになります

 

これがTimelineの編集画面です！

画面のようになっていればちゃんとTimelineは準備できています

④Cinemachineの導入

次にやるのが「Cinemachie」の導入です

Cinemachineとは
カメラを動かして映画のようなカメラワークを実装する機能です

テレビ番組とかで大きなカメラを動かして撮影しているのを見たことがあると思います

「それをパソコン上でやっちまおうぜ！」っていうのがCinemachineです

このCinemachineはUnityの拡張機能みたいなもので、
プロジェクトを作ったばかりのときには入っていません

なのでこの章では

まず「Game」や「Scene」の横にある「PackegeManager」ウィンドウをクリックします

すると次の画像のようなリストが開きます

実はここに表示されているリストは設定によって違います

・Unityに入っているものリスト
・プロジェクトに入っているものリスト
・追加購入したものリスト
などで分かれています

Cinemachineは「Unityに入っているものリスト」にあります

なので画像のように「Package:○○」の横にある下三角ボタンから
「Unity Registry」を選択してください

 

そうして表示されたリストの中に「Cinemachine」があります

下の画像を参考にして探し、クリックします

そして右下の「install」をクリックしたらCinemachineを入れることができます

 

Cinemachineを導入できた場合、リストの「Cinemachine」の横にチェックマークが付きます

これができていたらばっちりです！！

⑤UnityRecoderの導入

最後のツールとして「UnityRecoder」の導入をします

UnityRecoderとは
Unityの画面を動画や画像で出力する機能です

これを使うと3DダンスMVがきれいに出力できます

UnityRecoderは先ほどのCinemachineと同じく拡張機能です

なのでこれもPackageManagerから入れていきます

まずは先ほどと同様にPackageManagerWindowを開きます

 

そして「UnityRecoder」を探して「install」を選択します

 

無事にインストールができたらチェックマークがつきます

その確認ができたら「UnityRecoderの導入」は完了です！！

⑤表示設定の変更

まず「Sceneウィンドウ」に切り替えます

 

特に設定をしていない人はいろんなアイコンが表示されていて見にくいですよね

簡単なもし上画面のようになっている方は表示設定を変更していきましょう！

Sceneウィンドウの上のほうにある「Gizmos」を探して、
そこの下三角ボタンをクリックします

するとズラーっと「何表示する？」という項目が出てくるので

の３つのチェックを外してください

 

 

すると表示されるものが少なくなってかなり見やすくなりました！！

⑥画面サイズの変更

最後に「画面サイズの変更」をします

Gameウィンドウにあるボタンを押すだけなので簡単です！

これをすることで動画出力のときに
「思ってたレイアウトとズレてる…!?」
となるのを防げます

やり方はまず「Gameウィンドウ」を開きます

そして左上にある「○○x○○」みたいなところをクリックし、
「Full HD(1920×1080)」を選択します

 

これだけで画面サイズの変更は完了です！！

素材の配置

環境の準備が終わったら、次は「素材の配置」です

この記事での「素材の配置」は

をやっていきます

環境の準備が終わった段階で
「画面上の方にある三角（再生ボタン）」をクリックしてみてください！

次の動画のようにユニティちゃんが踊りだします

 

しかしこの段階では音楽が入っていません

なのでここからは音楽を配置して、よりライブっぽく仕上げていきます！！

①曲を配置する

まずは音楽を配置していきます！

ダウンロードしてきた「Unite In The Sky」のフォルダを開いて

とたどり音楽ファイル「01 UNITE IN THE SKY.mp3」を探します

 

その音楽ファイルを
プロジェクトウィンドウの空いているところにドラッグアンドドロップします

 

 

そして次にこれをTimelineに追加していきます

Timelineウィンドウを開きます

そして「＋」ボタンをクリックして、
画像のように「AudioTrack」を選択してください

 

すると黄色いレーン（Trackといいます）が出現します！

次にそのトラック上で右クリックをし、
「Add From Audio Clip」を選択します

 

AudioClipというのは曲データのことです
今回だと先ほど追加したmp3ファイルがそうですね！

新しく出てきた画面で、曲データをダブルクリックします

 

するとAudioTrackに曲が追加されています！

 

これで曲の配置は完了です

再生してみると

曲が追加されています

しかし音楽と微妙にずれていますね…
次の章ではこのズレを修正していきましょう！

②曲とダンスのズレを修正する

それでは「曲とダンスのズレを修正する方法」について解説していきます

この修正は手作業で地道にやっていくものです

少しでもズレがあると動画全体に違和感が発生してしまいます
それをなくすのがこの作業の目的です

やり方としては

というシンプルな作業です

今回は曲がダンスよりもちょっと早いので、
曲のスタートを遅らせていきます

AudioTrackにある四角いブロック(クリップといいます）をクリックし、
そのままドラッグするとスタート位置を変更できます

 

動画編集ソフトと同じ感じですね！

ズレ合わせのポイントは２つです

曲にダンスを合わせるといっても
「どこに合わせるの？」
という疑問があると思います

そこで1つ目のポイントとして、
できるだけ序盤に出てくるわかりやすいダンスで合わせるのがおすすめです

今回だと曲の始まりに
「ダ・ダ・ダ」と３回強い音があります

なのでそこに合わせましょう

 

2つ目のポイントは
「確認はTimelineの再生で行う」です

編集するときは画面上の三角ではなく、Timelineのところにある三角を押してください

 

というのも画面上にある方だと毎回曲の最初から再生するので、
「ここを調整したい！！」
というときには向いていません

詳しくいうといろいろ違いはありますが、
話すと長くなって初心者の方に混乱を招いてしまいます

なのでとりあえず曲の調整はTimelineの方でやるんだなと思ってください！

 

そのように調整した後の画面がこちら！！

 

曲とダンスのズレが解消されてますね！！

これで素材の配置は完了です

カメラワークの制作

この章ではCinemachineを使ってカメラワーク制作をやっていきます！！

カメラワークは3DダンスMVで一番大事といっても過言ではありません

踊っているモデルを
いかにかわいく、かっこよく撮るかが腕の見せ所です！

Cinemachineでのカメラワーク制作のステップは２つ

カメラワークには様々な技がありますが、
今回は簡単でシンプルなものを作っていきます

①バーチャルカメラの設置

最初に行うのは「バーチャルカメラの設置」です

バーチャルカメラとは

バーチャルカメラというのは
「カメラをこんな設定にします！」っていうメモ書き
のことです

Cinemachineでは1つのカメラ（実在カメラとします）に動き回ってもらって動画を作ります

その動き回るときには
・カメラの位置や角度
・レンズの設定
などを切り替えていきます

そうした情報をメモしておく場所がバーチャルカメラなんです

詳しくはいろいろありますが、
ざっくりと説明するとこんな感じです

CinemachineBrainをつける

それではバーチャルカメラを作る第一歩として、
CinemachineBrainをつけていきます

CinemachineBrainというのはバーチャルカメラを管理するものです

これは実際のカメラにつけます

まず画面左のHierarchyから「MainCamera」をクリックします

 

その状態で画面右の「Inspector画面」を見ます

Inspectorの一番下にある「Add Component」というボタンを探してクリックします

 

すると検索ボックスが出てくるので、
「Cinemachine Brain」と検索します

表示された赤っぽいアイコンのものをダブルクリックして選択します

選択ができるとInspectorの下にCinemachine Brainが追加されているはずです！

 

これでCinemachineBrainの追加は完了です！

CinemachineTrackを作る

次に「CinemachineTrack」を作ります

Cinemachine TrackはCinemachine Brainに
「どのタイミングでどのバーチャルカメラを使うか？」
を教えるものです

作り方は曲の配置のときと同じく、Timelineウィンドウを使います

Timelineウィンドウ左にある「＋」ボタンを押して、
「Cinemachine Track」を選択します

 

すると赤いトラックができました！

次にその赤いトラックの左側にある「◎」ボタンをクリックします

そうして出てきた選択画面で「MainCamera」を選択してください

 

これでCinemachineTrackに先ほど作ったBrainを登録できました！！

後は「どのバーチャルカメラを使うか？」を指定する作業に入ります

バーチャルカメラを作る

それではバーチャルカメラを作っていきましょう！

まず「Sceneウィンドウ」を開き、好きなアングルを探しましょう！

あとで変えられるのでテキトーに決めてください（笑）

 

その状態で画面一番上のツールバーから
「Cinemachine>Create Virtual Camera」をクリックします

 

するとHierarchyに「CM vcam1」というオブジェクトと、
Sceneウィンドウに白い四角が出現しました！

 

この白い四角が実際にカメラに映る予定のアングルです

実際にどう映るかを確認してみます

まずTimelineウィンドウを開き、右上あたりにある「鍵マーク」をクリックします

こうすることで何かをクリックしてもTimelineウィンドウを開きっぱなしにできます（超大事！！）

 

鍵が閉じているマークになればOKです

先ほど追加したバーチャルカメラを選択し、そのままCinemachineTrackにドラッグします

 

Timelineの白い線がバーチャルカメラのクリップ内にあることを確認します

ない場合はクリップ真上にある「時間の数字」をクリックすれば調整できます

その状態で「Gameウィンドウ」を開くとバーチャルカメラのアングルになっています！！！

 

このようにしてバーチャルカメラを配置していきます

カメラアングルを変えたいとき

バーチャルカメラ作成の最後として、アングルの変更方法を紹介します

「あ～やっぱこのカメラもうちょい右だわ」
というときに役立ちます

変更方法は大きく2つです

①は一番基本となる操作です

バーチャルカメラは結局オブジェクトなので座標や角度を変えられます

具体的にはInspectorのTransformからいじったり、
Sceneウィンドウの矢印で移動します

 

簡単なやり方ですが、数字なのでちょっと直感性に欠けますね

なのでこれはある程度アングルが決まっていて、微調整したいときに向いているやり方です

 

2つ目のやり方はSceneウィンドウでの表示にする方法です

Sceneウィンドウで遊んでいると
「うわ、このアングルめっちゃかわいい！！！！」
という神アングルに出会います

そのアングルをそのままバーチャルカメラに反映させることができます

試しに先ほどの「CM vcam1」のアングルを変更します

 

これとは違うアングルを探してみます

 

背中で語るかっこいいポーズです…!!

この状態で

を押してください

すると選択したバーチャルカメラのアングルがSceneと同じものに切り替わります

 

かっけぇ…..

画面サイズの設定によって多少切り取られる箇所は違います

しかしガッツリとアングルを変えたいときにはこの方法がおすすめです

 

これの後にTransformで微調整が一番クオリティを上げられると思います！！

②カメラワークの制作

今度は複数のバーチャルカメラを切り替えてカメラワークを作っていきます

流れとしては

です！！

MV制作といえばこの作業が本番って感じですよね！
ここまで来るのは大変でしたが、頑張りましょう！！

複数のバーチャルカメラを作る

まずは先ほどのやり方でもう一つバーチャルカメラを作ります

わかりやすく先ほどとは逆のアングルから撮ってみます

 

もう一つのバーチャルカメラ、
「CM vcam2」ができました

Cinemachineトラックに追加

 

新しく作ったバーチャルカメラ「CM vcam2」をCinemachineトラックにドラッグし、Cinemachineトラックに追加します

その新しいクリップは画像のように「CM vcam1」とくっつけてください

 

この状態でTimelineを再生するとカメラが切り替わっています！！

 

これで基本的なカメラワークができました！

 

ちなみにTimelineのクリップは伸ばしたり縮めたりできます

 

 

伸ばしたり縮めたりすることで、切り替えるタイミングを自在に変えることができます

これを使って曲ハメしていきましょう!!!

 

準備は大変でしたが最後はあっけない感じがしますよね？(笑)

あとは気合で繰り返していくだけです！！

 

完成して後で紹介する方法で出力した動画がこちらです

固定されたカメラしか使っていませんが、ユニティちゃんがかわいく撮れてます！

今回はチュートリアルなので短く1番だけにしました

ですがTimelineのバーチャルカメラは結構な数ありますね（笑）

 

この動画を参考に
「一番かわいい角度のユニティちゃん」
を撮影しましょう！！

オススメテク：パート分け

カメラワークを作っていく際に作業効率を上げるテクニックを一つ紹介します

そのテクニックとは「パート分け」です

バーチャルカメラを曲のパートごとにわけることで、
複数のバーチャルカメラを一気に非表示にします

これをやることによって画面がめっちゃ見やすくなります

 

言葉ではわかりづらいと思うので、実際の作業画面を見てみましょう！

 

赤いバーチャルカメラのアイコンがたくさんありますね…

1つや２つならまだいいですが、30や40になってくるともはや訳がわからなくなります

これを防ぐテクニックが「パート分け」なんです！

 

実際の手順を見ていきましょう

まず画面左のHierarchyの何もない場所で右クリックをします

そして出てきた画面から「Create Empty」を選択してください

 

するとヒエラルキーに新しく「GameObject」が生成されます

 

そのGameObjectを選択した状態で右のInspectorから名前を「Part1」に変更します

 

そして右上の「…」を縦にしたマークをクリックします

すると選択する画面になるので「Reset」を選びます

するとTransformがデフォルト値になります

 

この作業は地味ですが、絶対にやってください！！

これをやらないとせっかく配置したバーチャルカメラがずれてしまいます

それができたらヒエラルキーのバーチャルカメラを範囲選択してください

 

このときに選ぶバーチャルカメラは曲の区切りが良いところまでで使われているものです

イントロはPart1、
1番のAメロはPart2など自分がわかりやすいように区切ります

そして選択したままPart1にドラッグすると配下に置くことができます

 

この状態が「パート分け」です！！

これを実際に使ってみましょう

まずは先ほどの赤いアイコンがたくさんある状態

 

この状態で「Part1」を非表示にしてみてください

非表示にする方法は
「Part1」を選択した状態でInspector左上のチェックボックスを外すだけです

 

するとSceneウィンドウに表示されていたアイコンがすべて非表示になりました！

 

こうすることで
「1番のサビのカメラワークを作っているときに、
他のパートのカメラが邪魔」
ということがなくなります

 

簡単なのに作業効率が爆伸びするので、ぜひ使ってみてください！

動画出力

いよいよ完成させた動画を出力します

動画の出力は「環境の準備」で入れた「Unity Recoder」で行います

 

まずTimelineウィンドウを開き、
毎度おなじみ「+」ボタンをクリックします

出てきた表示の中から
「UnityEditor.Recoder.Timeline > RecoderTrack」を選択します

 

選択したら新たに緑色の「Recoder Track」が追加されたのを確認してください

 

次にRecoderTrackの上で右クリックをし、
「Add Recoder Clip」を選択します

 

すると緑色の「Recoder Clip」が追加されます

 

そしてここが大事なところで

RecoderClipをTimelineの一番左まで持っていき、
曲の最後までクリップを伸ばします

 

そしてRecoderClipをクリックし、Inspectorを次のような設定にします

 

チェックすべきポイントは

です

「FileName（ファイル名）」や「Take Number」は自由に変えて大丈夫です

D:～とか書いてあるのは私のパソコンでの保存先なので、人それぞれ違います

 

設定ができたらいよいよ録画です！！

Unityの再生ボタン（画面上の三角ボタン）をクリックすると、自動で録画が始まります

 

まじで再生ボタンを押すだけで大丈夫です笑

録画中は音楽が流れないので、途中で止めないように注意してください！！

 

Timelineが最後までいったら画面が止まります
そうなれば録画完了です！！

もう一度再生ボタンをクリックして再生を止めてください

 

先ほどの設定の「Path」に書かれた場所に録画された動画があるはずなので確認してください

 

「Path」の場所がわからん！！という方は

最初にUnityHubで開いた「UnityChanSSU_URP」というフォルダの中を探してみてください

という感じであると思います

 

無事に動画を開けたら3DダンスMVの完成です！！

Unityでの3DダンスMV制作チュートリアルのまとめ

お疲れさまでした！！

まずはかなり長いチュートリアルをやり切ったご自身をほめましょう（笑）

もう一度チュートリアルの流れをおさらいします

どのMVでも大体この流れです

この記事では
・エフェクトなし
・カメラ固定
というシンプルな形にしました

もし今回「楽しい！！」と感じたら、
それは才能なのでぜひ発展させていってください

初心者でも使いやすいエフェクトをまとめた記事もあるので、そちらもぜひご覧ください

UnityのMV、ライブ演出で使える！！ おすすめエフェクトアセットまとめUnityでMVやライブ演出を作る際におすすめなエフェクトアセットを紹介します。「もっと感動するライブを作りたい！！」という方にぜひ使ってほしいものだけを掲載しています。...

本当にお疲れさまでした！
ではまた！！