LovyanGFXで画面描画(9):日本語フォントのうち必要なシェイプのみをデータ化

LovyanGFXで画面描画(6)~(8) にて、内蔵フォントの紹介をしました。しかしながら IPAフォント/efont を使うと特に大きなフォントシェイプで表示したい場合、数千も自分の文字シェイプデータがプログラムに組み込まれてしまいます。
Flash 領域に制限のあるマイコンではなるべく削減したいところです。

そのような問題の解決について、https://github.com/lovyan03/LovyanGFX/blob/master/examples/HowToUse/3_fonts/3_fonts.ino
には

> // ※ やまねこ氏の [日本語フォントサブセットジェネレーター](https://github.com/yamamaya/lgfxFontSubsetGenerator)
//    を使用することで、必要な文字だけを含む小サイズのフォントデータを作成できます。

とあります。

内蔵フォントのうち、IPAフォントとefont については、このツールを使うことで表示に必要な文字だけのフォントシェイプをデータ化してプログラムに組み込むことができます。

# 日本語フォントサブセットジェネレータを使ってみる



https://github.com/yamamaya/lgfxFontSubsetGenerator

経由で

https://yamamaya.github.io/lgfxFontSubsetGenerator/

にアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/489eee59-5284-09b1-0dc5-9d8e7347cc6d.png)

以下のように入力して「生成」してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dc062825-b336-ac88-2b3d-3136bb2799cb.png)

「ダウンロード」すると myFont.cpp がダウンロードされました。

内容は以下のようになってました。

