ADX+UE5で作る、インタラクティブミュージック中のクォンタイズ機能（改訂版）

# はじめに
ADXアンバサダーとして執筆しておりますSigと申します。
この記事ではアンリアルエンジンとサウンドミドルウェア「ADX for UE」を連携させ、インタラクティブミュージックの要素である「クォンタイズ」を実装してみます。
自分で音楽を奏でられる遊びや、ゲーム内の演出や音をBGMのタイミングに合わせたりといった演出を作ることができます。

https://twitter.com/sleepyslowsheep/status/1448548617694838791?s=20


当記事ではUE5.2を使用しています。
基本的にブループリントのみでの実装を想定しています。
ADXはインディー向けの「LE版」であれば、無料で使用できます。
https://game.criware.jp/products/adx-le/

なお、ADX2はADXへ名称が変更になりましたが、ツール構成は変更ありません（2がないから古いほう、というわけではありません）。

記事執筆時点のADX for UEのSDKバージョンは「ADX LE UE SDK(2.00.00.00)」です。

# 前提
ADX for UEの導入や基本的な使い方は以下の記事にあります。必要に応じて参照してください。
ADX for UEの導入で、一歩上のサウンド表現を（導入編）
https://qiita.com/SigRem/items/4250925f6d66a4fd287a
ADX for UEの導入で、一歩上のサウンド表現を（実践編）
https://qiita.com/SigRem/items/c089b71c42e898980a46

# クォンタイズとは

楽曲制作において、クォンタイズはばらばらに配置された音符（ノート）を楽曲に合わせたテンポに配置する機能のことです。
本来無段階に鳴らすことのできるサウンドに最小単位を設け、それに沿って再生することで音楽として成立させます。

![ImageA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f3a5e5f4-00f9-48d7-c413-46ce9cfbeafc.png)

インタラクティブミュージックにおいてもクォンタイズは有効です。
ゲーム中に再生するサウンドを保留しキューに入れておき、BGMのテンポに合わせて実際に再生を開始することで両者を統一させ、まるで最初からひとつのサウンドだったかのように聞かせることが可能です。

![ImageB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f92a967f-d945-afde-e5dd-601a2f93d966.png)



**今回の記事の実装を試したいけど手頃な音声素材がない……という方のために、1フレーズではありますが素材を用意しましたのでご利用ください。**
https://github.com/SigRem221/adx2forue4-booksample/tree/master/ADX_QuantizeSample

https://drive.google.com/file/d/1-PhYlpIMZRkZgW1XaM_95IGsI4RTCeK0/view?usp=share_link
（どちらのリンクも内容は同じものです）


# 実装

## AtomCraftでサウンドをセットアップする

### マテリアルのインポート

AtomCraftにサウンド素材となるマテリアルをインポートします。
扱うファイルが多くなるため、用途に合わせてフォルダ分けしておくと便利です。
「マテリアルルートフォルダー」を右クリックし、「新規オブジェクト」→「マテリアルフォルダーの作成」でフォルダが作成できます。
![A00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a45a3820-3e72-f512-e061-ad68932952a7.png)
画像ではドラムループ、ピアノパート、リード、ストリングスに分けてあります。


![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e99ca435-ef17-54a5-e8d1-66652cfa505e.png)
フォルダごとに素材を振り分けてインポートしました。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e57b746e-bec9-3145-63d7-8f11bfadfbe2.png)
ループする素材についてループ情報の上書きを行います。
マテリアルを選択し、インスペクターにてループ情報の上書きを「True」に、ループタイプを「ループ」にします。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/60dd40af-fcf3-78f8-a8ca-4b1d65951726.png)
これでドラムループが自動的にループ再生されるようになります。


### ドラムループパートの作成
楽器パートごとにキューを作成します。
まずはドラムループです。
キューシートのワークユニットを右クリックし、「新規オブジェクト」→「キュー『ポリフォニック』の作成」を選択します。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0395c422-d5fd-13cf-7fdc-2aaf99a948ab.png)
オーソドックスなキューが作られるので、ドラムループ素材をキューに入れます。

次にビートのタイミングをUE側で取得できるよう、ビート同期情報を設定します。
トラックリストの空欄で右クリックし、「新規オブジェクト」→「ビート同期情報の作成」を選択します。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/09e02b1e-fb4d-da93-791e-8f513fc82309.png)
「BeatSync」という表示が追加されました。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9cdb230c-88e2-5666-ebad-f5a282f98371.png)
ビートの情報を設定するには、楽曲のBPMの値が必要です。
BPMが分からない場合、対象のマテリアルを右クリックして「BPM解析」を選択します。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ed74ace9-7e3b-7d61-fbf6-5a13c8d1a6c7.png)
ログに「BPM "142"」という表示がされ、楽曲のBPMが142であることが分かりました。
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9a755970-9c87-571e-c683-622ee5e33899.png)
キューの「BeatSync」を選択し、インスペクターにてBPMに「142」を入力します。
![A09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/05f7afcd-4e46-c0e8-ae40-4c1e692f0db9.png)


