トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

【Part2】VR/UI研究所アプリを作る【音とUI編】

今回は音付けとUIをメインにやってみます 

bibinbaleo.hatenablog.com

BGM

部屋ごとにBGMをつけようかなと思い、探しているのですがBGM探すのって大変ですね。マジで正解がわからないし、一つ一つ聞いていくの時間かかるし

そもそも私センスないと思う。

AIで画像の雰囲気からBGM提案してくれる機能ないのかな?画像から作るやつじゃなくて推薦がいいけどそういうのはなさそう。

VR彼氏

f:id:bibinbaleo:20171021230216p:plain

イケメンの男の部屋って何が流れているんですかね?ジャズっぽいのを探しましたが、そもそもジャズがどんなのかもよくわからなくなりました。

結局ピアノのゆっくりとした少し悲しい感じのにして、エッチな感じにしました??

dova-s.jp

ガンシュミレーター

f:id:bibinbaleo:20171101181209p:plain

PUBGみたいなBGMが良かったのですが、検索の仕方がよくわかりませんでした。

dova-s.jp

ホーム画面

f:id:bibinbaleo:20171020220408p:plain

この真っ白な空間に合う曲ってなんだろう?ここはBGMなしでもいいかな?って思ったのですが、VR空間で試してから決めてみます。

dova-s.jp

dova-s.jp

VR彼氏

写真保存

前回自撮り棒とカメラを導入したので今回はちゃんと写真が撮れるようにします。

こちらの記事のスクリプトを参考にしました。

psychic-vr-lab.com

とりあえずこのまま使うと、projectfolderのいちばん上の層にファイルが保存されます。

f:id:bibinbaleo:20171101131113p:plain

また何度も取るとファイルは勝手に上書きされます。ということで現在時刻をファイル名に入れて何枚も保存できるようにします。

date = System.DateTime.Now.ToString();

File.WriteAllBytes(Application.dataPath + "/../karecap"+date+".png", bytes);

これでできるかと思ったのですが・・・errorが出て保存されませんでした。

あっなるほどデフォルトだと2017/4/10みたいに日付にスラッシュが入っているのでパスがナンチャラカンチャラになっているのか!

ということでスラッシュが入らない形式にこのサイトを参考に変えました。

note.phyllo.net

ToStringの後のカッコの中にMMddhhmmssと書けば良いのです!

date = System.DateTime.Now.ToString("MMddhhmmss");

無事できました。連射しても秒が違うので複数枚保存されています。

f:id:bibinbaleo:20171101134615p:plain

これ、配布した時にどこに保存されるんでしょうね?まあ今の所配布する予定ないので気にしません。

トリガー入力

トリガーを引いた時にこれを実行するのは案外複雑そうです。

VRTKのサンプルの002_Controller_Eventとそこについている

VRTK_ControllerEvents_ListenerExample.cs

が全てのコントローラー入力の参考になります。

 

まず[VRTK_Script]下のControllerオブジェクトに、

f:id:bibinbaleo:20171101142608p:plain

VRTK_Controller_Eventsをつけます。

f:id:bibinbaleo:20171101142604p:plain

ここでどの基本動作がどのボタンの操作になるかを設定できます。基本的にはいじらないほうがユーザーは楽なのかな?

詳しい説明は下のリファレンスがわかりやすいです。

blog.d-yama7.com

次に独自スクリプトです。トリガーを引いた時に写真を撮るという場合は、

using VRTK;を書いた状態で、

void startに

        if (GetComponent<VRTK_ControllerEvents>() == null){
            VRTK_Logger.Error(VRTK_Logger.GetCommonMessage(VRTK_Logger.CommonMessageKeys.REQUIRED_COMPONENT_MISSING_FROM_GAMEOBJECT, "VRTK_ControllerEvents_ListenerExample", "VRTK_ControllerEvents", "the same"));
            return;
        }

 VRTK_ControllerEventがなかった時にエラーメッセージを吐く処理と、

GetComponent<VRTK_ControllerEvents().TriggerPressed += 

new ControllerInteractionEventHandler(DoTriggerPressed);

 というトリガーを深く引いた時の状態?を書き、次に

private void DoTriggerPressed(object sender, ControllerInteractionEventArgs e)
    {
        savePng ();
    }

 という関数?を書いてその中にsavePng()関数?を書きます。

その後別のところにsavePg()の中身(写真を撮る)を書いたら、トリガーを引いた時にsavePng()が実行されるのではないでしょうか。

using関数を使わないみたいです。

そしてこの独自スクリプトはさっきのコントローラーと同じ場所にくっつけます。

