# Unityでスペアナ動画作った / 3D Visualizer Spectrum Vu Meterを使った作り方

以下の動画を、今をときめく**Unity**で作った記録。

{%youtube ebdi2YfNpZo %}

だいたい小一時間くらいで出来ましたが、Unityの事前知識があったからと思う。
とはいえ今回コードは一切書いておらず、GUI操作だけでぽちぽちと作れたので、素晴らしいアセットがあるこの世に感謝して生き続けたい……。

折角なので、どんな感じに作ったのかメモしてみる。
なお、細かく書くのは手間なので、雰囲気を伝えるレベルの内容です。特にUnityのインストールまわり。各々のの手順で詳しく知りたかったらぐぐってくださいね。

## おしながき

* 下準備
* Unity関係のインストール
* Assetの購入
* プロジェクト
* プロジェクトの作成～Assetの導入
* Assetのサンプル再生
* 音源差し替え
* 文字情報差し替え
* ジャケ画像乗せ
* 録画
* Asset準備
* 録画
* その他

## 用意するモノ

Unity関係

* Unity Hub
* Unity 2019.4 LTS
* スペアナのAsset
* 今回は**有償のAsset**を買ってます。自作とかできないッス
* 日本語用フォント（必要に応じて。後述）

音源関係

* 完成音源（wav or mp3）
* タイトル情報とか
* ジャケ画像（必要に応じて）

# 手順／下準備

:::info
※以下、操作はWindowsの操作方法で書いてますが、Macでも大体同じです。稀にメニューの位置が違ったりしますが。
:::

## Unity Hubインストール（無料）

公式サイトから**Unity Hub**をDLしよう。
https://unity3d.com/get-unity

* お値段が表示されるのでビビるけど、**Indivisual**タブの**Personal**からGet startedボタンを押そう。
* 次のページで**First-time users**からAgreeするとダウンロードが開始される。

ここでインストールされるのはいわゆるランチャー的なやつで、Unity本体（正式にはUnity Editor）ではない。それはこのあと入れます。
まずはHubを入れよう。

> インストール手順はこちらも参考に。
> ただちょっと古い。
> https://create.unity3d.com/jp-howto-install-win

## Unityアカウント作成（無料）

Unity Hubを起動すると、たぶんログイン画面が出ると思う。
出なかったら右上のユーザーアイコンからサインインへ。
アカウントを持っている場合はそのアカウントを使ってログイン。

アカウントがなければ新規作成しておこう。
Assetを利用する際には何かと利用するので、アカウントは作っておいて損はない。
作ったらログインしてね。

## Unity Editorインストール（無料）

左メニューのインストールから、右上の**インストール**ボタンを押そう。
（Editorが何もない状態だと、強制的にインストールしろって言われるかも）

その中から推奨リリースの**Unity 2019.4.xx**というのを選んで、インストールしよう。
**LTS**というのは長期サポート版（Long-Term Support）という意味なので安心して長く使えるのでオススメ。

インストールする機能の選択画面が出ると思うが、特にいじらなくてOK。
（もし後日ゲームを作りたくなったらまた追加で入れれば良い）
そのままインストールをする。

そこそこ時間がかかる。
……ので、今のうちに使うAssetを買っておこう。

## スペアナのAsset購入（有償）

Unityにスペアナが搭載されていたりはしない。自分で用意するしかない。
とはいえ自作なんて出来ないので、ありがたいAssetを買って使います。

> **Asset**というのは要するに**プラグイン**です。
> Unityは主にゲーム制作用のソフトなので、骸骨の3DモデルとかSFなマップとかアイコン集とかBGM集とか、なんでもあります。お値段も無料のものから有料のものまで様々。今回のスペアナもその1つだと思ってもらえれば。
> 結構な頻度でセールもやってますので、値段も結構ブレます。

