【Unity】チュートリアルの「Roll a Ball」をやってみる話 #8

-
記事をご覧いただき、誠に有難うございます。

投稿主の無能です。

今回は、ステージのクリアを作りたいと思います。


ステージのクリアを作る

ステージのクリアを作るにあたって、テキストを表示させる必要があります。

テキストの表示は主に2種類あって、
メニュー Game Object > UI > Legacy > Text から作れるテキストと、
メニュー Game Object > UI > Text - TextMeshPro から作れるテキストの2種類があります。

メニュー Game Object > UI > Legacy > Text から作れるテキスト

メニュー Game Object > UI > Text - TextMeshPro から作れるテキスト

2つの違いは、公式によると「TextMeshPro は、テキストのための究極のソリューションです。Unity の UI Text と古い Text Mesh の代わりに使用するのに最適です。」とあります。


引用元：https://docs.unity3d.com/ja/2019.4/Manual/com.unity.textmeshpro.html

Legacyという記載がUnityでされているように、現在はTextMeshProがスタンダードになっているようです。

ではどのようにクリア画面を作るのかやってみたいと思います。

UIとは？

UIとはUser Interface（ユーザーインターフェース）の略で、一言で表すと「ユーザーに何かしらの情報を表示する」という意味になります。

ゲーム画面で言えば、今回で言うと「Stage Clear」とテキストを表示する、「Retry」というボタンを表示するなどがあります。
ゲーム画面にゲームに関する情報を表示したり、操作を促したりするものなどをUIと呼びます。

Legacy > Text から作るテキスト

ではメニュー Game Object > UI > Legacy > Text から作るテキストでUIを作る場合です。

メニュー Game Object > UI > Legacy > Text でテキストを作成します。

メニュー Game Object > UI > Legacy > Text でテキストを作成

するとCanvas（キャンバス）とEventSystem（イベントシステム）というものができて、Canvasの子にTextができています。

CanvasとEventSystemが追加され、Canvasの子にTextがある

EventSystemというのは、ユーザーが入力デバイス（キーボードやマウス、タッチスクリーンやゲームパッドなど）から入力情報を受け取って、UIの各種オブジェクトに入力された情報を送信したりする、一言で言えばUI用のコンポーネントと言ったところです。
このEventSystemが有効でないと、テキストやボタンが反応しなくなるので、そのままで問題ありません。

Canvasですが、UIオブジェクトが配置される大元になります。テキストやボタンなどの全てのUIの要素の親になる、と覚えておきましょう。

このCanvasですが、白枠で囲われたものになります。
とても大きいサイズになっていますが、これが標準のサイズになります。

Canvasが大きく見えるが、これが標準のサイズ

GameビューにはNew Textが左下隅に小さく表示されています。

New Textが左下隅に小さく表示されている

このテキストを画面の上部に大きく表示します。

Text(Legacy)のRect TransformのPos X・Pos Yを0にします。

Text(Legacy)のRect TransformのPos X・Pos Yを0にする

すると、分かりづらいのですが中央付近にNew Textが移動してきました。

中央付近にNew Textが移動してきた

まずはフォントの大きさを大きくします。

TextのCharacterのFont Sizeを48にします。

TextのCharacterのFont Sizeを48にする

すると、GameビューのNew Textが消えてしまいました。

GameビューのNew Textが消えてしまった

これはRect TransformのWidthとHeightのサイズをTextのFont Sizeが超過していることが原因なので、Width・Heightを大きくすることで解決します。

Width・Heightをそれぞれ300にします。

Width・Heightをそれぞれ300にする

するとGameビューにNew Textが表示されました。

GameビューにNew Textが表示された

Canvas上のText(Legacy)のサイズは、Sceneビューではこのように表示されています。

Sceneビュー

表示メッセージはTextで変更できるので、「Stage Clear」とします。

あとはCharacterやParagraphを適宜調整して表示を整えます。
このようになりました。

SceneビューとGameビュー

Rect TransformのWidthが600、Heightは200にしました。

Rect TransformのWidthが600、Heightが200

Font Sizeを100、ParagraphのAlignmentを中央揃え、色を白にしました。

Font Sizeを100、ParagraphのAlignmentを中央揃え、色を白にした

Text(Legacy)の作り方はざっとこのような感じになります。

TextMeshProでテキストを作る

次にTextMeshProでテキストを作ります。
※CanvasとEventSystemは削除しています。

TextMeshProを使用する場合は、前準備が必要になります。

メニュー Window > Package Manager でPackage Managerウィンドウを開き、PackagesでUnity RegistryでTextMeshProを検索します。

メニュー Window > Package Manager

Package Managerウィンドウを開き、PackagesをUnity Registryにする

「TextMeshPro」で検索

この時点で名前の右側に緑のチェックが入っていればインストール済みです。
インストールされていない場合は、右下のInstallボタンを押してインストールします。

