LoginSignup
5
8

More than 5 years have passed since last update.

Unityでライブのステージがつくりたいな・・・(曲に連動させてなにかする技術調査 part1 ~Beat Detection編~)

Last updated at Posted at 2016-08-26

ちょっとライブのステージが作りたい。
というかライブ行きたい。コールがやりたい。
ということでつくる!道のりは長いぜ!

はい、で、今回は曲に合わせて動かすギミック周りの所の技術調査。
ステージのモデリングに入りたいけどステージのデザインが浮かばないので後回し。

曲と連動してというので私が持ってるアセットは二つ

Beat Detection

こちらは曲をセットすると再生時に自動でイベント呼んでくれたりするやつ。
取れるパターンがいくつか決まっている。
自分で好きなタイミングにとかそういうことはできないが、いちいち全部セットするのめんどくさいとか
精度がそこまできっちりしていなくていいならこっちが楽。
Beat Detection

Koreographer

こちらはProfessional Editionと価格で二つ種類があります。私がもってるのはProfessionalの方。
こちらは自分で事前にイベントを呼ぶタイミングや、テキストなどいろいろ設定できるが、設定するのはそれなりに時間がかかる。
しかし、曲に合わせたカラオケのような歌詞表示や、音ゲーのノードなどの作成には特に便利!
Koreographer Professional Edition
Koreographer

Beat Detectionみてみる

まず簡単なこっちを。インポートしたところ。うん、シンプル
スクリーンショット 2016-08-26 11.45.32.png

Scriptもすくないのでシーンを見てスクリプト読めばOKな感じ。
Demoはこんな感じ。(gifなので音なくてごめんなさい)
BeatDetection.gif

曲を変えるときはCameraにくっついているAudioSourceのAudioClip変えるだけでその曲に合わせて動いてくれます。
スクリーンショット 2016-08-26 11.47.25.png

自分で設定してみる

ではいちから自分で設定してみる。
新しいシーンのカメラにAudio SourceとBeat Detectionをアタッチ。
Beat DetectionのBeat Modeは3つ。Energy Beatのみか それ以外か 両方か。
今回は両方のまま4つ取る感じでいきます。

まぁサンプルのScriptまねるだけだけど・・・。
こんな感じにフリー素材のイラストを落としてきて配置してみました。
画像はこちらの素材利用しております。
これをリズムに合わせて画像差し変える感じで。
スクリーンショット 2016-08-26 12.13.13.png

あとは空のオブジェクトか何かに下記のようなスクリプトをつくってそれぞれ画像などアタッチ


using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class BeatDetectionTest : MonoBehaviour {

    public GameObject AudioBeat;

    public GameObject genergy;
    public GameObject gkick;
    public GameObject gsnare;
    public GameObject ghithat;

    public Sprite[] genegySprite;
    public Sprite[] gkickSprite;
    public Sprite[] gsnareSprite;
    public Sprite[] ghithatSprite;

    void Start () {
        AudioBeat.GetComponent<BeatDetection>().CallBackFunction = MyCallbackEventHandler;
    }

    public void MyCallbackEventHandler(BeatDetection.EventInfo eventInfo)
    {
        switch(eventInfo.messageInfo)
        {
        case BeatDetection.EventType.Energy:
            StartCoroutine(CharAction(genegySprite, genergy));
            break;
        case BeatDetection.EventType.HitHat:
            StartCoroutine(CharAction(gkickSprite, ghithat));
            break;
        case BeatDetection.EventType.Kick:
            StartCoroutine(CharAction(gsnareSprite, gkick));
            break;
        case BeatDetection.EventType.Snare:
            StartCoroutine(CharAction(ghithatSprite, gsnare));
            break;
        }
    }

    private IEnumerator CharAction(Sprite[] spriteList, GameObject obj)
    {
        obj.GetComponent<Image>().sprite = spriteList[1];
        obj.GetComponent<Image>().SetNativeSize();
        yield return new WaitForSeconds(0.2f);
        obj.GetComponent<Image>().sprite = spriteList[0];
        obj.GetComponent<Image>().SetNativeSize();
        yield break;
    }

}

はい、完成(gifだから・・・音ないけど)
BeatDetection2.gif

うん、音に合わせてなので思った通りじゃないかもだけど、ライブの背景のちょっとしたパーティクルとかのレベルであればこれつかえば楽そう。

しかしやりたいことはこれだけではできないのでもう一つの方もやる
そっちは長くなりそうだから今回はここまで。

5
8
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
5
8