必須ではありませんが、分かりやすいようタイムラインの表示単位も変えておくと役立ちます。
トラックリストの上にある時計の右の逆三角をクリックし、「タイムベースの編集」を開きます。
![A10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4b484995-e7b6-5a54-96d4-c0cc3fff614a.png)
ここのBPMにも「142」を設定しておきます。
![A11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f44503ae-b110-e0d1-f902-242bebb0e624.png)
タイムライン表示が楽曲のテンポに合わせられました。
次の画像ではちょうどいい場所で曲がループしているのが分かります。
![A12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b31e46bb-4bad-c4a3-d30a-d41334d93538.png)



### クォンタイズする楽器パートの作成
次にピアノやリードなどの楽曲パートのキューを作成します。
キューシートを右クリックし、「新規オブジェクト」→「キュー『ランダム』の作成」か「キュー『ランダムノーリピート』の作成」を選択します。
これらの違いは何度もランダムなトラックを再生した際に、「同じトラック」を続けて再生するかどうかです。
![A13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/76db81aa-6d03-436f-867d-60ef554f7dda.png)
作成されたキューに対して、1トラックにひとつずつマテリアルから対応する素材を入れていきます。
![A14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/115dead8-105e-fc11-996c-157ab8026205.png)
試しに再生してみましょう。毎回違うトラックがランダムで再生されるはずです。
![A15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4c760eb3-a7f1-c32c-e3b9-cc72dafd1302.png)
リード、ストリングパートに対しても同じようにキューを作成します。
![A16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ed922543-f86f-c48c-d182-ee37fd56e166.png)
これらもマテリアルの数だけトラックを持つことになります。
![A17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5e1d6024-c472-7ac3-7bec-fbf488173227.png)


### キューシートのビルド

ここまででひとまずAtomCraftでの作業は完了です。
ツールバーからキューシートをビルドします。
![A18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b8d4e4bb-94de-330e-7b37-02d1096247e7.png)
複数のキューシートを作成した場合、すべてのキューシートにチェックがついていることを確認してください。
チェックがついていないキューシートはビルドされません。
![A19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7e8eba6f-ebe5-5ab5-07b6-2ff0544e6636.png)




## UE5でクォンタイズを実装する

### キューシートのインポート
AtomCraftでビルドしたacf、acbファイルをUE5のコンテンツブラウザ（またはコンテンツドロワー）にドラッグアンドドロップし、インポートします。
ワークユニットやキューシートが複数ある場合、acbファイルも複数出力されています。すべてインポートしてください。

acfファイルのインポート時のダイアログではどちらも「Yes」を選択します。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a304c4b1-a4bb-dcd2-8e26-e1ec99653bca.png)
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6aa01f75-1daa-f10f-db12-8fdecd0c95e3.png)
これにより、このプロジェクトで使用するAtom Configファイルが自動的に設定されます。

acf、acbファイルをインポートすると、コンテンツブラウザにアセットとして追加されます。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/018b7b2b-f508-d128-e594-21c54eeeb59a.png)
キューシートを開き、正常に再生できるか一度確認しておきましょう。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/426c6d4f-31b1-eaef-43e0-ec26f8a27074.png)




### サウンドの配置
ドラムループのキューをレベル上にドラッグアンドドロップして配置します。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a6eb2ef6-a6dd-5a65-1356-2e289af54f2c.png)

**配置したキューを選択しておき**、「Blueprint」→「Open Level Blueprint」でレベルブループリントを開きます。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/010bb26e-2d92-b0c1-b484-f077c7538441.png)


### ブループリントからビート情報を取得する
イベントグラフ上で右クリックして「Create a Reference to （キュー名）」を選択し、リファレンスノードを作成します。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cb726ea9-bf46-3005-2543-c6c12da475d5.png)

リファレンスノードから線を伸ばし、**Get Atom Component**を選択して配置します。
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6888cb0b-02dd-eed6-d935-2802f9f2f3e5.png)

**Get Atom Component**からさらに線を伸ばし、「assign beat」と検索して出てくる**Assign On Atom Beat Sync Callback**を選択すると、ふたつのノードが配置されます。
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/17866a4f-fbb9-9aa7-8b8f-c7dbd930d423.png)
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6df6543f-e372-d02a-9dee-74f1a7e4a299.png)

自動的に作られたカスタムイベントに適当に名前をつけておきます。
![B05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/23fba438-749a-20ff-3d89-09b73157130b.png)


これでビートごとにイベントが走るようになりました。
テスト用に文字を表示してみます。
カスタムイベントから線を伸ばし、**Print String**ノードでデバッグメッセージを出します。
![B06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5928cd74-c132-6043-5c6b-3a660f884ced.png)
実行してみると、ウィンドウ左上にドラムのテンポに合わせてメッセージが表示されます。
![B07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/161b3687-c97d-2ad0-58f0-5c427f4c6a97.png)

