UnityのuGUIで8ドットフォントを書く

Unityで2Dの低解像度のドットがくっきり見えるようなゲームを作りたいと思いました。
そこでまず文字を書こうと思い、8x8ドットのフォントを描きましたがこれをuGUIで表示する方法がわからない。
ググるとShoeBoxを使ったビットマップフォントの使い方など出てきたのですが、どうにもカーニングしてしまって等幅で書いてくれない…
探していたらこのような サイト があったので参考にさせていただきまして、自分の覚書としてまとめたものです。

まず作ったフォントはこれです。

128x48で数字とアルファベット少しの記号がアスキーコードに従って入っています。
縦64ドットになっているのはキリを良くするためです。

それでこれをCustomFontとして登録したいわけですけど、パラメータを手作業で入れるのは無理なので.fontsettingsファイルを吐き出すことにしました。

fontsetting.py

# fontsetting を作ろう
fileName = "8x8font01.fontsettings"
imageWidth = 128
imageHeight = 64
fontWidth = 8
fontHeight = 8
charid = 0x20

header = ('%YAML 1.1 \n'
'%TAG !u! tag:unity3d.com,2011:\n'
'--- !u!128 &12800000\n'
'Font:\n'
'  m_ObjectHideFlags: 0\n'
'  m_CorrespondingSourceObject: {{fileID: 0}}\n'
'  m_PrefabInstance: {{fileID: 0}}\n'
'  m_PrefabAsset: {{fileID: 0}}\n'
'  m_Name: CustomFont01\n'
'  serializedVersion: 5\n'
'  m_LineSpacing: {}\n'
'  m_DefaultMaterial: {{fileID: 0}}\n'
'  m_FontSize: 0\n'
'  m_Texture: {{fileID: 0}}\n'
'  m_AsciiStartOffset: 0\n'
'  m_Tracking: 1\n'
'  m_CharacterSpacing: 0\n'
'  m_CharacterPadding: 1\n'
'  m_ConvertCase: 0\n'
'  m_CharacterRects:\n')

part = ('  - serializedVersion: 2\n'
'    index: {}\n'
'    uv:\n'
'      serializedVersion: 2\n'
'      x: {:.5f}\n'
'      y: {:.5f}\n'
'      width: {:.5f}\n'
'      height: {:.5f}\n'
'    vert:\n'
'      serializedVersion: 2\n'
'      x: {}\n'
'      y: {}\n'
'      width: {}\n'
'      height: {}\n'
'    advance: {}\n'
'    flipped: 0\n')
footer = ('  m_KerningValues: []\n'
'  m_PixelScale: 0.1\n'
'  m_FontData: \n'
'  m_Ascent: 0\n'
'  m_Descent: 0\n'
'  m_DefaultStyle: 0\n'
'  m_FontNames: []\n'
'  m_FallbackFonts: []\n'
'  m_FontRenderingMode: 0\n'
'  m_UseLegacyBoundsCalculation: 0\n'
'  m_ShouldRoundAdvanceValue: 1\n')

f = open(fileName,"w")

f.write(header.format(fontHeight))

height = fontHeight/imageHeight
for i in range(int(imageHeight/fontHeight)):
    y = 1.0 - (i+1)*fontHeight/imageHeight
    width = fontWidth/imageWidth
    for j in range(int(imageWidth/fontWidth)):
        x = j*fontWidth/imageWidth
        f.write(part.format(charid,x,y,width,height,0,0,fontWidth,-fontHeight,fontWidth))
        charid += 1

f.write(footer)
f.close()

これで出来た.fontsettingsファイルとフォントのPNGをUnityに渡します。
テクスチャはFilterModeをPointにします。

フォント設定はこんな感じになります。
Line Spacingを縦サイズにしておかないと改行しても重なってしまいます。

あとはマテリアルを作ります。
ShaderをUnlit/TransparentにテクスチャにフォントのPNGを指定します。

それらをTextに設定すると等幅で8x8のフォントが書けます。