Skip to content

UI の作りかた

基本

ウィザードが作った Overlay Canvas の下に、普段の Unity と同じように UI を置くだけです。Text、Image、Button、Toggle、なんでも使えます。

ボタンの処理もいつもどおりです。OnClick に自分のメソッドを割り当ててください。VR の中ではレーザーポインタで押せて、カーソルを乗せたときの色変化もそのまま動きます。

画面の見た目

  • 背景の色は Overlay Camera の Background で変えられます
  • 画面のサイズ感は、ルートに付いている DashboardCanvas の Width In Meters で調整します。数字はダッシュボード上での横幅で、単位はメートルです。既定は 2.5 です
  • 解像度を変えたいときは、描画用のテクスチャを作り直すのが確実です。ウィザードでサイズを指定してもう一度生成してください

エディタ上での確認

UI のレイアウト作業は Scene ビューで行います。カメラの映像はテクスチャに直行するため、再生していないときの Game ビューには何も映りません(「No cameras rendering」と表示されます)。

再生すると、ウィンドウ(Game ビュー)にミラー表示が出ます。VR を着けなくても、ここでマウス操作まで含めて動作確認ができます。VR で確認するときは SteamVR ダッシュボードを開いてタブを選んでください。詳しくは ウィンドウ表示と入力 を見てください。

レーザー入力の仕組み

SteamVR はダッシュボードのタブに対して、レーザーポインタの動きをマウスの動きとして送ってきます。このプロジェクトはそれを受け取って、Unity の UI にクリックやカーソル移動として流し込んでいます。

なので、UI 側から見れば普通のマウス操作と同じです。特別な対応は要りません。押した瞬間・離した瞬間・カーソルが乗った/外れた・クリック、まで一通り届きます。Dropdown の展開リストも操作できます。

InputField をレーザーで選ぶと SteamVR のキーボードが出ます。詳しくは ウィンドウ表示と入力 を見てください。

ドラッグやスクロールは今のところ流していません。必要になったら 改変ガイド を参考に足してください。

複数の画面を作る

ウィザードをもう一度実行すれば、タブがもう一つ増えます。作った画面同士は自動で離れた場所に配置されるので、お互いのカメラに写り込む心配はありません。

SteamVR 全体で同時に置けるオーバーレイの数には上限があります。ひとつのタブでメイン画面とサムネイルの 2 枠を使うので、たくさん作りすぎると上限に当たることがあります。ふつうの使い方なら気にしなくて大丈夫です。