僕の私のUnrealな日々

UE4のBluePrintを使って小さなギミックを作ったりしてます。ブログを通じて情報共有ができたらなと思います。

UE4:簡単なOculus(VR)用のメインメニューの作り方

f:id:Bussan_dayo:20150224152510p:plain

ちょっとスマートになる方

unrealbussan.hatenablog.com

 

 

 

どうも僕です。

 

Oculusのコンテンツ制作の構想中、あれ?どうやってレベルを開けばいいんだろうか。どうやってゲームを終了させればいいのか考えました。

 

コントローラーを使わない体感系のコンテンツの場合、視線入力で決定する方法がベストなのでは。そう思い、VR用の簡単なメインメニュー(OpenLevelのみ)を作ってみました。

 


UE4:VR用メインメニューテスト - YouTube

 

ということで、メモ程度ではありますが、作り方を書いていきたいと思います。

(注意:これはひとつの作成案であり、動作を保証するものではありません。)

 

 

VR用の簡単なメインメニューを作ってみよう!

 

今回の仕様

FPSテンプレートのみ使用

視線をバーに合わせると、バーのゲージが増えていく

            Loading...が表示される←New!!

視線をバーから外すと、バーがのゲージが減っていく

            OpenLevelが表示される←New!!

3秒視線を合わせ続けると指定したLevelに移行する

 

今回はゲージがマックスになると新しいレベル(ステージ)が表示されるようにします。

なので、[HelloWorld]と[HelloWorld2]というレベルを作成します。

f:id:Bussan_dayo:20150224153625p:plain

 

次にWidgetを作成します。

作成→ユーザーインターフェースWidgetブループリントを選択

名前を[VRMenu]にします。

f:id:Bussan_dayo:20150224153603p:plain

 

Resolutionからカスタムを選択し、サイズを良い感じで変更します。

そしてProgressBarを設置し名前の最後にVRMenuと記入します。理由はわかりやすいからですね。

f:id:Bussan_dayo:20150224153737p:plain

 

f:id:Bussan_dayo:20150224153950p:plain

 

 

次にBluePrintを作成します。

作成→ブループリント→アクターを選択

 名前をBP_VRMenuにします。

コンポーネントを追加からWidgetを選択します。

 

f:id:Bussan_dayo:20150224154003p:plain

そして先ほど作った[VRMenu]を選択します。

f:id:Bussan_dayo:20150224154012p:plain

サイズを変更しこんな感じに

f:id:Bussan_dayo:20150224154048p:plain

 

 次にMycharacterを変更していきます

 グラフを開き、[イベントTick]と[Line Trace by Channel]出しつなげます。

 f:id:Bussan_dayo:20150224154332p:plain

次にStartとEndを設定します。

f:id:Bussan_dayo:20150224154354p:plain

 

 Get Player Camera ManagerのLocationをスタートに、その前方をGet Actor Foward Vectorを取りそっからどこまでを選択範囲にするかを指定します。今回はLocationから5000かけた方向までを選択範囲としLocationと足しあわせEndにつなげます。

 

現段階の動作を確認するため、DebugTypeを指定します。

f:id:Bussan_dayo:20150224154629p:plain

 

そして実行すると以下のようになります。

f:id:Bussan_dayo:20150224154655p:plain

 

イベントTickで動かしているため1フレームごとにあったところを赤い点と線で表示させています。

 

 次にOutHitからBreakHit Resultを出しHitActorから先ほど作ったBP_VRMenuへキャストします。

 

f:id:Bussan_dayo:20150224155001p:plain

 

 

Blean型の変数を作成します。

名前をLevelOpenにし、お目目アイコンをオンにします。

f:id:Bussan_dayo:20150224155101p:plain

 

そしてLevelOpenをセットで設置し以下のようにつなげます。

f:id:Bussan_dayo:20150224155204p:plain

(チェックを忘れないようにね!)

 

次にBP_VRMenuのグラフを開きます。

カスタムイベントを作成し名前を[OpenLevel]にします。

そして[Get Player Character]を設置しMyCharacterへキャストします。そしてAs My Characterから先ほど作ったLevel Openをゲットします。

 

f:id:Bussan_dayo:20150224155526p:plain

 

イベントTickと[ブランチ(if的な奴)]を設置し先ほどのLevelOpenから線を引っ張ってきます。