blog.d-yama7.com


[Unity] スクリーンショットの保存 | ftvlog

シャッター音

効果音 by On-Jin ~音人~

qiita.com

audiosource(をつけているオブジェクト)をpublicで参照して、
public AudioSource audioSource;

鳴らしたい場所で audioSource.Play (); と書けば良さそうです。

f:id:bibinbaleo:20171101153443p:plain

f:id:bibinbaleo:20171101153322p:plain

銃を撃った時も同じようにしました。

おまけ

ちょうど記事を書いている時にGoogleが3D素材サイトPolyを発表したので試しにダウンロードして見ました。

poly.google.com

ユーザー投稿型で、利用規約も提供者によってバラバラでした。今回ダウンロードしたViveのHMDのモデルは著作者を表示したら自由に使っていい、CC-BYライセンスです。

f:id:bibinbaleo:20171102145133p:plain

カレピッピにかぶせて見ました。頭に大きさを合わせるのは難しいですね。

メニューボタンからホームに戻る

よくVRゲームであるメニューボタンを押して表示されたUIから「ホームに戻る」を選ぶやつをやろうと思います。

VRTKのサンプルの34番がとても参考になります。

メニューキャンバス作成

まず表示するメニュー画面を作りました。

新しいcanvasを作ってworld spaceにして、ボタンを二つ置きます。

f:id:bibinbaleo:20171101201816p:plain

ちなみに文字がぼやける時はCanvasのDynamic Pixels Per Unitを少し大きくすると治りました。ただ重くなるらしいです。

f:id:bibinbaleo:20171101201820p:plain

tsubakit1.hateblo.jp

canvasにはVRTK_UI Canvasをつけます。これがないとコントローラーのPointerで選ぶことができません。

f:id:bibinbaleo:20171101223200p:plain

そして普通にボタンクリックしたら、ホーム画面に戻るようにスクリプト書いて、ボタン に付けます。

f:id:bibinbaleo:20171101210505p:plain

メニュー表示

次にVRでメニューを表示する方法ですが、形式としては、

・空間に固定でメニューを表示して、コントローラーのポインターで選ぶ

・頭の先にメニューを表示して、コントローラーで選ぶ

・片方のコントローラーの先に表示して、もう片方のコントローラーで選ぶ

方法が多いと思います。

今回は片方(左)のコントローラーの先に表示します。

Left Controllerの子にキャンバスを設置して、少し先に表示されるように移動します。

VR被ってなくてもシュミレーターである程度の位置はわかります。

f:id:bibinbaleo:20171101212118p:plainf:id:bibinbaleo:20171101212114p:plain

そしてLeft Controllerにつけるスクリプトはこんな感じになります。

メニューボタンでmenucanvasをアクティブにします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using VRTK;
using UnityEngine.SceneManagement;

public class home : MonoBehaviour {

    // Use this for initialization
    void Start () {
        GetComponent<VRTK_ControllerEvents>().StartMenuPressed += new ControllerInteractionEventHandler(DoStartMenuPressed);
        
    }
    
    // Update is called once per frame
    void Update () {
        
        if (Input.GetKeyDown (KeyCode.Space)) {////////////非VR環境用
            SceneManager.LoadScene ("home");
        }
    }
    private void DoStartMenuPressed(object sender, ControllerInteractionEventArgs e)
    {
        SceneManager.LoadScene ("home");
    }
}

ポインターで選択

Right Controllerでポインターでメニューを選べるようにします。

 

メインとなるのはVRTK_UIPointerだと思います。

f:id:bibinbaleo:20171101212746p:plain

あとこの二つのポインターもつけて置きます。

f:id:bibinbaleo:20171101223606p:plain

これをメニューが表示されている時だけUI Pointerが出るようにするにはどうすればいいのでしょう。

私はここで初めて公式のリファレンスページを見ました。

今までずっと日本人の記事ばっかり見てたけど、さすがに深いところまで行くと情報がなくなってくる。公式を見るのが一番!!!

vrtoolkit.readme.io

UIPointerスクリプトを使っているサンプルの番号やその詳細まで書いてくれてる!もっと早く見れば良かった。

 

最後に

今まで先人たちの記事を見ながら真似していっていたけど、今回の実装は結構オリジナルで頑張った部分もあり、疲れましたが達成感もありました。

公式のリファレンスを読むのが大事だということを改めて学びました。この際英語とか関係ないから。

VRTKの情報はまだ日本語ではそこまで多くないので公式を見ましょう。(過去の自分へ)

vrtoolkit.readme.io

参考

www.slideshare.net