【Unity】VR環境でテキストを表示する方法
2020.08.24
目次
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つ】ご紹介しました。
それぞれの表示方法には異なった特徴があり、どれを選択するかによって、「ユーザーの体験」は大きく変わってきます。
ご紹介したいくつかの方法や、またそれらの応用を通じて、自分の作品にあったものを選択して使っていきましょう！
では、作ることを楽しんでいきましょう！
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、「好きを仕事にするエンジニア集団」です。
Unityでの開発依頼・お見積もりはこちらまでお願いします。
また、Unityを扱えるエンジニアを積極採用中です！詳しくはこちらをご覧ください。
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。
こちらの記事もオススメ！
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
IT技術2021.04.30【第3回】Djangoで日記アプリを作ろう～投稿フォーム編～- IT技術2021.04.23【第2回】Djangoで日記アプリを作ろう～トップ画面編～
- IT技術2021.04.16【第1回】Djangoで日記アプリを作ろう～環境構築編～
- IT技術2021.03.2910月20日メジャーアップデート！「Node.js v15」の新機能とは？
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
