【Unity入門】打楽器を作成する|AR楽器アプリ作成②


UnityでVuforiaを使用したAR楽器アプリを作成します。

前回はVuforiaの初期設定について解説してきました。

今回は実際にタップすると音が鳴る打楽器を作成していきます。

アプリ概要

今回作成するAR楽器アプリはARマーカーを使用して、マーカー上にドラムを出現させます。

↓完成イメージ

出現したドラムをタップすることで音とエフェクトを出力するような仕様を実現していきます。

今回はドラムのアセットを含めて全て無料の素材を使用します。

作成の流れは、

  1. VuforiaでARマーカーとなる画像を登録する
  2. UnityでVuforiaを使用できる状態にする
  3. ドラムを作成する
  4. AR化する
  5. ドラムを拡大・縮小できるようにする(おまけ)
  6. iPhoneで実装する←本記事ではここまで

以上の流れで作成していきます。

前回の記事ではARマーカーをUnityで扱うところまで進めました。

ここまでの方法がわからない方は前回の記事をご参考ください。

↓前回までに以下の状態になっている

打楽器アセットをインポートする

今回使用する打楽器のアセットをダウンロード・インポートします。

アセットストアから「Drum Kit For Your Band」をダウンロード・インポートしてください。

インポートするとプロジェクトウィンドウにドラムのアセットが追加されます。

Drum_Kit_For_Your_Band→赤枠Prefabsを選択すると、ドラムのプレハブがあります。

今回はこの中でスネアドラムと呼ばれる打楽器をタップすると音が鳴る仕様にしていきます。

一つの実装方法を理解できれば、他の楽器も音の素材を変更するだけで実装できます。

オブジェクトをAR化する

ではスネアドラムをシーンビューに呼び出して、実際にARとして出力できる状態にしてみましょう。

先ほど開いたドラムアセットのフォルダから「DKFYB_SnareDKFYB_Snare_drum」をシーンビューにドラッグ&ドロップしてください。

↓アセットをシーンビューへドラッグ&ドロップ

シーンビューに呼び出したプレハブ化を解除します。

ヒエラルキーウィンドウのDKFYB_SnareDKFYB_Snare_drumを右クリックで選択してください。

選択したら、以下赤枠「UnpackPrefabCompletely」を選択してください。これでプレハブ化を解除できます。

スネアオブジェクトの座標を調節します。

ヒエラルキーウィンドウのDKFYB_SnareDKFYB_Snare_drumを選択してください。

インスペクターウィンドウのPositionの値を全て「0」に変更してください。

↓スネアオブジェクトのTransformの値

↓変更後の位置関係

呼び出したオブジェクトをAR化します。方法は非常に簡単です。

作成したスネアオブジェクトを前回の記事で作成したイメージターゲットオブジェクトの子オブジェクトにするだけで、AR化することができます。

↓スネアをイメージターゲットの子オブジェクトにする

すでにこの状態で実行してカメラで画像を認識するとスネアが出力されます。

PCにカメラが取り付けてあれば確認できますのでぜひ確認してみてください。

↓筆者のPCで撮影した画像(MacBook内蔵カメラではAR化されたスネアを確認できました)

タップして音が鳴るようにする

はじめに音声データをUnityに取り込みます。

音声データはネットなどからお好きなデータを取り込んでください。

ここでは以下のmp3形式の素材を使用します。

ダウンロードしてきた音声をUnityで使用する方法は非常に簡単です。

以下のように音声データをプロジェクトウィンドウにドラッグ&ドロップしてください。

↓音声データをドラッグ&ドロップ

取り込んだ音声データをスネアに取り付けます。

ヒエラルキーウィンドウでスネアオブジェクトを選択してください。

次に以下のようにインスペクターウィンドウのAddComponentから「AudioSource」コンポーネントを選択します。

↓AudioSourceコンポーネント取り付け

取り付けたAudioSourceコンポーネントで先ほど取得した音声データを取り付けます。

以下赤枠①AudioClipの左の丸を選択してSelectAudioClipウィンドウを表示します。次に赤枠②取り込んだ音声データを選択します。

最後に赤枠③PlayOnAwakeを選択してオブジェクト生成時に音声が出力されないように変更して設定完了です。

次にタップしたときに音が鳴るようなスクリプトを作成します。