```
// このファイルは「日本語フォントサブセットジェネレーター for LovyanGFX」によって生成されました。
// https://github.com/yamamaya/lgfxFontSubsetGenerator
// フォントデータは、文字情報技術促進協議会によるIPAフォントから派生した、LovyanGFX内の日本語フォントに基づいています。
// LovyanGFX
// https://github.com/lovyan03/LovyanGFX
// IPAフォントのライセンスについては以下を参照してください。
// https://moji.or.jp/ipafont/license/
// このソースをスケッチに追加した後、フォントを利用するソースには、以下の定義を追加してください。
// extern const lgfx::U8g2font myFont;
// フォントを使用するときは、以下のようにsetFont関数で指定してください。
// lcd.setFont(&myFont);

#include <LovyanGFX.hpp>

const uint8_t myFont_data[533] = {
    0x4B, 0x00, 0x03, 0x02, 0x05, 0x05, 0x06, 0x06, 0x06, 0x14, 0x18, 0x00, 0xFB, 0x0F, 0xFC, 0x0F,
    0xFC, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x04, 0xFF, 0xFF, 0x30, 0x57, 0x21, 0x0C,
    0x96, 0x1F, 0x0D, 0x1D, 0xD3, 0x31, 0x1D, 0xD3, 0x31, 0x1D, 0xD3, 0x31, 0x1D, 0xD3, 0x31, 0x1D,
    0xD3, 0x31, 0x1D, 0xDA, 0x91, 0x21, 0x07, 0xA4, 0x58, 0x13, 0xD5, 0x41, 0x05, 0x30, 0x5F, 0x28,
    0x10, 0x8A, 0x20, 0x5D, 0x9D, 0xA0, 0x13, 0x72, 0x4A, 0xA2, 0x03, 0x0F, 0x39, 0xA6, 0x13, 0x72,
    0x4A, 0x36, 0x0C, 0xA1, 0x96, 0x63, 0x39, 0x41, 0x27, 0xE8, 0x84, 0x30, 0x87, 0xC4, 0x1C, 0x8A,
    0x73, 0x40, 0x07, 0x0E, 0x01, 0x30, 0x6E, 0x27, 0xD0, 0x89, 0x20, 0xDD, 0x61, 0xC8, 0x81, 0x29,
    0x1A, 0x35, 0x51, 0x12, 0xD5, 0x28, 0x55, 0x87, 0x34, 0x1E, 0xD2, 0x78, 0x95, 0xD7, 0x1C, 0x18,
    0x32, 0x1D, 0x18, 0xB2, 0x1C, 0x90, 0x14, 0x59, 0x3C, 0xE4, 0xE0, 0x0A, 0x30, 0x7E, 0x26, 0x0E,
    0x8E, 0x20, 0x7D, 0x20, 0x87, 0x73, 0xB8, 0x3A, 0x7C, 0xD0, 0xD1, 0x1C, 0xCE, 0x81, 0x70, 0x18,
    0xB2, 0x61, 0x87, 0x73, 0x38, 0x47, 0x86, 0x1D, 0xD0, 0x86, 0xB4, 0xB2, 0x89, 0xD9, 0x34, 0xA8,
    0x09, 0x00, 0x30, 0x92, 0x2A, 0x2E, 0x8E, 0x1F, 0x5D, 0x1D, 0xCD, 0xE1, 0x48, 0x1C, 0x0E, 0x39,
    0x92, 0xA3, 0x3A, 0xA8, 0xEC, 0xC8, 0xA4, 0x29, 0xEA, 0x20, 0xA5, 0xA3, 0x36, 0xE4, 0x90, 0x94,
    0x23, 0x5A, 0x8E, 0xE8, 0x68, 0x0E, 0xEB, 0x40, 0x3C, 0x0C, 0x0A, 0x00, 0x51, 0xFA, 0x28, 0x30,
    0x8A, 0x1F, 0x7D, 0x40, 0x27, 0xE8, 0x88, 0x68, 0x12, 0x4D, 0xA2, 0x49, 0x34, 0x89, 0xA6, 0xE1,
    0x41, 0x12, 0xED, 0x88, 0x0E, 0xA8, 0xEA, 0x90, 0xAA, 0x43, 0xAA, 0x0E, 0xA9, 0x3A, 0xA4, 0xEA,
    0xF0, 0x83, 0x8E, 0x0A, 0x58, 0xCA, 0x3C, 0x52, 0x86, 0x1F, 0x7D, 0x30, 0x47, 0x74, 0x20, 0x47,
    0xA4, 0xE1, 0x49, 0x07, 0x72, 0x44, 0x07, 0xE2, 0x61, 0x19, 0x0E, 0x99, 0x16, 0x25, 0x36, 0x2D,
    0x4A, 0x6C, 0xDA, 0x70, 0xC8, 0x74, 0x20, 0x47, 0x94, 0xE1, 0x21, 0x52, 0x95, 0x2C, 0x1B, 0x22,
    0x8B, 0x32, 0x44, 0x43, 0x36, 0x49, 0x53, 0xA6, 0xA3, 0x89, 0xB2, 0x03, 0x47, 0x39, 0x07, 0x01,
    0x5B, 0x50, 0x26, 0x12, 0x86, 0x1F, 0xAD, 0xE1, 0x41, 0x27, 0xEC, 0x04, 0x9D, 0xB0, 0x13, 0x74,
    0x92, 0x4E, 0xD2, 0x91, 0xE1, 0x77, 0x44, 0x27, 0xE9, 0x24, 0x9D, 0xA4, 0x93, 0x74, 0x92, 0x0E,
    0x47, 0x3A, 0x3C, 0xE8, 0x08, 0x00, 0x5D, 0x29, 0x3A, 0x51, 0x86, 0x1E, 0xAD, 0x54, 0xCD, 0x52,
    0x35, 0x4B, 0xD5, 0x6C, 0x78, 0xD0, 0xC9, 0xC3, 0x34, 0x0C, 0x51, 0x18, 0xA5, 0x51, 0x18, 0xA5,
    0x51, 0x18, 0xA5, 0xD1, 0x30, 0x0D, 0x43, 0x14, 0x46, 0x69, 0x14, 0x46, 0x69, 0x34, 0x4C, 0xC3,
    0x90, 0x88, 0x51, 0x9A, 0x88, 0x51, 0x9A, 0xA4, 0x51, 0x3A, 0x55, 0xA4, 0x21, 0xDD, 0x21, 0x00,
    0x69, 0x1C, 0x36, 0x32, 0x86, 0x1F, 0xBD, 0x78, 0x47, 0xE2, 0x24, 0x47, 0x52, 0x29, 0x07, 0x42,
    0xD3, 0xB0, 0x0C, 0x87, 0x4C, 0xD2, 0x42, 0x49, 0x0A, 0x73, 0x64, 0x1A, 0x6E, 0x83, 0x92, 0xB5,
    0xB4, 0x95, 0x94, 0x6C, 0x38, 0xD5, 0x32, 0xA9, 0x79, 0xC8, 0x81, 0x38, 0xCA, 0x81, 0x54, 0x53,
    0xB3, 0x75, 0x8B, 0x74, 0x24, 0x01, 0x96, 0x7D, 0x3D, 0x51, 0x8A, 0x1E, 0x8D, 0x41, 0x1A, 0x06,
    0x29, 0x92, 0xE2, 0xA8, 0x16, 0x47, 0xB5, 0x61, 0x90, 0x12, 0x2D, 0x8E, 0x92, 0x70, 0x18, 0xA4,
    0x44, 0x87, 0xA3, 0x1C, 0x8E, 0x86, 0x4F, 0x5A, 0x8E, 0x64, 0xD1, 0x70, 0x89, 0x14, 0x97, 0x64,
    0x48, 0xA4, 0x96, 0x4C, 0x52, 0xA4, 0x24, 0x96, 0xB2, 0x24, 0x95, 0xB4, 0x24, 0x8D, 0x34, 0x25,
    0x07, 0x27, 0x00, 0x00, 0x00
};
extern const lgfx::U8g2font myFont = { myFont_data };

// 収録されている文字の一覧
// U+3057 "し", U+305F "た", U+306E "の", U+307E "ま", U+3092 "を", U+51FA "出", U+58CA "壊", U+5B50 "子"
// U+5D29 "崩", U+691C "検", U+967D "陽"
```


