<p data-line="0" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3db82158a2dc-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="2" class="code-line">TextMeshPro を使っていたら１度は見たことある「□」。<br>
これを「完全駆逐」することを目指します。</p>
<h1 id="%E2%97%86%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E2%97%86%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> ◆日本語フォントを作成する</h1>
<p data-line="6" class="code-line">これで98%は改善されるでしょう。以下が手順です。</p>
<h4 id="noto-sans-%E3%81%AA%E3%81%A9%E3%81%AE%E7%84%A1%E6%96%99%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%80%81assets%2F-%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%8B" data-line="8" class="code-line">
<a class="header-anchor-link" href="#noto-sans-%E3%81%AA%E3%81%A9%E3%81%AE%E7%84%A1%E6%96%99%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%80%81assets%2F-%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%8B" aria-hidden="true"></a> Noto Sans などの無料日本語フォントをサイトからダウンロードし、Assets/ に入れる</h4>
<p data-line="9" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__efbea59e819d6" src="https://embed.zenn.studio/card#zenn-embedded__efbea59e819d6" data-content="https%3A%2F%2Ffonts.google.com%2Fselection" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://fonts.google.com/selection" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://fonts.google.com/selection</a><br style="display:none">
Noto Sans はありふれてるし嫌！　という場合は別のデザインフォントでも構いません。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="13" class="code-line">ただし、ライセンスには注意しましょう</p>
</div></aside>
<hr data-line="16" class="code-line">
<h4 id="%E6%97%A5%E6%9C%AC%E8%AA%9E%E6%96%87%E5%AD%97%E4%B8%80%E8%A6%A7%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92-assets%2F-%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%8B" data-line="17" class="code-line">
<a class="header-anchor-link" href="#%E6%97%A5%E6%9C%AC%E8%AA%9E%E6%96%87%E5%AD%97%E4%B8%80%E8%A6%A7%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92-assets%2F-%E3%81%AB%E5%85%A5%E3%82%8C%E3%82%8B" aria-hidden="true"></a> 日本語文字一覧テキストを Assets/ に入れる</h4>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__33d5c673b5a13" src="https://embed.zenn.studio/card#zenn-embedded__33d5c673b5a13" data-content="https%3A%2F%2Fgithub.com%2Fcatsnipe%2FCharacterList" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/catsnipe/CharacterList" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/catsnipe/CharacterList</a><br style="display:none">
ここの <strong>jp_jis2.txt</strong> のようなテキストを <code>Assets/</code> フォルダに入れてください。</p>
<hr data-line="21" class="code-line">
<h4 id="window-%E2%9E%A1-textmeshpro-%E2%9E%A1-font-asset-creator" data-line="22" class="code-line">
<a class="header-anchor-link" href="#window-%E2%9E%A1-textmeshpro-%E2%9E%A1-font-asset-creator" aria-hidden="true"></a> Window ➡ TextMeshPro ➡ Font Asset Creator</h4>
<p data-line="23" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/71189f98adfd-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="25" class="code-line">画像のような値にして、<strong>Generate Font Atlas</strong> するとしばらくしてフォントが作成されます。</p>
<p data-line="27" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/87c4ee19c65f-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="29" class="code-line">Missing characters に問題なければ <strong>Save</strong> しましょう。</p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="32" class="code-line"><strong>予期せぬ Missing characters が多数あった場合</strong><br>
選択したフォントに、そもそも文字が登録されていない可能性があります。<br>
ひらがなだけのフォントで漢字を使うことはできません。どうしても漢字が必要であれば、別のフォントを検討してください。</p>
</div></aside>
<hr data-line="37" class="code-line">
<h4 id="textmeshprougui-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0" data-line="38" class="code-line">
<a class="header-anchor-link" href="#textmeshprougui-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0" aria-hidden="true"></a> TextMeshProUGUI コンポーネントに作成したフォントをドラッグ</h4>
<p data-line="39" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/41dbb520feee-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="41" class="code-line"><code>Font Asset</code> に作成した SDF をドラッグしてください。</p>
<p data-line="43" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/303cb9c85a1e-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="45" class="code-line">このように表示されれば OK です。</p>
<h1 id="%E2%97%86%E7%89%B9%E6%AE%8A%E3%81%AA%E6%96%87%E5%AD%97" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E2%97%86%E7%89%B9%E6%AE%8A%E3%81%AA%E6%96%87%E5%AD%97" aria-hidden="true"></a> ◆特殊な文字</h1>
<p data-line="48" class="code-line">残りの 2% について考えていきます。</p>
<p data-line="50" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3938f689459d-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="52" class="code-line">このような特殊な文字はどうすればいいでしょうか。<br>
キノコの絵文字、また🈕という通常ほぼ使われない文字が入っています。<br>
これらの文字は当然、通常の漢字では扱われていないので、□になってしまいます。</p>
<p data-line="56" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/0951372b08ac-20250619.png" class="md-img" loading="lazy"></p>
<h2 id="%E2%96%BC%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AB%E5%AF%BE%E5%BF%9C" data-line="58" class="code-line">
<a class="header-anchor-link" href="#%E2%96%BC%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AB%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> ▼絵文字に対応</h2>
<p data-line="59" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d958977a4ac0-20250619.png" class="md-img" loading="lazy"><br>
<strong>Kyub EmojiSearch API</strong> を使わせていただきます。<br>
一旦 Unity を閉じた後、manifest.json に次のような記述を含めてください。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="63">  "dependencies": {
    "com.kyub.emojisearch": "https://gitlab.com/KyubInteractive/emojisearchapi.git#com.kyub.emojisearch-1.1.5",
    ...
</code></pre></div><p data-line="69" class="code-line">Unity を起動し、Packages に Kyub EmojiSearch API の存在を確認します。</p>
<p data-line="71" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/381c3165d6f0-20250619.png" class="md-img" loading="lazy"></p>
<hr data-line="73" class="code-line">
<h4 id="edit-%E2%9E%A1-project-settings-%E2%9E%A1-textmeshpro-%E2%9E%A1-settings" data-line="74" class="code-line">
<a class="header-anchor-link" href="#edit-%E2%9E%A1-project-settings-%E2%9E%A1-textmeshpro-%E2%9E%A1-settings" aria-hidden="true"></a> Edit ➡ Project Settings ➡ TextMeshPro ➡ Settings</h4>
<p data-line="75" class="code-line"><code>Default Sprite Asset</code> に <strong>EmojiData_v14_google_apple</strong> をドラッグドロップ。</p>
<p data-line="77" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d958977a4ac0-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="79" class="code-line">これで絵文字が表示されるようになります。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="82" class="code-line">参考：<a href="https://qiita.com/K0uhe1D/items/93ca4a397a16543f6f4c" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/K0uhe1D/items/93ca4a397a16543f6f4c</a></p>
</div></aside>
<h2 id="%E2%96%BC%E4%B8%8D%E8%A6%81%E3%81%AA%E7%B5%B5%E6%96%87%E5%AD%97%E3%82%92%E3%82%AB%E3%83%83%E3%83%88%E3%81%99%E3%82%8B" data-line="85" class="code-line">
<a class="header-anchor-link" href="#%E2%96%BC%E4%B8%8D%E8%A6%81%E3%81%AA%E7%B5%B5%E6%96%87%E5%AD%97%E3%82%92%E3%82%AB%E3%83%83%E3%83%88%E3%81%99%E3%82%8B" aria-hidden="true"></a> ▼不要な絵文字をカットする</h2>
<p data-line="86" class="code-line"><strong>EmojiData14_google_apple</strong> を導入すると、変更されてほしくない文字まで絵文字になるかもしれません。例えば User00 というテキストは次のように変換されます。</p>
<p data-line="88" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/18a888ca68f5-20250628.png" class="md-img" loading="lazy"></p>
<p data-line="90" class="code-line">この表示は普通に User00 にしたいですよね。そういった場合のカスタム方法です。</p>
<h4 id="emojidata_v14.txt" data-line="92" class="code-line">
<a class="header-anchor-link" href="#emojidata_v14.txt" aria-hidden="true"></a> EmojiData_v14.txt</h4>
<p data-line="93" class="code-line">特定の絵文字をカットしたい場合、まず EmojiData_v14.txt の内容を変更します。<br>
EmojiData_v14.txt は EmojiData14_google_apple と同じ場所にあるので、まず一旦このファイルを Assets/ の下であればどこでも構いませんが、複製。<br>
今度は複製したテキストファイルを開きます。0～9 の絵文字をカットしたいので、今回は "KEYCAP 0" ～ "KEYCAP 9" を消去し、保存してください。</p>
<h4 id="sprite-emoji-importer" data-line="97" class="code-line">
<a class="header-anchor-link" href="#sprite-emoji-importer" aria-hidden="true"></a> Sprite Emoji Importer</h4>
<p data-line="98" class="code-line">次に、<code>Window &gt; TextMeshPro &gt; Sprite Emoji Importer</code> を選択。</p>
<p data-line="100" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/cc2ce4e9610d-20250628.png" class="md-img" loading="lazy"></p>
<ul data-line="102" class="code-line">
<li data-line="102" class="code-line">１に先ほど書き換えた EmojiData_v14.txt をドラッグ</li>
<li data-line="103" class="code-line">２に EmojiData_v13_apple_64.png または EmojiData_v13_google_64.png をドラッグ</li>
<li data-line="104" class="code-line">Grid Size は 64、Padding 0、Spacing 2 に変更</li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="107" class="code-line">Grid Size や Padding はダウンロードした Kyub EmojiSearch API によっては異なる可能性もあります。</p>
</div></aside>
<p data-line="110" class="code-line">以上で <code>Create Sprite Asset &gt; Save Sprite Asset</code>。セーブ場所は Assets/ の下であればどこでも問題ありません。名前は <strong>EmojiData_v14</strong> とでもしておきましょう。</p>
<p data-line="112" class="code-line">最後に Project Settings &gt; TextMesh Pro &gt; Settings &gt; Default Sprite Asset を作成した <strong>EmojiData_v14</strong> をドラッグすると、変更が反映されます。</p>
<h2 id="%E2%96%BC%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%96%87%E5%AD%97%E3%81%AF%E8%A6%8B%E3%81%88%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B" data-line="114" class="code-line">
<a class="header-anchor-link" href="#%E2%96%BC%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%96%87%E5%AD%97%E3%81%AF%E8%A6%8B%E3%81%88%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B" aria-hidden="true"></a> ▼対応できない文字は見えないようにする</h2>
<p data-line="115" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/19b7a294a5e0-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="117" class="code-line">通常のフォントには登録されていないが、ユーザー入力によりどうしても入ってしまう特殊文字……これを、せめてなかったことにする（□を見えなくする）手段です。</p>
<hr data-line="119" class="code-line">
<h4 id="missingfont-%E3%82%92%E4%BD%9C%E6%88%90" data-line="120" class="code-line">
<a class="header-anchor-link" href="#missingfont-%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> MissingFont を作成</h4>
<p data-line="121" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9420fb17a0fe-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="123" class="code-line">このようなダミーフォントを作成します。<br>
（名前は MissingFont としておきます）</p>
<hr data-line="126" class="code-line">
<h4 id="missingfont-%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" data-line="127" class="code-line">
<a class="header-anchor-link" href="#missingfont-%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> MissingFont の内容を変更する</h4>
<p data-line="128" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/2a462b72c786-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="130" class="code-line">Characters Table に先ほど登録した１文字があります。これをクリックし、入力モードにします。<br>
<code>Unicode</code> を <strong>0xffff</strong>、<code>Scale</code> を <strong>0</strong> にします。</p>
<hr data-line="133" class="code-line">
<h4 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE-fallback-%E3%81%AB-missingfont-%E3%82%92%E7%99%BB%E9%8C%B2" data-line="134" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE-fallback-%E3%81%AB-missingfont-%E3%82%92%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> メインフォントの Fallback に MissingFont を登録</h4>
<p data-line="135" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/8d16dd4f593b-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="137" class="code-line">先ほど作成した日本語フォントの <code>Fallback Font Assets</code> に MissingFont を登録します。</p>
<hr data-line="139" class="code-line">
<h4 id="edit-%E2%9E%A1-project-settings-%E2%9E%A1-textmeshpro-%E2%9E%A1-settings-1" data-line="140" class="code-line">
<a class="header-anchor-link" href="#edit-%E2%9E%A1-project-settings-%E2%9E%A1-textmeshpro-%E2%9E%A1-settings-1" aria-hidden="true"></a> Edit ➡ Project Settings ➡ TextMeshPro ➡ Settings</h4>
<p data-line="141" class="code-line"><code>Dynamic Font System Settings</code> の <code>Missing Character Unicode</code> を <strong>16777215</strong>（= 0xffffff）にします。</p>
<p data-line="143" class="code-line">これは「表示できない文字は 0xffffff で出力する」という意味です。<br>
＝先ほど作成したスケール 0 のダミーフォントが表示される ➡ <strong>スケール 0 だから見えない</strong>、というカラクリです。</p>
<p data-line="146" class="code-line">TextMeshPro で表示できない文字を表示しようとすると Console に警告が出ますが、その警告も消したい場合は <code>Disable warnings</code> に ✔ を入れます。</p>
<p data-line="148" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/19b7a294a5e0-20250619.png" class="md-img" loading="lazy"></p>
<p data-line="150" class="code-line">これで、Unknown な文字を非表示にすることができました。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="153" class="code-line">参考：<a href="https://light11.hatenadiary.com/entry/2021/12/28/114503" target="_blank" rel="nofollow noopener noreferrer">https://light11.hatenadiary.com/entry/2021/12/28/114503</a></p>
</div></aside>


TextMeshPro から□□□を駆逐する

▼対応できない文字は見えないようにする

unity

Discussion