箱庭の音
音を基軸としたコンテンツを作ってみたかった
たまにMVとかを自動化できたら面白そうかなとか思っていたので形にするならどうなるんだろう?と思って作りました
音によって色々なパラメーターが変わるコンテンツです
※音が出ます
音に合わせてカメラが揺れたり、傘の移動速度が変わったりします。
さらに音を好きな音楽に変えることができてwavファイルのドラッグ&ドロップで放り込めば切り替わって、切り替えた音を取得して動きが変わるコンテンツになります
音によって空間の動きが変わるけど一部しか観れないので箱庭っぽいなぁということで「箱庭の音」というタイトルにしています(多少キャッチーなタイトルがよかったかも)
影しか写らない横断歩道は自分の世界観なだけなので特に理由がないです
開発環境など
コアとなる部分はUnityで作っていてドラッグ処理などをVue.jsで繋げています
有料Assetsも使ってるのでリポジトリを公開しているもののUnityプロジェクトは誰でも触れるものにはなってないです。。。
Vue.jsから11MBのファイルをUnityに渡すためにbase64するとメモリが足りなくなったりと意外と気を遣うところが出てきたりしました。。。
あとはVue.jsをまともに触るのは初めてだったので作りがかなりイケてないんだろうなと思ってますが作りきることのが大事だと思ってるのでとりあえず作りました(cssが相対的でなかったりビルド後のファイルパスを相対的に治したり…設定があるんだろうけど動かしたかった)
wavファイルを動的ロードする際にUnityWavというのを使ったのですがバイナリの読み取りに柔軟性がなくforkして修正するなどしてました → forkしたリポジトリ
そしてAudioの数値取得は
AudioSource-GetSpectrumData - Unity スクリプトリファレンス
で通常はできるのですがWebGLだと動かないため
を使って実装しました、、、動いてよかった
ホントはSoundCloudのapiを叩いて自由度もあげたかったけどノウハウなさすぎたので一旦断念中
実は昔のプロジェクトをベースとしている
UnityをVueで動かすノウハウ Unityで吐いたWebGLをPWAで動かしてみた - Qiita
遊んでただけの音からパラメーター取るロジックや
ちゃんと修復するところから速攻壊れるところまで撮影できた#unity3d #madewithunity pic.twitter.com/UzDvtk4DiF
— あるど (@OrangeGKeeper) April 4, 2018
見た目に凝ろうとして途中断念したプロジェクトを掛け合わせて作りました
バグで荒ぶる豆腐と影だけの傘 pic.twitter.com/01QjYmWsIM
— あるど (@OrangeGKeeper) March 12, 2019
そのため二週間くらいで作りきれたので蓄積大事だなと思っています
さいごに
今後「箱庭」の種類を増やして音を分析して自動的に見た目を変えたりしていきたいと思っています
そのために
を使ってもっと取得できるパラメーターを増やして遊べるとよさそうだなぁと思ったり
動画とはちょっと違うところがありますが動画としてみれるようにpinp(ピクチャーインピクチャ)機能を使う表示も視野にいれてみたい…