Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@tomoto335

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

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

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に描画しシリアルで吸い出し)してみた。

Font 1 (glcdfont.c)

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

image.png

Font 2 (Font16.*)

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

image.png

Font 4 (Font32rle.*)

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

image.png

Font 6 (Font64rle.*)

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

font6.png

Font 7 (Font7srle.*)

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

font7.png

Font 8 (Font72rle.*)

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

font8.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ディレクトリにあるもの

GNU FreeFont由来のもの

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

TomThumb

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

Fonts/Customディレクトリにあるもの

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

Orbitron

setFreeFont(&Orbitron_Light_24)

Orbitron_Light_24.png

setFreeFont(&Orbitron_Light_32)

Orbitron_Light_32.png

Roboto

setFreeFont(&Roboto_Thin_24)

Roboto_Thin_24.png

Satisfy

setFreeFont(&Satisfy_24)

Satisfy_24.png

Yellowtail

setFreeFont(&Yellowtail_32)

Yellowtail.png

以上です(・∀・)

1
Help us understand the problem. What is going on with this article?
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
1
Help us understand the problem. What is going on with this article?