合わせてサウンドも鳴らしてみましょう。
**「atom 2d」と検索し**、出てきた**Play Sound 2D**ノードを配置します。
![B08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3c606aba-a410-543c-d561-6fa702f6deb2.png)
![B09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a22d2650-3c27-80d7-088d-b53060d3bd49.png)

再生するキュー（サウンド）を指定するために、新規に変数を用意します。
「My Blueprint」パネルの「VARIABLES」で+ボタンを押し、変数を追加します。
![B10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/72cca3cb-79b4-26c2-2098-c9b8506408cd.png)
適当に名前をつけます。変数の型は「Atom Cue Sheet」型の「Object Reference」です。
![B11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/884046ce-b624-5cb8-abda-d47ee21ad35f.png)
**コンパイルすると**初期値が設定可能になるので、Detailsパネルでキューシートを指定します。
![B12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f80f243c-bfc6-edd7-8dc2-663923e7589e.png)
変数をイベントグラフにドラッグ&ドロップし、**Get CueSheet_IMQ**ノードを配置します。
![B13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bdcc984b-e881-8c56-5413-76d82b738b2c.png)
**Get CueSheet_IMQ**ノードから線を伸ばし、**Get Sound Cue by Name**ノードを配置します。
名前を指定してキューシートからキューを取得するものです。
「Cue_A_Piano」を指定してピアノのサウンドのキューを取得します。
![B14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f9e09188-8c92-b501-363d-c04ae164023a.png)

この状態でゲームを実行してみましょう。音楽のテンポに合わせて、絶え間なくピアノのサウンドが再生されるはずです。



### サウンドのクォンタイズ

各楽曲パートをゲーム中にクォンタイズし、再生する処理を作っていきます。
パートごとに入力を受け取れるよう、変数を追加しましょう。
今回はシンプルな例として、Bool型変数をパートごとに作成しています。
![C01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/340fda82-90e4-4aeb-6277-1fb93a673e21.png)

**Input Key**イベントノードで1,2,3キーが押されたことを感知し、対応する変数をTrueにします。
![C02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/95e83f4f-3fb3-1e96-f644-bd63606849b3.png)

カスタムイベントから線を伸ばし、**入力によって変数がTrueになっていた場合、サウンドを再生して変数をFalseに戻す**処理を書きます。
これでビートごとに楽器キーの入力判定と再生が行われることになります。

パートごとに同じ処理を作ります。**Sequence**ノードを使うと処理を順番に書けるため、グラフが分かりやすくなるのでおすすめです。

![C03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c2c89050-5e33-b63c-16de-e6e8a329e84c.png)

変数「bPlayPiano」が「True」の場合（つまり、直前に1キーが押されていた場合）、ピアノのサウンドを再生して「bPlayPiano」を「False」に戻します。
![C04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6139f14f-9ee6-6985-7899-b972b5baf875.png)

これで、1キーを押した直後のビートのみピアノのサウンドが再生されることになります。

同じように、他のパートについても処理を作ります。ほぼコピペでOKです。
![C05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4a4e7627-c621-3a4c-31d9-29403b8622e6.png)


さて、ここで一度テストプレイしてみましょう。1,2,3キーを押すと次のビートタイミングで楽器が演奏されるはずです。
しかし、サンプルのストリングスパートは少し尺が長いため、連続で押すと重なって演奏されてしまい、不自然に感じます。

### 演奏タイミングをパートごとに設定する

解決方法は簡単です。
カスタムイベントの「Beat Sync Info」から線を伸ばし、**Break**ノードをつなげるとビート同期情報の分解ができ、詳細な情報を取り出すことができます。
![D01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/29b80a4b-c995-ce48-6324-06ecaa958e2c.png)

**Break Atom Beat Sync Info**ノードの「Beat Count」からは小節内で現在何ビート目のタイミングかを受け取れます。
試しに「Beat Count」を**Print String**ノードにつなぎ、メッセージとして出力してみます。
![D02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2a4d2c86-99ac-7d73-68ab-6c3f6f331346.png)

ビートのカウントは0から始まり、4つめのタイミングでまた0に戻ります。小節内のビート数が正しく取得できているのが分かります。
![B22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3deceb3e-bc1e-4ec1-4180-f04fd94b1667.png)
これを踏まえて、ストリングスの再生処理に**Branch**ノードを噛ませます。
条件を**「Beat Cnt == 0」**とすると、各小節の始めのみにストリングスの演奏判定が行われることになります。
![D04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5320ecf1-f521-b06e-ce3e-13e1e1b19ea6.png)

この状態でテストプレイすると、ストリングスの音は重ならずに演奏されるようになっているはずです。


さらに演出を追加する場合や、ユーザーの入力体験を高める方法もまとめていますのでこちらの記事も参照してください（こちらは前バージョンで書かれた記事になります）。
**ADX2 for UE4でつくるクォンタイズ（テクニック補完編）**
https://qiita.com/SigRem/items/207ef9c8b70c1cc798b0