# myFont.cpp を利用する

先程の myFont.cpp を、スケッチと同じ場所に置き、以下のように #define を追加しておきます。

```
// フォントを使用するときは、以下のようにsetFont関数で指定してください。
// lcd.setFont(&myFont);
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
```

そのうえで、以下のようなスケッチを作成しました。

```
#define LGFX_USE_V1
#include "arduinolib_for_PC.hpp"
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>


static LGFX display ( 256,128,2 );
static LGFX_Sprite sprite(&display);
extern const lgfx::U8g2font myFont;
const uint8_t myFont40_data[1]={0};
char str[]=  "陽子の崩壊を検出しました";

void setup() {
  display.init();
  display.setSwapBytes(true); 
  sprite.createSprite(256,30);
}

void loop(){
  int strwidth = display.textWidth(str);
  sprite.clear();
  sprite.fillRect(0,0,256,30,TFT_RED);
  sprite.setTextDatum( textdatum_t::middle_center   );
  sprite.setTextSize(1);
  sprite.setFont(&myFont);
  sprite.setTextColor(TFT_YELLOW);
  sprite.setCursor((sprite.width()-strwidth)/2,(sprite.height()-20)/2);
  // sprite.setCursor(strwidth/2,sprite.height()/2);
  // sprite.printf(str);
  sprite.drawString(str,  sprite.width() / 2,  sprite.height() / 2);
  sprite.pushSprite(0,49);
  delay(5000);
}



```

コンパイルオプションに myFont.cpp も一緒に指定してビルドします。
VSCode を使っている場合は tasks.json に追記すればいいかな?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c6bce1d8-a60c-baa7-f702-7d62f08129ec.png)