0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

TextMeshProを利用し、PixelMplusを綺麗に表示する

概要

タイトル通り、 TextMeshPro を利用して、8bitビットマップふうフォント、 PixelMplus を綺麗に表示する手順についてです。

また、 PixelMplus には、 10ピクセル12ピクセル にそれぞれ BoldRegular と4種類がありますが、今回は 10ピクセルRegular を利用します。

サクッと行けるかと思いましたが、意外と面倒だったので、健忘録として残します。

環境

Unity : 2020.1.0f1
OS : Windows 10
TextMeshPro : 3.0.1

準備概要

前準備としては以下となります。

  1. PixelMplus フォントをダウンロード
  2. Unity のプロジェクトを 2D で作成
  3. UnityPicelMplus を読み込む
  4. UnityTextMeshPro のアセットを追加
  5. Font Asset CreatorFont Asset を作成

利用手順概要

Scene内で行う、実際の大まかな手順は以下となります。

  1. SceneText - TextMeshPro を追加
  2. TextMeshPro コンポーネントの設定
  3. 表示確認

準備

PixelMplus フォントをダウンロード

itouhiroはてなブログさんの記事中程に ダウンロード リンクがあるので、こちらからフォントが入ったzipをダウンロードしましょう。
具体的なファイルは PixelMplus10-Regular.ttf となります。

image.png

Unity のプロジェクトを 2D で作成

他のモードでも行けるかもですが、今回は 2D でプロジェクトを作りました。

image.png

UnityPicelMplus を読み込む

Assets 配下に適当にフォント用フォルダ等を作って、そこに PixelMplus10-Regular.ttf ファイルをドラッグ&ドロップするだけでOKです。

image.png

UnityTextMeshPro のアセットを追加

デフォルトでは TextMeshPro は利用できないので、 PackageManager からパッケージをインストールします。
image.png
Packages: Unity Registry を選択。 TextMeshPro を探して、 Install
image.png

Font Asset CreatorFont Asset を作成

Font Asset Creator のパネルを開く

TextMeshPro のパッケージが追加されると、 Window から関連メニューが開けるようになります。
Font Asset Creator を選択しましょう。
image.png

Font Asset Creator

このようなパネルが表示されます。

image.png

今回は各値を以下のように設定します。

項目 概要 今回設定する内容 設定根拠
Source Font File フォントを設定 PixelMplus10-Regular.ttf
Sampling Point Size 作成するフォントのサイズ Custom Size > 10 フォントが10ピクセルで作成されているため
Packaging Method フォントの生成手続き? Fast Optimumにすると時間がかかってしまいます。おそらく生成時のフォントの綺麗さなどにえいきょうするのではとおもいますす、今回は Fast でも綺麗に出力できました
Padding フォントアトラスでのフォント間の感覚 4 根拠がある数値ではないですが少し幅とっておけば大丈夫かと
Atlas Resolution フォントアトラスを作成する画像の縦横サイズ 512 x 512 フォントサイズやCustom Character List の文字数によって要調整
Charactor Set 対象文字列の指定方法 Custom Characters 今回は漢字は使わないので、直接文字列リストで指定
Select Font Asset 今回は利用しない
Custom Character List 生成する文字列一覧 ※次項記載 使いたい文字を記入
Render Mode Font Atlasの生成モード RASTER にじみを発生させないために。 ちなみに、RASTERの場合フォントサイズがずれてると画像が乱れます。

一通り設定が完了したら、 Generate Font AtlasFont Atlas が生成され、 SaveFont Asset として、保存ができます。

以上で前準備が整いました。
次は、実際Scene内に作成した Font Asset を利用していきます。

Custom Character List

今回、ファミコンっぽいゲームを作りたくてこの手続を進めているため、漢字が不要なので、以下のようなリストで Font Atlas を作成しました。
記号はなんかあると便利そうなので一応入れてます。

 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё‐―‘’“”†‡‥…‰′″※‾℃Å←↑→↓⇒⇔∀∂∃∇∈∋√∝∞∠∥∧∨∩∪∫∬∴∵∽≒≠≡≦≧≪≫⊂⊃⊆⊇⊥⌒─━│┃┌┏┐┓└┗┘┛├┝┠┣┤┥┨┫┬┯┰┳┴┷┸┻┼┿╂╋■□▲△▼▽◆◇○◎●★☆♀♂♪♭♯ 、。〃々〆〇〈〉《》「」『』【】〒〓〔〕ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん゛゜ゝゞァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ・ーヽヾ仝!#$%&()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ヲァィゥェォャュョッーアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン゙゚¢£¬ ̄¥

日本語全体を利用されたい場合は kgsiさんが作成されている、 japanese_full.txt を利用させていただくのが良いかと。

利用手順

SceneText - TextMeshPro を追加

Hierarchy メニューから UI > Text - TextMeshPro を選択。
TextMeshPro のコンポーネントがついた Text が作成されます。

image.png

TextMeshPro コンポーネントの設定

TextMeshPro のコンポーネント配下のようになっています。

image.png

今回はそれぞれ以下のようにせっていしました。
記載してない部分はデフォルト値のままです。

項目 概要 今回設定する内容 設定根拠
Text Input 表示させたい文字
Font Asset Font Asset Creater で作成した Font Asset
Font Size フォントサイズ 10 ピクセルサイズを合わせます。 大きくしたい場合は10の倍数で上げていかないと、ドットの太さなどが揃いません
Spacing Options (em) フォント間のスペース等 Character:10
Line:10
この辺は特に根拠もないので、自身の感覚で適宜幅を決めてください

表示確認

こんな感じになりました。
ドットが綺麗に表示できています。
image.png
ちなみに、 解像度設定を free Aspect にしていると、若干ドットがずれたりする場合があります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?