M5StickCのテキスト表示機能を読み解く(1) ～ フォント一覧

M5StickCの(というかベースとなっているTFT_eSPIの)テキスト表示機能は謎が多い。[M5StickC非公式日本語リファレンス](https://lang-ship.com/reference/unofficial/M5StickC/)など親切な情報サイトもあるのだが、私はソースコードを直接見て確認する方が早いし安心できる。ここに調査結果をメモしておくことにする。(→[その2](https://qiita.com/tomoto335/items/a7f01b0070e8d7e2d698))

# setTextFont()で選択できるフォント

`setTextFont(番号)`で選択できるフォントはこのディレクトリ直下に入っている。
https://github.com/m5stack/M5StickC/tree/master/src/Fonts

どの番号がどのフォントに対応するかがわかるテーブルがここ。
https://github.com/m5stack/M5StickC/blob/24b448915d32fecfbcbe4f09a7a3245e77de155d/src/utility/In_eSPI.h#L618-L663

実際どんなグリフなのかよくわからないので、自分で画像化([M5StickCでSpriteに描画しシリアルで吸い出し](https://gist.github.com/tomoto/9cf758768a5de0c3100a33935e7ff8cb))してみた。

### Font 1 (`glcdfont.c`)

HelloWorldでおなじみ、デフォルトの5x7フォント。非ASCII(文字コード128以上)にもグリフが割り当てられており、UTF-8エンコードされたバイト列を渡せば表示することができる。(実は`drawString`は正しくエンコードしなくてもなんとなく動いてしまう; 理由については[その2](https://qiita.com/tomoto335/items/a7f01b0070e8d7e2d698)を参照)

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/808183ad-b0bf-0718-093c-7e4f0be3c380.png)|
|:--|

### Font 2 (`Font16.*`)

高さ16ピクセル。文字コード0x60がバッククォートではなく度記号(°)になっている。`Font16.c` の `#define` をいじれば変えられるようだ。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/87901aa5-2d75-5976-7f3f-25ae2c60fcd8.png)|
|:--|

### Font 4 (`Font32rle.*`)

高さ26ピクセル。文字コード0x60が度記号なだけでなく、0x24が$ではなく￡になっている。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/a1d7885e-9e69-d5a0-a10b-faf1c720250d.png)|
|:--|

### Font 6 (`Font64rle.*`)

高さ48ピクセルの数字フォント。時計用途っぽくam/pmが含まれている。

|![font6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/3cd88448-b13d-5b72-638e-9282f3602ca4.png)|
|:--|

### Font 7 (`Font7srle.*`)

高さ48ピクセルの7セグLED風の数字フォント。

|![font7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/3382cd9f-c61d-e803-cfa5-cc72a303659e.png)|
|:--|

### Font 8 (`Font72rle.*`)

高さ75ピクセルのArial数字フォント。M5StickCには大きすぎて少々使いにくい。

|![font8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/77962586-280e-3270-f1bb-09ac8156af4e.png)|
|:--|

# setFreeFont()で選択できるフォント

GFXfontへのポインタを `setFreeFont(&FreeMono12pt7b)` のように渡して使う。以下ライブラリにバンドルされているものを紹介する。

ところで、これらのバンドルフォントは `In_eSPI.h` で豪快に `#include` されているのだが、ここ↓に
https://github.com/m5stack/M5StickC/blob/24b448915d32fecfbcbe4f09a7a3245e77de155d/src/utility/In_eSPI.h#L412-L413

    // We can include all the free fonts and they will only be built into
    // the sketch if they are used

と書いてある。へー、そうなんだ。

## [Fonts/GFXFF](https://github.com/m5stack/M5StickC/tree/master/src/Fonts/GFXFF)ディレクトリにあるもの

### GNU FreeFont由来のもの

Adafruit GFX Libraryに付いてくるGNU FreeFont由来のフォントがそのまま同梱されている様子。フォント一覧と名称規則はこちらを参照。
https://learn.adafruit.com/adafruit-gfx-graphics-library/using-fonts

|![](https://cdn-learn.adafruit.com/assets/assets/000/029/279/original/lcds___displays_specimens.png)|
|:--|

### TomThumb

3x5ピクセルの極小フォント。使ったことないけど。
https://robey.lag.net/2010/01/23/tiny-monospace-font.html

|![](https://robey.lag.net/images/tom-thumb-new.png)|
|:--|

## [Fonts/Custom](https://github.com/m5stack/M5StickC/tree/master/src/Fonts/Custom)ディレクトリにあるもの

こちらのディレクトリには装飾性の高いフォントが幾つか入っている。

### Orbitron

`setFreeFont(&Orbitron_Light_24)`

|![Orbitron_Light_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/7a4bb27e-cb5f-36d4-a1c3-121d22e04951.png)|
|:--|

`setFreeFont(&Orbitron_Light_32)`

|![Orbitron_Light_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/9aa84c3d-45e7-9651-300a-eddcd52600e5.png)|
|:--|

### Roboto

`setFreeFont(&Roboto_Thin_24)`

|![Roboto_Thin_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/d08b69dd-b821-2937-9a81-aceb01df8a10.png)|
|:--|

### Satisfy

`setFreeFont(&Satisfy_24)`

|![Satisfy_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/716e3e3f-1ed3-64a0-d0e8-5dc55d4f6595.png)|
|:--|

### Yellowtail

`setFreeFont(&Yellowtail_32)`

|![Yellowtail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465152/d0a5b3bc-0bf8-7f4e-bb53-0cb6352a5e8a.png)|
|:--|

以上です(・∀・)