波線のフォントがバラバラ！

この記事では、ゲームをチームで開発していた際に、全角チルダ・波ダッシュの混合が原因で生じた問題についてまとめる。

環境

Unity2021.3.23.f1 Personal
MacOS / Windows11 / Windows10
（メンバーによって異なる）

問題: 波線のフォントがおかしい

　ゲーム内で表示されるテキスト中の、波線を用いる箇所で、「～」が表示される場所が、上側と中央でバラバラになる問題が生じた。(資料1)
それぞれの場合で表示している文字列は次の通りである。
上："な～んとなく眠れなくて"
下："ア゛〜〜"

資料1　上: 波線が上側に表示される場合　下: 波線が中央に表示される場合

　この問題は、サークルでRPGゲームを製作している際に起きた。
テキストはTextMeshPro - Text(UI)コンポーネントで表示しており、使用フォントはJFドット出水ゴシック16 Regular ¹ である。

当初、解決策として、ゲーム内で「～」を用いず、全て「ー」で代用する案が挙がったが、「～」と「ー」をニュアンスの違いで使い分けていたため、この案は却下された。

原因

　この問題は、全角チルダと波ダッシュの混合によって発生していた。
それぞれの文字コードは波ダッシュ(〜)がU+301C、全角チルダ(～)がU+FF5Eである。
この二つの文字は、文字コードが異なる―コンピューターは別の文字として扱う―にもかかわらず、ほとんどのフォント上で見分けることが難しい。²

　しかしながら、使用フォントであるJFドット出水ゴシック16 Regularでは、波ダッシュは中央側、全角チルダは上側に描かれていたため、波ダッシュと全角チルダが混合していると、表示される場所が、それぞれ上側と中央でバラバラになってしまった。

　ゲーム内で用いられるテキストは、MacOSやWindows、iOSやAndroidなどの異なるOS上で、メモ帳アプリやGoogleドキュメント、VSCodeなどの異なるソフトウェアを用いて書かれたものである。
OSやソフトウェアによって、波線を入力したときの文字が全角チルダと波ダッシュで異なる場合があるため、混合が起こったと考えられる。

解決策

　解決策として、文字列中の全角チルダを波ダッシュに置換する関数を作成し、表示する文字列をこの関数で変換してからTextMeshProに表示させることで、原文で全角チルダと波ダッシュが混合していても、ゲーム画面では中央側に波線が表示されるようにした。

作成した関数は以下の通りである。

public static string replaceSimilarCharacter(string input)
    {
    // 各行について、第1要素=置換元、第2要素=置換先 です。
        char[,] replaceCharaPair =
        {
            { '～', '〜' }
        };
        string result = input;
        for (int i = 0; i < replaceCharaPair.GetLength(0); i++)
        {
            result = result.Replace(replaceCharaPair[i, 0], replaceCharaPair[i, 1]);
        }
        return result;
    }

この関数を実装したことで、メンバー間で使用OSや使用するソフトウェアが異なっていても、全角チルダと波ダッシュの違いを気にすることなく、テキストを執筆できるようになった。

脚注

１：JFドット出水ゴシック16 Regular 配布元ページ
２：これは「波ダッシュ・全角チルダ問題」と呼ばれることがある。また、文字コードに関する同様の問題が複数存在する。