ヒエラルキーウィンドウでスネアオブジェクトを選択してAddComponentから「NewScript」を選択してください。

スクリプトの名前は任意ですが、ここでは「SoundSnare」として作成します。

↓SoundSnareスクリプト作成

スクリプトを編集します。今回はタップされたときにAudioSourceで設定した音声が出力されるようなスクリプトを作成します。

スクリプトを以下のように変更してください。

これでオブジェクトがタップされたときに音声データが出力されるようになりました。

エフェクトを作成する

次にパーティクルシステムコンポーネントを使用してタップされたときに表示するエフェクトを作成します。

ヒエラルキーウィンドウでスネアオブジェクトを選択してください。

インスペクターウィンドウでAddComponentを選択して、Effects→ParticleSystemを選択してください。

パーティクルの設定を変更します。

基本値を以下のように変更してください。(画像赤線部が変更した部分です)

  • Duration:0.30
  • Looping:チェックを外す
  • StartLifetime:0.1
  • StartSpeed:3
  • StartSize:0.1
  • PlayOnAwake:チェックを外す

次にEmission値を変更します。

  • RateOverTime:50

次にShapeの値を変更します。

  • Angle:60
  • Position:X=0、Y=0.6、Z=0
  • Rotation:X=-90、Y=0、Z=0
  • Scale:X=0.3、Y=0.3、Z=0.3

最後にRendererの値を変更します。

  • 赤枠①Materialの右の丸を選択
  • 赤枠②Default-Particleを選択

以上でパーティクルコンポーネントの設定は完了です。

今回はシンプルなエフェクトですが、パーティクルシステムでは色々な設定の変更を行うことができます。

もっとこだわったエフェクトを作成したいという方は以下の記事をご参考ください。

参考記事)パーティクルシステムについて

最後にタップされたときにこのエフェクトが出力されるようにスクリプトを改良します。

SoundSnareスクリプトを以下のように変更してください。(変更部分は黄色で強調)

これでスネアがタップされたときに音声、エフェクトが出力されるようになりました。

以上の作業を繰り返し、複数の楽器を並べることでドラムを作成することが可能になります。

ARオブジェクトを拡大・縮小する

おまけとして作成したオブジェクトを拡大したり、縮小したりできるような仕様に変更します。

キューブを2つ作成してそれぞれをタップすると拡大・縮小する仕組みを作成していきます。

イメージターゲットオブジェクトの子オブジェクトにCubeオブジェクトを2つ追加してください。

ここでは名前をそれぞれ「Expantion(拡大)」、「Shrinking(縮小)」としています。

色や配置は任意ですのでお好きな色、位置に配置してください。楽器と位置が被ると操作しづらいのでご注意ください。

はじめに楽器を拡大するためのExpantionスクリプトを作成します。

ヒエラルキーウィンドウでExpantionオブジェクトを選択してAddComponentからExpantionスクリプトを作成してください。

作成したスクリプトを以下のように変更してください。

タップの判定原理は先ほどのSoundSnareスクリプトと同じです。

次にヒエラルキーウィンドウでShrinkingオブジェクトを選択してAddComponentからShrinkingスクリプトを作成してください。

作成したスクリプトを以下のように変更してください。(Expantionオブジェクトとの変更点を黄色で強調してあります)

ExpantionスクリプトとShrinkingオブジェクトの違いは、Scaleの値を1.01倍するか割るかの違いのみです。

これで、それぞれのキューブがタップされたときにスネアオブジェクトが拡大縮小するような仕様に変更できました。

iPhoneでの実装

iPhoneでの実装方法は今回は省略しますが、やり方がわからない方は以下記事をご参考ください。

参考記事)iPhoneでの実装方法

また、スネア以外の楽器の作成も今回は省略しますが、やり方は全く同じですのでそれぞれの楽器に合う音声データを取得して実装してみてください。

まとめ

いかがでしたでしょうか。

今回はAR楽器アプリの楽器に音、エフェクトを取り付ける方法をご紹介してきました。

Unityを使用することで簡単にARのアプリを作成することができます。本記事をきっかけに色々なARのアプリを作成していただければ幸いです。


ARスネアイメージ

この記事はいかがでしたか?
もし「参考になった」「面白かった」という場合は、応援シェアお願いします!

株式会社x gardenが運営するXR-Hubの記事編集部です。

読者の皆様に役に立つ情報を発信いたします。

シェアする