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

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

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

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

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

目次

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

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

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

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

ベースのプロジェクト

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

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

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

  • AudioSpectrumManager:GitHubから入手したunity-audio-spectrumを管理します。
  • AudioManager:音楽ファイルをAudio Sourceコンポーネントを利用して管理ます。
  • SpectrumCube:10個のスペクトラム用キューブを格納します。

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

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

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

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

音楽ファイルの読み込み

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

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

CHECK!

Unityへの音楽ファイルの取り込みは、Project>Assets に対応する音楽ファイルをドラッグアンドドロップすることで、取り込みが可能です。

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:10を設定し、各Cube(1)~(10)を順に設定
  • Scale:任意の倍率、この記事では25に設定

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

まとめ

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

  • 「unity-audio-spectrum」の入手方法
  • オーディオスペクトラム用キューブの生成
  • 音楽ファイルの読み込み
  • unity-audio-spectrumの設定
  • スクリプトからのスペクトラムを用いたキューブスケールの操作

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

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

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


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

© Unity Technologies Japan/UCL

参考サイト様

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次