M5Stack Basic と M5Stack Core2 のデフォルトフォントのサイズステップが分かったメモです。

M5Stack Basic と M5Stack Core2 で開発していると、文字や線を描画してレイアウトがすることがあるのですが、フォントサイズが実際どれくらいかが分からないと、思うようにレイアウトできなくて、こんな風に探り探り組んでいかなければならなくてつらいです。

ということで、このたび、デフォルトフォントのサイズステップがどれくらいかというのを検証してみました。その結果、おそらく 7 px ということが分かりました。サイズによってステップが違ったりしたらイヤだなって思ったんですが、均等でよかったです。

• M5.Lcd.setTextSize(1)
  • 7 px
• M5.Lcd.setTextSize(2)
  • 14 px
• M5.Lcd.setTextSize(3)
  • 21 px
• M5.Lcd.setTextSize(4)
  • 28 px
• M5.Lcd.setTextSize(5)
  • 35 px
• M5.Lcd.setTextSize(6)
  • 42 px
• M5.Lcd.setTextSize(7)
  • 49 px

この情報を元にして、M5Stack Basic と M5Stack Core2 それぞれで上からマージン 1 px →フォント描画→ マージン 1 px → drawFastHLine で横線描画 → （以降繰り返し） で1サイズずつ大きくして狙い通り 1 から 7 サイズまでズレずに描くことができました。

ソースコードも置いておきます。

#include <M5Core2.h>  // M5StackCore2
// #include <M5Stack.h>  // M5StackBasic

// 想定するフォントサイズ おそらく 7px
int fontSize1 = 7 * 1;
int fontSize2 = 7 * 2;
int fontSize3 = 7 * 3;
int fontSize4 = 7 * 4;
int fontSize5 = 7 * 5;
int fontSize6 = 7 * 6;
int fontSize7 = 7 * 7;

int baseLine = 0;  // ベースライン 0 pxスタート
int marginH1 = 1;  // マージン 1 px
int lineHeight = 1;  // 横線の太さ

const char* sampleText1 = "[ABCabc123/*~{}";
const char* sampleText2 = "[ABCabc";

void setup()
{
  M5.begin();

  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.clear(BLACK);

  // fontsize 1
  M5.Lcd.setTextSize(1);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("1");
  M5.Lcd.println(sampleText1);
  baseLine += fontSize1 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる

  // fontsize 2
  baseLine += marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(2);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("2");
  M5.Lcd.println(sampleText1);
  baseLine += fontSize2 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる

  // fontsize 3
  baseLine += marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(3);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("3");
  M5.Lcd.println(sampleText1);
  baseLine += fontSize3 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる

  // fontsize 4
  baseLine += + marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(4);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("4");
  M5.Lcd.println(sampleText2);
  baseLine += fontSize4 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる
  
  // fontsize 5
  baseLine += marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(5);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("5");
  M5.Lcd.println(sampleText2);
  baseLine += fontSize5 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる

  // fontsize 6
  baseLine += marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(6);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("6");
  M5.Lcd.println(sampleText2);
  baseLine += fontSize6 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる

  // fontsize 7
  baseLine += marginH1;  // マージンぶんベースラインを下げて文字を書く
  M5.Lcd.setTextSize(7);
  M5.Lcd.setCursor(0,baseLine);
  M5.Lcd.print("SIZECHK");
  baseLine += fontSize7 + marginH1;  // マージンぶん開いて横線を引く
  M5.Lcd.drawFastHLine(0, baseLine, 320, WHITE);
  baseLine += lineHeight;  // 線の太さぶんベースラインを下げる
  
}

void loop()
{
  M5.update();
}