問題無ければPackage Managerウィンドウを閉じます。

TextMeshProに必要なパッケージをインポートする

次にTextMeshProで必要なものをインポートします。

メニュー Window > TextMeshPro > Import TMP Essential Resources を選択します。

メニュー Window > TextMeshPro > Import TMP Essential Resources を選択

するとUnity Packageをインポートするウィンドウが表示されますので、そのままImportを押します。

Unity Packageをインポートするウィンドウが表示されるので、そのままImportを押す

インポートが終了するとウィンドウが閉じます。

次にメニュー Window > TextMeshPro > Import TMP Examples and Extrasを選択します。

メニュー Window > TextMeshPro > Import TMP Examples and Extrasを選択

先程と同様にインポートするウィンドウが表示されるので、Importボタンを押します。

インポートするウィンドウが表示されるので、そのままImportを押す

インポートが終了するとウィンドウが閉じます。

これで必要なものをインポートできました。

次に日本語を使えるようにします。

日本語を使えるようにする

日本語を使えるように、フォントをダウンロードします。

今回はフォントフリーというサイトで探します。
フォントフリー：https://fontfree.me/

今回はコーポレート・ロゴ（ラウンド）を使わせていただきます。

コーポレート・ロゴ（ラウンド）

利用規約を読み、規約を遵守してください。

ProjectビューのAssetsフォルダ内に「Fonts」フォルダを新規作成し、Fontsフォルダ内に使うフォントファイル（.ttfまたは.otf）をドラッグ＆ドロップします。

Assetsフォルダ内に「Fonts」フォルダを作成

Fontsフォルダ内に使うフォントファイルをドラッグ＆ドロップする

次にフォントアセットを作成します。

フォントアセットの作成

フォントアセットを作成します。

メニュー Window > TextMeshPro > Font Asset Creator を選択します。

メニュー Window > TextMeshPro > Font Asset Creator を選択

Font Asset Creatorウィンドウが表示されました。

Font Asset Creatorウィンドウが表示された

このウィンドウのSource Font Fileに先程ダウンロードしたコーポレート・ロゴ（ラウンド）のフォントファイルを指定します。

次にAtlas Resolutionを両方8192に設定します。

Atlas Resolutionを両方8192に設定する

次にCharacter Fileですが、日本語の文字コードをGituhubGistで提供してくださっている方がいらっしゃるので、そのファイルを利用させていただきます。


GituhubGistのページでDownload Zipボタンを押してダウンロードします。

Download Zipボタンを押してダウンロード

Zipファイルを解凍し、中のjapanese_full.txtをProjectビューのFontsフォルダ内にドラッグ＆ドロップします。

ProjectビューのFontsフォルダ内にjapanese_full.txtをドラッグ＆ドロップ

そしてCharacter Fileにjapanese_full.txtをドラッグ＆ドロップします。

Character Fileにjapanese_full.txtをドラッグ＆ドロップ

そしてGenrate Font Atlasを押して、15分程度待ちます。



完了しました。


画面には失敗したキャラクタ（文字）が表示されています。
このCharの後ろが失敗したキャラクタ（文字）なので、問題無ければSaveを押します。

Saveを押すとファイル保存ダイアログが出るので、ファイルのPathが現在開いているUnityのAssetsのFontsフォルダになっていることを確認して保存します。

Pathが正しいPathであることを確認して保存

Fontsフォルダ内にファイルができたらOKです。


これでTextMeshProで日本語を使う準備ができました。

TextMeshProでテキストを表示する

ではTextMeshProでテキストを表示させたいと思います。

メニュー Game Object > UI > Text - TextMeshPro でテキストを作成します。

メニュー Game Object > UI > Text - TextMeshPro でテキストを作成

Text(TMP)が作成された

CanvasとEventSystemはText(Legacy)と同様です。

TxetのRect TransformはText(Legacy)より少し大きくして、Font Size、AlignmentはText(Legacy)と同様に設定します。

このようになりました。

SceneビューとGameビュー

Text(TMP)の設定

先程インポートしたフォントを適用させます。

Main SettingsのFont Assetを先程作成・保存したフォントアセットを適用します。

Main SettingsのFont Assetを作成したフォントアセットを適用させる

フォントアセットの適用後

するとフォントが変わりました。

フォントが変わった

これでステージクリアのUIができました！

今回はここまで。

まとめ

本記事では
  • Text(Legacy)でのテキストを表示させた
  • TextMeshProでテキストを作成する準備をした
  • TextMeshProで日本語を表示できるようにした
  • Text(TMP)でテキストを表示させた
という事を行いました。

次は、Stage Clearがずっと画面に出ているのはおかしいので、クリアした時にのみ表示するようにしたいと思います。

本記事もご覧頂き、誠に有難うございます。
ではまた。

コメント

コメントを投稿