f:id:Bussan_dayo:20150224155728p:plain

 

これでBP_VRMenuを認識した際に動作を分岐させることが出来ます。

次にタイムラインを設置し以下のように接続します。

f:id:Bussan_dayo:20150224155807p:plain

 

そして内部を3秒で値が1になるように線を引きます。

f:id:Bussan_dayo:20150224155947p:plain

(fをクリックし、Shift+クリックで点の作成 詳しくはドキュメントを参考にしてください。)


Unreal Engine | タイムライン

 

次にFloat型の変数を作成します。名前を[Percent]にします。

そして、接続します。

f:id:Bussan_dayo:20150224160259p:plain

 

次にWidgetプログレスバーに数値を入れるBluePrintを作成します。

左側からWidgetをGetで持ってきます。そこから[Get User Widget Object]を出し、VRMenuにキャストします。

f:id:Bussan_dayo:20150224160524p:plain

 

そしてVRMenuで設置したProgress Bar VRMenuをGetします。

f:id:Bussan_dayo:20150224160640p:plain

 

Progress Bar VRMenuからSet Percentを出し、先ほど作ったFloat型のPercentをIn Percentに接続します。

f:id:Bussan_dayo:20150224160650p:plain

 

 

次にMycharacterの方に戻り作成したカスタムイベント[OpenLevel]をつなげます。

f:id:Bussan_dayo:20150224161117p:plain

 

すると、動き出します。

f:id:Bussan_dayo:20150224161142p:plain

 

 

次はバーのゲージがマックスになった後にLevelを開く動作を作成します。

タイムラインのFinishedからブランチを引っ張り出し、変数Percentが1とEqualになった時に動作するようにします。

 

f:id:Bussan_dayo:20150224161332p:plain

 

 

次に、ボックストリガーを以下のように設置します。

先ほどテストした際、この動作方法ではオブジェクトにのみ反応するようにしたので、何もないと動作が止まりません。例:床→バー:動き始める。 バー→空:動き続ける)

なので見えない箱でオブジェクトを判定させます。

f:id:Bussan_dayo:20150224161505p:plain

そしてコリジョンをAllBlockにします。

f:id:Bussan_dayo:20150224161546p:plain

 

すると、

あたっている時

f:id:Bussan_dayo:20150224161635p:plain

増えてる

 

少し外した時

f:id:Bussan_dayo:20150224161705p:plain

減っています。

 

次に、バーに記載するOpenLevelのテキスト表示についてです。

(記事の作成の都合上、スクショでは途中から表示されていますが、気にしないでください。)

BP_MenuのコンポーネントからTextRenderを設置します。

f:id:Bussan_dayo:20150224162004p:plain

 

そして視線がバーに合わさった場合、Loading...が出るようにします。ロードしてませんが、何書いていいかわからなかったためLoadingにしました。

 

ブランチの後に以下のように設置します。

f:id:Bussan_dayo:20150224162303p:plain

 

すると、

 

f:id:Bussan_dayo:20150224162622p:plain

 

 なります。

 

 

これで終了です。

 

だらだら書いてしまいましたが、BluePrintの全体像は

MyCharacter

f:id:Bussan_dayo:20150224162921p:plain

 

 BP_VRMenu

f:id:Bussan_dayo:20150224162930p:plain

 

 

 

 

 

これ以外でバリバリ違うやり方ありそうなので、あったら教えて下さい!

あとこの方ですと、アクターとしてWidgetを表示してるのでVRの際に、自分の左下あたりにWidgetをすぽーんするスイッチ的な要素を持ったBPをデフォルトで表示させ、そっちに視線を合わせると、Widgetが目の前に出てくるってことも出来そうです。

 

わかりずらいですか?つまりこういうことです。

f:id:Bussan_dayo:20150224163858p:plain

 (決して適当に書いたわけではなく僕の力作なんです!!)

今度作ってみようかなと思います。

 

作り方、わかりづらかったら申し訳ないです。

 

これはひとつの作成例ですのでそれだけはお忘れなく。

 

以上

 

25日にVR冬祭り

僕も行くので息を潜めて参加者をニヤニヤ見てる予定なのでよろしくお願いいたします。

 

追記:Oculusでの動作確認済み