LoginSignup
1
0

Unity初心者が、TextMeshPro(TMP)とScroll Viewの利用に挑戦し挫折した話

Last updated at Posted at 2024-03-21

自分の小説をスマホで読んでもらうとするとき、専用のリーダーを配布している大手サイトに登録して、その専用リーダーをダウンロードしてもらいそのアプリで読んでもらうことになる(最大手はAmazon-Kindle)。だが、それでは多くの他の人の作品に埋もれてしまう。また、専用のリーダーをわざわざダウンロードしようとする人は一部の特別な趣味を持つ人に限られる。
そこで、Unityに触り始めて1か月もたってないぼくが、Unityで自分の小説をアプリのようにスマホで配布できないか?と考え、その手始めとして、TextMeshPro(TMP)とScroll Viewの利用に挑戦したてみた。
だが、結局、挫折。それが今回の話だ。
(とはいえ、そもそも、自分の小説をアプリ化しても、多くの他のアプリに埋もれてしまうことにはかわりがないのだが)

Unityはゲーム開発に多くつかわれるためか、UIでもCanvasそのもの、あるいは自然にCanvasが作られる、Button,Toggle,Slider,Dropdown,Input Fieldの話は散見するが、Text(特に新しいTMP)やScroll Viewの話は,初心者むけのネットや本ではほとんどみかけない。
以下のぼくの話で、少しでも情報になりうるかもしれないことがあるとすれば、
① Unity 2022.3.21f1では、TMPは最初からインストールされている
②しかしあいかわらず、テキストの日本語入力のハードルは依然高い(初心者にとって)
の2点である。

やったことの、概略を以下に記していく。
(1)最初はスクロールバーなしで、TMPを使ってみる。
参照したのは、

(現在は、この記事の頃とは違い、TMPは最初からインストールされている)

最初に、直接、「UI ⇒ TextMeshPro」を選ぶ。すると、もう、TMP Settingsファイルは、Assets/TextMeshPro/Resourcesフォルダにある。
細かいInspectorの設定は、上記サイトのとおり。

次に、日本語が表示できるようにする作業へ。
別途ダウンロードにて入手した「azuki]ttfファイルをAssetsフォルダにドラッグ&ドロップ。
そして、「Window > TextMeshPro > Font Asset Creator」を開き、FontAsset作成(Text(TMP)内に自動的につくられる)。
最後に、最初に作成したCanvas直下の、Text(TMP)にもどり、「azukiSDF」をそのFontAssetに設定
だが、表示された日本語は、残念ながら下記のような網掛け状態に。

TMP.jpg

(2)スクロールバーの中で、TMPをつかってみる
参照したのは

直接「UI ⇒ TextMeshPro」ではなく、
1.まず「UI -> Scroll View」を押下。
 横は不要なので、「Scroll View」の「Scroll Rect -> Horizontal」のチェックを外す。「Scroll View -> Scrollbar Horizontal」を削除、等、サイトのように行う。
2.「Scroll View -> Viewport -> Content」に、
①TextMeshPro - Text (UI)
②Content Size Fitter
の二つのコンポーネントをContent上に追加
①すなわち、Contentオブジェクトを選択した状態で、Hierarchyビューで右クリックし、「UI」→「TextMeshPro - Text」を選択してTextMeshProオブジェクトを追加。
追加したTextMeshProオブジェクトを選択し、InspectorビューでTextMeshProコンポーネントのプロパティを編集。テキストの内容、フォント、サイズ、色などを設定((1)と同じ作業)。
②Content Size Fitterについては「HierarchyビューのScrollViewのViewportの中にあるContentオブジェクトを選択⇒そのInspectorビューで下部にあるAdd Componentボタンをクリック ⇒ 検索バーにContentSizeFitterと入力し、リストからContentSizeFitterを選択して追加⇒ContentSizeFitterコンポーネントの、Vertical FitをPreferred Sizeに設定し、Horizontal FitをPreferred Sizeに設定(サイトにかいてあるとおり)。
そして、次に表示できない日本語を表示させる手続きを、(1)と同じようにおこなう。

できたものは、やはり、日本語に網掛け(これは、ぼくにはお手上げ)。また、スクロールバーは、動かすと跳ね返ってきてしまった(これは、Inspectorの設定をみなおせばなんとかなりそう)。

TMG2.jpg
 
今回は、ここまでで、一応終了とした。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0