LovyanGFX入門 その3 日本語フォント描画系

2020.10.13

概要

LovyanGFX入門 その2 フォント描画系
概要前回は基本描画系を調べましたが、今回はフォント系です。このへんは中に入っているスケッチ例を見れば詳しく書いてあるのですが、個人的におすすめする方法を中心に書いてあります。上記にまとめるときに使ったデータがあります。フォント描画系の概要フ...
lang-ship.com
2020.10.06

前回は普通のフォント描画系を紹介しましたが、日本語フォントを利用するためには別途efontライブラリが必要でした。最近U8g2ライブラリのフォント形式にも対応し、日本語フォントが内部に組み込まれました。

U8g2ライブラリとは？

モノクロLCD用のライブラリでArduino UNOなどで動く軽量ライブラリです。特徴として、ビルドインのフォントが充実しており、変換ツールなども充実しています。フォントは独自形式で保存されており、プロポーショナルな横幅可変長フォントなどもきれいに表現可能です。データも圧縮されていますので、容量と使い勝手のバランスが取れている感じでした。

U8g2形式の日本語フォントを作ってみた

U8g2ライブラリではefontを収録してありましたが、より大きいフォントがほしかったのでIPAフォントをU8g2フォント形式に変換してみました。

上記が作ったファイルなのですが、LovyanGFXでも動いたので公式に取り込んでもらえました。

収録文字

U8g2ライブラリ標準のjapanese3.mapという文字リストを作って作成しています。

上記に一覧を作成しました。全部で4639文字です。常用漢字＋αにしてはちょっと多い感じです。どうやら日本語学習サイトなどの、レベル別漢字一覧から持ってきたリストでちょっと日本人が作成した一覧とは違うところがありますね。ぱっと見、最後に入っている半角カナがありません。

利用フォント

上記のIPAフォントを利用させていただきました。厳密には「IPAexフォントおよびIPAフォント」です。

フォント名ファイル名特徴
IPAゴシックipag.ttf全文字固定長
IPAexゴシックipaexg.ttf英数可変長、日本語固定長
IPA明朝ipam.ttf全文字固定長
IPAex明朝ipaexm.ttf英数可変長、日本語固定長

特徴として、exとついているフォントは英数が横幅が可変長のプロポーショナルフォントです。日本語部分は無印とexでほとんど変わらないはずです。

フォントサイズ

縦幅ゴシック体固定長ゴシック体可変長明朝体固定長明朝体可変長
862,26259,51565,10858,391
1298,93698,164105,458100,825
16145,155146,772152,463148,829
20198,329200,111204,826202,252
24255,606254,188266,695261,517
28308,368310,420316,670310,885
32365,149366,760369,462364,164
36429,727428,300431,636422,011
40490,222491,290500,545492,663

フォントは縦幅別に8から4区切りで40までのサイズがあります。実際に描画で利用したフォントのみフラッシュに組み込まれますので、未使用であればファイルサイズは増えません。

逆に、サイズ違いや書体違いのものを複数利用すると、利用したフォント分フラッシュの利用量が増えてしまうので注意してください。

フォント書体の使い分け

おすすめはゴシックの可変長フォントです。明朝もいいのですが、小さい文字だと潰れてしまうので、ゴシックのほうがいいかな。。。

可変長か、固定長かですが英数を混在させる文字を表示させる場合には可変長のほうがきれいに見えると思います。ただし、数値が変化する場合などは固定長じゃないときれいに表示できないので、固定長が必要な場合には、別の英数だけの小さいフォントでの描画がいいと思います。

ゴシックの固定長と可変長の両方を読み込んでも、日本語部分は同じで先頭の英数部分しか差がありませんので、容量が無駄になってしまいます。

出力見本

