【Unity】VR環境でテキストを表示する方法
2021.12.20
目次
UnityでVR上にテキストを表示する！
VR での開発をしていく中で、環境の中に「テキストとして情報を表示したい」と思うことはないでしょうか？
二次元の限られた画面内で全ての情報が表現されている Web の世界とは異なる VR の世界。
そんなVR世界では、三次元の空間の中に、様々な形で情報を表示することができます。
本記事では、Unity を使い、VR 上に情報をテキストとして表示する方法を【3つ】ご紹介していきます。
準備（プレハブの作成）
まず、本題に入る前に、今回の作業の基盤になるデフォルトのプレハブ（Prefabs）を作成しておきましょう。
プロジェクト内に Plane を配置
「新しいプロジェクト」を作成し、プロジェクト内に「Plane」を配置します。
作成した Plane は、Inspector パネルの Transform 内にある「歯車アイコン」から、「Reset」を選択し、初期化しておきます。
「DefaultCanvas」の設定を変更
GameObject 内にある「UI」を選択。
その中から Canvas をクリックし作成し、名前を「DefaultCanvas」に変更します。
作成した「DefaultCanvas」の設定を以下のように変更します。
GameObject > UI > Image
「DefaultCanvas」配下に、GameObject > UI > Image から「イメージ」を追加します。
そして、各種設定を以下のように変更します。
GameObject > UI > Text
次に「DefaultCanvas」配下に GameObject > UI > Text から「テキスト」を追加します。
そして、各種設定を以下のとおりに変更します。
Positionの設定
Main Camera の Position を (X, Y, Z) = (0, 1, -2) に設定します。
ここまでの設定を通じて、以下のように、白い背景の上に、「テキスト」という文字列が表示されていることを確認してください。
※以下画像の文字は「New Text」
ここまでの設定ができたら、作成した「DefaultCanvas」をプレハブとして保存してください。
準備完了！
次に、Project の Assets 内に、新しく「Prefabs」というフォルダを作成します。
そして、ここまで作成した「DefaultCanvas」をドラックしてコピーしてください。
コピーが作成されたら、Hierarchy 上に作成した「DefaultCanvas」は削除しておきます。
さて、準備が整いました！
それでは、VR 上に情報をテキストとして表示する方法について、それぞれの実装方法を【３つ】見ていきましょう！
【方法１】テキストを環境に固定して表示する
まず最初にご紹介するのは、VRの環境そのものに、テキストを固定して表示させる方法です。
以下の手順に沿って設定をしていきましょう！
実装開始！
先ほど作成した「DefaultCanvas」という名前のプレハブを、Hierarchy 上にそのまま設置し、名前を「FixedCanvas」に変更します。
そして、 「FixedCanvas」の設定を以下のように変更してください。
画面を調整する
配置した「FixedCanvas」配下にある Image と Text の設定を変更することで、画面を調整します。
- Image の Color を変更・・・文字が表示されている背景の色が変わる
- Source Image を変更・・・任意の画像を背景として利用することが可能
- Text の中にある、Script を変更・・・画面に表示する文字列を変更できる
以下は、見た目を変更した一例です。
確認してみましょう！
実際に、ヘッドセットを用いて見てみると、このように見えます。
【方法２】頭の動きに応じてテキストを動かす
次にご紹介するのは、先ほどの環境に固定されたテキストとは異なり、頭の動きに応じてテキストを表示する方法です。
この方法を用いて設定されたテキストは、例えユーザーが別の方向を見たとしても、常にユーザーの視界の同じ位置に表示されます。
では、作成方法を見ていきましょう。
実装開始！
先ほど作成した「FixedCanvas」を、Inspector 内左上にあるチェックを外し、「無効化」します。
準備で作成した「DefaultCanvas」を Hierarchy 内の Main camera 配下に設置し、名前を「MoveCanvas」に変更します。
そして、「MoveCanvas」の Inspector 内にある、「Pos X, Pos Y, Pos Z」の値を (0, 0, 2) に変更します。
環境に固定されたテキストを作成する際と同様の手順で、「MoveCanvas」配下にある「Image」「Text」を適宜変更してください。
確認してみましょう！
ここまでの設定が上手くできていれば、ヘッドセットを用いて見てみると、このように見えるはずです！
環境に固定されたテキストとは異なりますね。
頭の動きに応じて、テキストも動き、常に視界の中心にテキストが表示されていることが分かるかと思います！
【方法３】VR上にあるオブジェクトの説明をポップアップで表示する
最後に、VRの環境内にあるオブジェクトの説明をポップアップで表示させる方法を紹介します。
よくゲームにおいて、オブジェクトの説明や、ゲーム内のキャラクターとの会話文等が画面内に表示されることがありますよね！
そのような実装を行いたい場合に、応用をすることができる手法です。
早速、実装方法を見ていきましょう！
実装開始！
先ほど作成した「MoveCanvas」を、Inspector 内左上にあるチェックを外し「無効化」します。
カプセルを生成
そして、GameObject > 3D Object > Capsule から、カプセルを生成します。
ここでは、この「カプセル」を環境内のキャラクターとみなします。
プレイヤーがそのキャラクターを見つめた際に、コメントがポップアップで表示されるよう実装していきます。
Position設定
カプセル
カプセルの Position を、(X, Y, Z) = (0, 0.4, 0) 。
そして、Scale を、(X, Y, Z) = (0.5, 0.5, 0.5) に設定をします。
PopupCanvas
GameObject > Create Empty から、空のゲームオブジェクトを生成し、名前を「PopupCanvas」に変更します。
「PopupCanvas」の Position を、(X, Y, Z) = (0, -1, 0)。
そして、Scaleを、(X, Y, Z) = (1, 1, 1) に設定をします。
Popup
「PopupCanvas」配下に準備において作成した「DefaultCanvas」を配置し、名前を「Popup」に変更します。
「Popup」の Position を、(X, Y, Z) = (0, 0, -0.3) に変更します。
「Popup」配下にある「Image」の Scaleを (X, Y, Z) = (0.7, 0.5, 1) に変更します。
「Popup」配下にある「Text」の文言を、自由に変更してください。
今回は、
こんにちは！今日も良い天気ですね。
というテキストを表示するよう設定をしました。
コードを記載する
「PopupCanvas」の Add Component を選択し、「New script」を選択します。
新しいスクリプトの名前は、「DisplayPopup.cs」としておきましょう。
作成した「DisplayPopup.cs」に、以下のようなコードを記載します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class DisplayPopup : MonoBehaviour { public GameObject capsule; public GameObject popupObj; public Transform popup; private Text infoText; private void Start() { if (popup != null) { infoText = popup.Find("Text").GetComponent<Text>(); } } void Update() { Transform camera = Camera.main.transform; Ray ray; RaycastHit[] hits; GameObject hitObject; ray = new Ray(camera.position, camera.rotation * Vector3.forward); hits = Physics.RaycastAll(ray); for (int i = 0; i < hits.Length; i++) { RaycastHit hit = hits[i]; hitObject = hit.collider.gameObject; if (hitObject == capsule) { popupObj.SetActive(true); if (popup != null) { popup.LookAt(camera.position); popup.Rotate(0.0f, 180.0f, 0.0f); } transform.position = hit.point; }else{ popupObj.SetActive(false); } } } } |
上記コードでは、
- プレイヤーの視線がカプセルと衝突するかどうかを判定し
- もし衝突する場合、popup に指定されているテキストを表示
- 衝突がない場合、テキストを表示しない
という処理をしています。
また、
1 2 3 | popup.LookAt(camera.position); popup.Rotate(0.0f, 180.0f, 0.0f); |
という処理を入れることで、表示されるテキストが常にユーザーに対して正面を向くような実装になっています。
紐付ける
Hierarchyから、「PopupCanvas」を選択し、作成した「DisplayPopup.cs」に必要なオブジェクを以下のとおりに紐付けます。
- Capsule ・・・上記で作成した Capsule
- Popup Obj / Popup ・・・上記で作成した Popup
以上で設定は終わりです！
確認してみましょう！
ここまでの設定が正しくできていれば、ヘッドセットを通じて以下のように見えるはずです！
カプセルを見ている時は、
こんにちは！今日も良い天気ですね。
というテキストが表示されます。
それ以外の時は、テキストが消えるような処理になっているかと思います。
さいごに
いかがでしたでしょうか？
今回は、Unity を使って VR 上に情報をテキストとして表示する方法を【3つ】ご紹介しました。
それぞれの表示方法には異なった特徴があり、どれを選択するかによって、「ユーザーの体験」は大きく変わってきます。
ご紹介したいくつかの方法や、またそれらの応用を通じて、自分の作品にあったものを選択して使っていきましょう！
では、作ることを楽しんでいきましょう！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もりは大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！
ご応募をお待ちしております！
ITエンタメ2022.05.25COBOL開発者は「コンピューターおばあちゃん」で海軍准将!?グレース・ホッパー- ITエンタメ2022.05.23マイクロソフトの壁は穴だらけ!?デヴィッド・カトラー
- ITエンタメ2022.05.13ホーコン・ウィウム・リーが提唱したCSSの過去と未来
- ITエンタメ2022.04.28ラスムッセン兄弟が作ったグーグルマップの軌跡
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
