【Unity】３Dでオーディオスペクトラムを表現する方法

今回のテーマは、「３Dでオーディオスペクトラムを表現する方法」です。

テクリエイトでは、動画編集記事も扱っており動画編集ツールでのオーディオスペクトラムの作り方を以前に紹介しました。

　最近、「V-Carnival VOL.2」のライブを見ていて、ホロライブのすいちゃんのライブシーンで３Dのオーディオスペクトラムが使われていたのを見て試したくなったので記事にしてみました。

音楽系のゲームで使いやすい表現だと思いますので、ぜひ試してみて下さい。

前準備：GitHubから「unity-audio-spectrum」を入手する

　この記事の手法では、GitHubで公開されている、「unity-audio-spectrum」のコードを利用して、オーディオスペクトラムを取得できるようにしていますので以下のリンクからまずコードを入手します。

GitHub

GitHub – keijiro/unity-audio-spectrum: Provides spectrum data with audio output (Unity, C#) Provides spectrum data with audio output (Unity, C#) – keijiro/unity-audio-spectrum

Readmeを読んだ上で、Code>Download ZIPからzipファイルをダウンロードして解凍して下さい。

　解凍が完了すると、「AudioSpectrum.cs」と「AudioSpectrumInspector.cs」が出てきますのでこれらをUnityのProject>Assetsに取り込みます。

ベースのプロジェクト

　この記事では、以下の記事のプロジェクトをベースに作成しています。必須ではないですが同じ環境で試したい方はあわせて確認して下さい。

あわせて読みたい

【Unity】StandardAssetsでユニティちゃんを動かそう！ 今回のテーマは、「StandardAssetsでユニティちゃんを動かそう！」です。 　StandardAssetsの三人称コントローラーを利用してユニティちゃんを歩かせたり、ジャンプさせ…

３Dでオーディオスペクトラムを表現する

　まず、Hierarchyから空のオブジェクトを３つ作成し、「AudioSpectrumManager」「AudioManager」「SpectrumCube」と名称を変更します。それぞれのオブジェクトは以下のように使い分けします。

オーディオスペクトラム用キューブの作成

　この記事では、１０個のキューブを事前に用意しておいてそのキューブのスケールをスペクトラムと同期させることでオーディオスペクトラムを表現します。

キューブを１０個並べて作成します。Hierarchyから３Dオブジェクト＞キューブでキューブを「SpectumCube」の中に１つ作成し、それをコピーして間隔を開けて１０個キューブを配置します。

※適当にマテリアルで色をつけてます。

音楽ファイルの読み込み

音楽ファイルの読み込みには、Audio Sourceコンポーネントを利用します。先ほど作成した、AudioManagerオブジェクトに、AddComponentから、「Audio Sourceコンポーネント」を追加します。

Audio Sourceコンポーネントを追加したら、AudioClipに任意の音楽ファイルを設定します。

unity-audio-spectrumの設定

　GitHubから入手した「unity-audio-spectrum」を「AudioSpectrumManager」に設定していきます。

プロジェクトに取り込んだ「AudioSpectrum.cs」を「AudioSpectrumManager」に追加します。
今回、設定は初期設定のまま利用します。

スクリプトによるオーディオスペクトラムを利用したキューブの操作

以下のスクリプトを利用して、オーディオスペクトラムに応じたスケールにキューブを調整します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CubeSpectrum : MonoBehaviour
{
    public AudioSpectrum spectrum;
    //オブジェクトの配列（
    public Transform[] cubes;
    //スペクトラムの高さ倍率
    public float scale;

    private void Update()
    {
        int i = 0;

        foreach (var cube in cubes)
        {
            //オブジェクトのスケールを取得
            var localScale = cube.localScale;
            //スペクトラムのレベル＊スケールをYスケールに置き換える
            localScale.y = spectrum.Levels[i] * scale;
            cube.localScale = localScale;
            i++;
        }
    }
}

このスクリプトを、「SpectrumCube」に追加し、各設定項目を以下のように設定します。

• Spectrum：AudioSpectrumManager
• Cubes：１０を設定し、各Cube（１）～（１０）を順に設定
• Scale：任意の倍率、この記事では２５に設定

これで設定が完了しました。再生して動作を確認してみましょう。

まとめ

今回、「３Dでオーディオスペクトラムを表現する方法」を紹介しました。

　今回は、シンプルなキューブを用いた方法を紹介していますが、キューブ以外でも同様に実装できますし、マテリアルを変更することでより綺麗なオーディオスペクトラムを実装することが可能です。

　私のみたVのライブで使われていたオーディオスペクトラムは水色でとてもデジタル的な感じで曲にもマッチしていて非常に魅力的に写ってました。

　音を利用する場面では色々な使い方ができると思いますのでぜひ試して見て下さい。

　今回の記事が、皆さんの助けになると嬉しいです。
もしこの記事が気に入りましたら、ぜひテクリエイトへのブックマーク登録をして頂けると喜びます。
以上、おつかれさまでした！

© Unity Technologies Japan/UCL

参考サイト様