#include "M5Lite.h"
void setup() {
  M5Lite.begin();
  M5Lite.Lcd.clear();
  M5Lite.Lcd.setCursor(100,0);
  M5Lite.Lcd.setFont(&lgfxJapanMincho_24); M5Lite.Lcd.print("lgfxJapanMincho\n");
  M5Lite.Lcd.setCursor(0,0);
  M5Lite.Lcd.setFont(&lgfxJapanMincho_8);  M5Lite.Lcd.print("縦 8日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_12); M5Lite.Lcd.print("縦12日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_16); M5Lite.Lcd.print("縦16日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_20); M5Lite.Lcd.print("縦20日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_24); M5Lite.Lcd.print("縦24日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_28); M5Lite.Lcd.print("縦28日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_32); M5Lite.Lcd.print("縦32日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_36); M5Lite.Lcd.print("縦36日本語\n");
  M5Lite.Lcd.setFont(&lgfxJapanMincho_40); M5Lite.Lcd.print("縦40日本語\n");
}
void loop() {
  M5Lite.Ex.delay(100);
}

こんな感じのスケッチで画面に出力し、M5Liteのスクリーンショットで画像に保存してみました。ちなみにP明朝の全サイズを読み込んでいるので、特殊な設定に変更しアプリサイズを3MBまで拡張しないと実行できません！

lgfxJapanMinchoP

24ドット以上じゃないと明朝はきついかもしれません。できれば32とか大きめを使いたいですね。

lgfxJapanMincho

固定長です。ちなみに上の可変長より固定長の方が横幅が短いですね。iとかはプロポーショナルだと横幅短いですがMとかは広いんですね。

lgfxJapanGothicP

ゴシックです。こちらのほうが安定していますが、16とかだとちょっと潰れてしまいます。16だとefontの方がきれいかもしれません。あっちはビットマップフォントなので、ドットを打ってデザインしているので、文字潰れが少ないです。

lgfxJapanGothic

固定長です。このフォントだけ0に斜め線が入っていますね、、、

複数サイズの使い分け

フォントは等倍で使ったほうがきれいなのですが、フラッシュの容量との兼ね合いがあるので拡大縮小しての描画も可能です。

こんな感じになります。等倍以外は若干画質が落ちますが、複数サイズが容量的に厳しかったらsetTextSize(0.86)みたいに指定して、大きさを変更することが可能です。

→の矢印が収録されていない、、、①とかもないな。この辺は調整して追加したほうがいいかもしれません。。。

フォントの指定方法

フォント名書体縦幅フラッシュ容量
lgfxJapanMincho_8IPA明朝(全文字固定長)865,108
lgfxJapanMincho_12IPA明朝(全文字固定長)12105,458
lgfxJapanMincho_16IPA明朝(全文字固定長)16152,463
lgfxJapanMincho_20IPA明朝(全文字固定長)20204,826
lgfxJapanMincho_24IPA明朝(全文字固定長)24266,695
lgfxJapanMincho_28IPA明朝(全文字固定長)28316,670
lgfxJapanMincho_32IPA明朝(全文字固定長)32369,462
lgfxJapanMincho_36IPA明朝(全文字固定長)36431,636
lgfxJapanMincho_40IPA明朝(全文字固定長)40500,545
lgfxJapanMinchoP_8IPAex明朝(英数可変長)858,391
lgfxJapanMinchoP_12IPAex明朝(英数可変長)12100,825
lgfxJapanMinchoP_16IPAex明朝(英数可変長)16148,829
lgfxJapanMinchoP_20IPAex明朝(英数可変長)20202,252
lgfxJapanMinchoP_24IPAex明朝(英数可変長)24261,517
lgfxJapanMinchoP_28IPAex明朝(英数可変長)28310,885
lgfxJapanMinchoP_32IPAex明朝(英数可変長)32364,164
lgfxJapanMinchoP_36IPAex明朝(英数可変長)36422,011
lgfxJapanMinchoP_40IPAex明朝(英数可変長)40492,663
lgfxJapanGothic_8IPAゴシック(全文字固定長)862,262
lgfxJapanGothic_12IPAゴシック(全文字固定長)1298,936
lgfxJapanGothic_16IPAゴシック(全文字固定長)16145,155
lgfxJapanGothic_20IPAゴシック(全文字固定長)20198,329
lgfxJapanGothic_24IPAゴシック(全文字固定長)24255,606
lgfxJapanGothic_28IPAゴシック(全文字固定長)28308,368
lgfxJapanGothic_32IPAゴシック(全文字固定長)32365,149
lgfxJapanGothic_36IPAゴシック(全文字固定長)36429,727
lgfxJapanGothic_40IPAゴシック(全文字固定長)40490,222
lgfxJapanGothicP_8IPAexゴシック(英数可変長)859,515
lgfxJapanGothicP_12IPAexゴシック(英数可変長)1298,164
lgfxJapanGothicP_16IPAexゴシック(英数可変長)16146,772
lgfxJapanGothicP_20IPAexゴシック(英数可変長)20200,111
lgfxJapanGothicP_24IPAexゴシック(英数可変長)24254,188
lgfxJapanGothicP_28IPAexゴシック(英数可変長)28310,420
lgfxJapanGothicP_32IPAexゴシック(英数可変長)32366,760
lgfxJapanGothicP_36IPAexゴシック(英数可変長)36428,300
lgfxJapanGothicP_40IPAexゴシック(英数可変長)40491,290

一番左のフォント名をsetFont(&lgfxJapanMincho_24)みたいに指定します。

まとめ

ビルドインで日本語が使えるのはやっぱり便利ですね。反面小さいサイズはefontの方が品質がいい気がするので、efontもU8g2形式に変換して取り込んでもらったほうがいいのかしら？

あとは、記号とかが文字をもう少し追加したほうが便利な気がする。。。

続編

LovyanGFX入門 その4 描画の仕組み
概要前回は日本語フォントでしたが、今回はLovyanGFXを使う上で知っておいた方がよい描画周りの仕組みを解説したいと思います。LovyanGFXは複数の環境で動きますが、今回はESP32に特化した内容になります。概要説明なので、適当に端折...
lang-ship.com
2020.10.21

コメント