今回使うスペアナのAssetはこちら：
[3D Visualizer Spectrum Vu Meter \| オーディオ \| Unity Asset Store](https://assetstore.unity.com/packages/tools/audio/3d-visualizer-spectrum-vu-meter-100995?locale=ja-JP)


執筆時点のお値段は**25ドル**。
カートに突っ込んで、クレカまたはPayPalでお買い上げください。
※ステマっぽいですがこのAsset作者さんと知りたいとかそういうことはありませんので、一応ｗ

ここでは購入履歴を付けるだけで、ダウンロードなどはしなくてOK。
あとでUnity Editor内から落とします。

ここまでが下準備です。

# 手順／プロジェクト

## 新規プロジェクト作成

Unity Hubの左メニューから**プロジェクト**を選び、右の**新規作成**をクリック。

* プロジェクト名と保存場所は適当に入れる。保存場所のフォルダはあらかじめ作成しておく必要がある。
* テンプレートは**3D**を使用（ぶっちゃけ何でもいい）
* **作成**を押す。


起動にはそこそこ時間がかかるのでお待ちください。
プロジェクトの作成が終わるとエディタが開きます。


さあ始めて行きましょう。

## 購入したAssetをプロジェクトへインストール

上メニューの**Windows** → **Package Manager**を開きます。
上の**Unity Registry**ってなってるところから**My Assets**を選んでリストを変えます。
もしここでログインしろって言われたらUnityにログインしてください。


さきほど買ったAssetがリストに出てくるので、それを選びます。


そして右下の**Download**を押します。

これで、このAssetが**PC内に**ダウンロードされます。
＝まだプロジェクトにはない状態。

そのあと、**Import**ボタンを押します。
Importするものを選ぶウィンドウが開きますので、全部チェックされてるのを確認して、右下のImportボタンを押します。


これでようやく、プロジェクトにこのAssetがインストールされます。
なお、Importが終わると、Projectウィンドウが以下のようになります。

Before：


After：
`_Bad_Raccoon_` というフォルダが`Asset`フォルダの下に追加されているはず。


これで成功です。

## 取り敢えずAssetのサンプルシーンを読み込んでみる

Projectウィンドウは要するにエクスプローラーです。

フォルダを潜っていって、`Assets/_Bad_Raccoon_/_3D Music Visualizer Vu Meter` へ移動します。するとこんな感じの内容が表示されるかと。


この中から、**Scene_01**というアイコンをダブルクリックします。
（末尾に ... が付いてないやつ）

> Sceneというのは、簡単に言えば「ゲームの1画面・1シーン」です。
> 画面情報とかマップとかオブジェクトとかUIが、このSceneの中に詰まってます。

ダブルクリックしてシーンを読み込むと、上の画面ががらりと変わります。


## サンプルの再生

画面上部の再生アイコンを押しましょう！
もう一度押すと止まります。


怪しいクラブサウンドが流れて、スペアナがうにうに動きます。成功です。
**これだけでもカッコイイですね！**


……ということで、このアセットだけでここまで用意してくれるので、

* この音源を差し替える
* 文字を載せる
* ジャケを載せる
* 録画する

ってやれば動画は完成、という道筋が見えてきます。
素晴らしい。アセット作者に感謝！
じゃあ一個一個やっていきましょう。

その前に、**他のシーンを読み込んで遊んでみる**のも良いと思います。
デフォルトで7種類のシーンを用意してくれているので、それぞれ読み込んで再生、とやるだけで楽しめます。

## シーンのコピー

サンプルのシーンを直接いじるのは勿体ないので、自分用にコピーして弄り倒しましょう。ここでは**Scene_01**をベースにします。

Projectウィンドウから、`Scene_01`を、`Assets/Scenes`フォルダへコピーします。
Ctrl+C使うか、Ctrl押しながらドラッグするかでコピーしてね。

コピーされたら、コピー先の`Asset/Scenes/Scene_01`をダブルクリックして開きます。こちらを弄っていきましょう。
必要に応じて名前を変えておくのも良いかも。

## 音源の差し替え

……の前に、まず音源（wav or mp3）をプロジェクトに追加します。

### 音源をプロジェクトへ追加

原則、プロジェクトにないリソースはプロジェクト内で使用することが出来ないので、まずは音源を突っ込む必要があります。
プロジェクト内ならどこに置くでも良いんですが、ここでは音源用のフォルダを作って置くことにします。

Projectウィンドウの`Assets`フォルダ（最上位のフォルダ）を右クリックし、**Create** → **Folder**でフォルダ作成します。
取り敢えず`Music`フォルダとでもしておきましょう。


作った`Asset/Music`フォルダを開きます。
そこへ、エクスプローラーとかから音源（wav or mp3）を**ドラッグして突っ込みます。**


こんな感じに追加されます。
オレンジ色で波形表示がされますね。海苔波形とか言わない。


プロジェクトへの追加はこれでOKです。

### 音源の差し替え

次はHierarchy（ヒエラルキー）ウィンドウを見ます。
ここにはシーンに存在するオブジェクトがリストで表示されています。


音源を設定しているオブジェクトは`Spectrum_Manager`というオブジェクトなので、これを選択します。
オブジェクトを選択すると、**Inspector**ウィンドウにオブジェクトの詳細が表示されます。


色々あるんでビックリしますが、取り敢えず需要なのは**Audio Source**という枠の中（Componentと言います）の情報です。
ここにある**Audio Clip**というのが、サンプルで再生していた音源になります。
これを差し替えれば良いということですね。

Audio Clipのファイル名の右にある、二重丸みたいなアイコンを押します。
すると、プロジェクト内にある音源の一覧が出てきます。


さきほど追加した音源を選択（ダブルクリック）します。

### 再生してみる

ではこの状態で再生してみましょう。


**自分の音源でスペアナがぐりぐり動くようになりましたね！** やったぜ！

### ループ設定外し

なお、サンプルのこのシーンではループの設定が有効になってますので、不要なら外しておきましょう。
先ほどのInspectorに**Loop**という項目にチェックが付いているかと思いますが、このチェックを外せばOKです。

## 文字情報乗せ

お次は文字を載せます。
やや手間が増えてきますが、そう難しくはないです。

### 取り敢えずサンプルを見てみる

実はこのサンプルシーンには、すでに文字情報があります。何故か無効化されています。なので有効化してやりましょう。

Hierarchyにある**TrackText**というオブジェクトを選択します。
色がグレーアウトされてるのが無効化されてる証です。


選択すると、Inspectorに詳細が表示されます。


無効化を解除（要するに有効化）するには、この一番上、**オブジェクト名（TrackText）の左側にあるチェックボックス**にチェックを入れます。
チェックを入れると、立方体が青くなって、こうなります。


ではまた再生してみましょう。
こんな感じに再生されるはずです。


**文字ｷﾀ━(・∀・)━!!!!**

つまりこの文字を差し替えれば良いってことですね！

### 文字情報の差し替え

Hierarchyウィンドウにて、TrackTextオブジェクトの**左側にある三角アイコン**をクリックします。すると、TrackTextの子オブジェクトが2つ出てきます。
これを編集していきます。


見てみると**Name**オブジェクトがトラック名（2行目のほう）、**Number**オブジェクトがトラック番号（1行目のほう）のようです。
ひとまずここでは、Nameオブジェクトで説明します。どちらも編集方法は同じです。

まずはNameオブジェクトを選択します。
例によって、詳細情報がInspectorウィンドウへ表示されます。


察しの良い人は分かるかもしれませんが、この中の**Text**という欄に書かれている文字列（`TRACK NAME : Die Antwoord - Fish Paste`）が、表示する文字列です。
これを書き換えれば良いだけですね！ 書き換えちゃいましょう！

どんな感じに表示されるのかは、**Gameウィンドウ**で確認しながらやるのが良いです。Gameウィンドウは、おそらくSceneウィンドウの横にタブがあるのではないでしょうか。なければ上部メニューのWindowから起動してください。


というわけで、この変更をそれぞれNameオブジェクト、Numberオブジェクトに行えば、文字情報の編集は完了です。

### 補足事項

文字情報を編集する際のメモです。

* 文字をいじっていると非表示になってしまう現象
* 見ての通り、フォントサイズもいじれます。好きにいじりましょう。
* しかしフォントが大きくなったり文字列が長くなったりすると、突然、入力した文字列が非表示になることがあります。
* これは、オブジェクトの大きさを超えてしまってどこか明後日に吹っ飛んでしまっているケースです。
* このような場合のために、以下の2つの設定を変えておくと良いです。
* `Paragraph -> Horizontal Overflow` : Warp を **Overflow** に変更
* `Paragraph -> Vertical Overflow` : Truncate を **Overflow** に変更
* こうしておくと、文字列がはみ出ても無理矢理表示してくれます。

* フォント変更
* フォントも同様に変更が出来ます。
* ただし先ほども書いたとおり「プロジェクト内に存在しないリソースは使用できない」ので、使いたいフォントもプロジェクトにまず追加する必要があります。
* 音源の追加と同様に、`Assets/Font`のようなフォルダを作成してそこにフォントファイルを追加する、といった操作をする必要があります。
* なお、デフォルトで設定されている「font」という謎のフォントが何者かは分かりませんが、**日本語には対応していません**。欧文フォントです。日本語を入力すると強制的にArial（Unityの標準フォント）で表示されるようです。
* 日本語をカッコよく表示したい場合は、フリーの日本語フォントを使うと良いでしょう。
* 源暎フォント : https://okoneya.jp/font/
* Fontworks : https://github.com/fontworks-fonts

* 文字の位置変更
* このあと解説します。

## ジャケット画像載せ

必須ではないですが、ジャケット画像を乗せるとちょっとオシャレになりますよね。やっていきましょう。

### 再生(録画)時の解像度

……と、その前にまずGameウィンドウの解像度を変更しておきます。

上部の再生ボタンを押したとき、Gameウィンドウで再生される際の解像度は、デフォルトだと**Free Aspect**になっています。Gameウィンドウいっぱいに表示する感じです。画面いっぱいなので、16:9とか一切考慮されていない謎の大きさになってます。

実際に録画したい場合は1080p（16:9）にしたりするわけですから、最初から1080pで色々編集をするほうが良いです。設定を変えておきましょう。

Gameウィンドウ上部のFree Aspectと書かれたコンボボックスから、1080p相当の**1920x1080**を選びましょう。

※最初は選択肢にないで手動で追加するか、後述のRecorderで1080pの録画を一度でも選択していると、選択肢に追加されているかと思います。


### 画像をプロジェクトへ追加

音源ファイルと同様に、画像ファイルをプロジェクトへ追加します。
ここでは `Assets/Image` フォルダを作って置いておくことにします。手順は音源と同様なので割愛しますが、置いた後はこんな感じ。


ララフェルかわいいねェ。

なお画像は正方形がオススメですが、まあ何でも大丈夫です。ここでは正方形の画像を用意した前提で話を進めます。

### 画像表示のオブジェクトを追加

画像を表示するためには、文字と同様に画像表示のためのオブジェクトを用意する必要があります。今回は文字情報のようにサンプルにもないので、完全に新規に追加していきます。
さあやりましょう。

Hierarchyウィンドウの**TrackText**オブジェクトを右クリックして、右クリックメニューにある**UI** → **Raw Image**を選択します。


すると**RawImage**というオブジェクトが、TrackTextの子オブジェクトとして作られます。それとGameウィンドウにも何やら白い箱が表示されます。


これが画像を表示するためのオブジェクトです。
今は何も設定されていないので真っ白ですね。

### 画像オブジェクト編集

取り敢えず画像を設定しましょう。
Hierarchyウィンドウに追加されたRawImageオブジェクトを選択すると、例によって**Inspector**に詳細が表示されます。


この中ほどにあるRaw Imageコンポーネントの枠の中、**Texture**という項目が、画像を設定する項目です。今は`None (Texture)`となっています。

ここで音源と同様に、二重丸アイコンを触って選択します。
なお、Projectウィンドウに追加した画像アイコンを選択し、そのままTextureの欄までドラッグアンドドロップして設定することも出来ます。こちらも便利でオススメ。

設定するとこんな感じになります。


Gameウィンドウの真ん中に、こぢんまりと表示されました。

当然ながら真ん中に表示されても邪魔です。今回は右下のイイ感じの場所に、イイ感じに置きましょう。

### 画像オブジェクトのサイズ変更

Inspectorの**WidthとHeight**を見ると、今は`100, 100`になっています。
これを取り敢えず`300, 300`にします。（画像の赤線部分）
Gameウィンドウでも大きくなったことが見えます。


### 画像オブジェクトの移動

色々方法はありますが、今回は数値で指定します。

RawImageオブジェクトのInspectorの**Pos XとPos Y**を見ると、今は`0, 0`になっています。今は画面中央からプラスマイナス0の位置に居る、という意味ですね（PosはPositionの略）。

基準点が**画面中央**なので、そこからの相対位置をPos XとPos Yに書いてあげればOKです。
今回は右下に移動したいので、X（横方向）を+700px、Y（縦方向）を-300px移動させることにします。それぞれの欄に`700, -300`と入力します。（画像の赤線部分）


Gameウィンドウでも右下に移動しましたね。
細かい微調整をしたい場合は数値を色々変えてみると良いと思います。

Gameウィンドウ全体で見るとこんな感じ。


こうなると文字の位置も変えたくなりますね。**変えちゃいましょう。**

### 文字の位置変更

文字の位置変更も、全く同様です。
先ほど文字を編集した**NameオブジェクトとNumberオブジェクト**をそれぞれ選択して、InspectorウィンドウのPos X、Pos Yを変えてやるだけです。

今回は左下に移動したいので、以下のような値にしました。（それぞれX, Y）

* Nameオブジェクト：`-350, -340`
* Numberオブジェクト：`-500, -300`


それっぽくなりましたね！

ではいよいよ録画していきましょう。

# 手順／録画

## Unity Recoderのインストール

外部のキャプチャ使っても良いんですが、折角なのでUnityで録画しちゃいましょう。Unityは公式が録画用のAssetを用意してくれているので、それを入手します。

Package Managerウィンドウの上側のコンボボックスから**Unity Registry**を選びましょう。


その中から**Unity Recorder**を探して、右下の**Install**ボタンを押します。


Importingとかいうウィンドウが消えるとインストールが終わりですが、画面上には変化は起きません。でもちゃんとインストールは終わっているので大丈夫です。

上部メニューにWindow → General → Recorder → **Recorder Window**というメニューがあり、インストール後はこれが使えるようになっています。


こんなのが出ます。


詳しい使い方はぐぐれば腐るほど出てくるんで省略します。
ここでは簡単に。

## 録画設定

Recorderウィンドウの左メニューの**Add Recorder**から**Movie**を選んで追加します。
1080p/60fpsで録画する場合、設定はこんな感じで。


出力先の指定について。
**Path**の項目をAbsoluteにして、右側の`...`から出力先フォルダを指定するのがオススメです。デフォルトだとプロジェクトの中に出力してしまいますが、プロジェクトの中に出力してしまう必要はないので。

## 録画する

Recorderウィンドウの左上の赤い再生ボタンを押すと、録画が始まります。
それと同時に、Gameウィンドウの再生も自動で始まります。


なお**録画中、音は鳴りません**。あと**録画の自動停止もしません**。
スペアナが止まったかな？ と思ったら手動で録画とGameの再生を終了しましょう。

※ちゃんとやりたい場合は、ソースコード書いて良い感じにすれば、自動化することも出来ると思います。頑張って下さい！

## アップロードする

お疲れさまでした！
あとはYouTubeへアップロードするだけ。完成です。

# オマケ

## Post Processingの設定（無料）

3D Visualizer Spectrum Vu Meterの作者さんは、Post Processingのサンプルデータも用意してくれています。これを設定すると更に画がカッコイイ感じになってくれます。

設定すると画がこんな感じになりますよ。ブルームとかが設定されてるんでめちゃくちゃカッコイイです。

Before:


After:


手順は割愛しますが、ざっくりこんな感じです（後日ちゃんと書くかも）。

* Package Managerから**Post Processing**をインストール
* Main Cameraオブジェクトに**Post-processing Layer**をAdd Componentする
* Post-processing Layerの**Layerの項目をDefault**にする
* Hierarchyに空のGameObjectを作る（**Create Empty**）
* 作ったObjectに**Post-process Volume**をAdd Componentする
* Post-process Volumeの**Profileの項目**に、Projectウィンドウから `Assets/_Bad_Raccoon/_3D Music Visualizer Vu Meter/Camera Profile` をドラッグアンドドロップする
* 再生する

詳しくはこの辺りを読んでみましょう。

* [Post Processingの基礎を理解する【Unity】 \| STYLY](https://styly.cc/ja/tips/unity_postprocessing_master/)

###### tags: `unity` `DTM` `同人音楽`