HOME » » » » HERE

[Unity]テキストUIを使ってみる! | 【ゆにすち! - 入門編】(part.012)

access_time

update

ゆにすち(この画像は、https://www.pakutaso.com/さまから借用しています)

こんにちわ、横浜すみっこクリエイターととです。
『UnityでSTEAM販売を目指す!』略して『ゆにすち!』の【入門編】です!
この【入門編】では、3Dゲーム開発プラットフォームである[Unity]の導入と、その基本操作を学習していきます。

今回は、[Unity]のUIオブジェクトであるテキストを使ってみたいと思います!
* 新しいプロジェクトを作り直しています

『ゆにすち!』シリーズ

このシリーズでは『UnityでSTEAM販売を目指す!』略して『ゆにすち!』と銘打ち、プログラムもモデリングも企画も販売も何から何までぜ~んぶド素人のととが、PCゲームを考え、制作して、販売するまでの風景を履歴として残していくものです。短い連載を重ねる形で発信していければと良いな、と思っております。
この【入門編】では、3Dゲーム開発プラットフォームである[Unity]の導入・基本操作を学んでいきます。

この記事のポイント!

  • テキストにはいろいろある!
  • TextMeshPro(TMP)が主流!
  • TMPを使用するにはパッケージのインポートが必要!
  • TMPでは、そのまま日本語を表示できない!
  • Canvasオブジェクトはカメラの位置・視野角に関係なく《シーンビュー》に表示される!

UIテキストの種類

ゆにすち(テキストの種類)

[Unity]には、テキストの表現方法が4種類あります。
* デフォルトの状態。パッケージを追加した場合、さらに種類は増えます。

  • 3Dオブジェクト
    • テキスト
    • Text - TextMeshPro
  • UI
    • テキスト
    • Text - TextMeshPro

まず大きく「3Dオブジェクト」と「UI」の2種類に分かれます。
「3Dオブジェクト」は、CubeやCylinderと同じようにカメラの角度によって、見え方が異なるものです。
「UI」は、カメラの位置や角度に依存せず、見え方が一定のものです。

またそれぞれの中に「テキスト」と「TextMesh Pro(以下、「TMP」といいます)」の2種類があります。
「TMP」を使うメリットが大きいため、こちらを使用するのが主流のようです。
* 場合によっては、「テキスト」の方に軍配が上がるケースもあるようです。

テキストを表示してみる

テキストの生成

ゆにすち(TMP生成)

《ヒエラルキーウィンドウ》の+マークから、UI > Text - TextMeshProをクリックします。

TMPパッケージのインポート

ゆにすち(TMPインポート)

TMPを生成しようとすると、そのプロジェクト内で初回だけ、上図のようなポップアップが表示されます。

TMP Essentials
 This appears to be the first time you access TextMesh Pro, as such we need to add resources to your project that are essential for usingTextMesh Pro. These new resources will be placed at the root of your project in the "TextMesh Pro" folder.

TMPは、パッケージを導入することで使用可能になります。
Import TMP Essentialsをクリックします。
* これはTMPがもともと外部アセットパッケージだったのを[Unity]が途中から公式対応したことに由来するものの名残のようです。

TMP Examples & Extras
 This appears to be the first time you access TextMesh Pro, as such we need to add resources to your project that are essential for usingTextMesh Pro. These new resources will be placed at the root of your project in the "TextMesh Pro" folder.

下段に、上記文言が表示されますが、今回は不要ですので、インポートせずに×ボタンでポップアップを閉じます。

ゆにすち(インポート完了)

《プロジェクトウィンドウ》に「TextMesh Pro」が追加されました。これで、TMPが使えるようになります。

TMPの表示確認

ゆにすち(オブジェクトが追加されました)

まずは、《ヒエラルキーウィンドウ》を見てみましょう。新しいオブジェクトが3つ追加されています。

  • Canvas
    • Text(TMP)
  • EventSystem

Canvasに対して1段下がってText(TMP)がリスト化されています。これは親子関係(ネスト)を表現していて、Canvasに対する依存を示しています。
また、EventSystemについては、UIのユーザー操作を検知するためのものです。今回は使用しません。

ゆにすち(白い線が入りました)

さて、《シーンビュー》を確認してみます。これまでなかった白い線がL字に入っているのがわかります。

ゆにすち(文字が見えました)

マウスホイールで画面を縮小してみると、「New Text」が鏡文字で見えました。

ゆにすち(CanvasとTMP)

画面の全体が見えるように《シーンビュー》を調整すると、白枠とNew Textの文字が見えました。
白い枠の方が「Canvas」で、New Textが「TMP」です。

表示を調整

ゆにすち(位置、文字列、文字色を調整)

少しインスペクターをいじって、もう少し見えやすくしてみたいと思います。
まず、《ヒエラルキーウィンドウ》で「Text(TMP)」を選択状態にします。
配置・文言・文字色を変更してみましょう。

まずは配置を変更します。《インスペクターウィンドウ》の「Rect Transform」コンポーネントの位置座標をすべて0に書き換えます。

つぎに文言をオリジナルなものに変えましょう。「Text Input」コンポーネントで、文字列を変えます。今回は「Hello World! 素晴らしき世界!」としてみました。

最後に文字色です。「Main Setting」コンポーネントの「Vertex Color」をカラーピッカーから好きな色に変えます。今回は、黒にしました。

ゆにすち(文字化け発生)

画面の中央に再配置され、色も黒くなりました。ただ、文言が少しだけおかしいですね。 日本語にした箇所が文字化けを起こしてしまっています。
どうやら、このままでは日本語表記ができないようです。

ゲームビュー

《ゲームビュー》で確認しても同じ見え方になりました。
文字化けはしたものの、とりあえずテキスト表示をすることができました!

カメラ位置とキャンバスの関係について

カメラ位置とキャンバスの関係

《シーンビュー》に戻って、「Main Camera」の視野に画面を合わせます。するとカメラの視野角に先ほど作ったTMPの文字列が入っていません。なのに、《ゲームビュー》で、表示されるのはなぜなのでしょうか?
その秘密はCanvasオブジェクトにあります。Canvasオブジェクトは次のような特徴を持っています。

  • 《ゲームビュー》の表示サイズに応じて白枠も伸縮する
  • カメラの位置に関係なく《ゲームビュー》の画面に表示される

つまり、《シーンビュー》ではカメラ内に入っていないテキストであっても、《ゲームビュー》ではCanvasの白枠とカメラの視野角を一致させて重ねるため、テキストが表示される、ということです。

言葉で表現するのが難しいので、うまく説明できませんでしたが、上記とおりに試してもらえれば、理解が速いと思います。

まとめ

今回は、[Unity]でUIテキストを表示してみました。UIテキストの中で主要アイテムの「TextMeshPro」を使って、文字列を表示したり、位置を変更したり、文字色を変えることができました。ただ、日本語をうまく表示することに課題が残りました。

次回予告

[Unity]TextMeshProで日本語表示!
次回は、[Unity]のTMPで日本語を表示できるようになりましょう!
では、今回はこの辺で。

コメント