1 フォントを描く
1.1 8×16ドットのフォント
1.1.1 8×16ドットとは
文字を表す横×縦の点数を表現しています。
なぜ8や16が出てくるかと言うと。
コンピューターのデータ処理単位である「1バイト(8ビット)」と技術的な親和性が高く、かつアルファベットや数字を読みやすく表現できる最小単位だったから。
なお漢字は横が8では表現しにくいため、8の倍数である16が最小点になっている。 右図は数字の 9 を拡大したものです。
なぜ8や16が出てくるかと言うと。
コンピューターのデータ処理単位である「1バイト(8ビット)」と技術的な親和性が高く、かつアルファベットや数字を読みやすく表現できる最小単位だったから。
なお漢字は横が8では表現しにくいため、8の倍数である16が最小点になっている。 右図は数字の 9 を拡大したものです。
1.1.2 ドットとピクセル
これからピクセルと言う言葉が出てくるので、簡単にドットと合わせ説明する。
ピクセルとは、デジタル画像の最小単位(色情報を持つ画素)。
ドットとは、印刷物やモニターにおける物理的な点の粒(物理的な最小単位)。
一般的に、画像データ上では「1ピクセル=1ドット」として扱われます。
ピクセルとは、デジタル画像の最小単位(色情報を持つ画素)。
ドットとは、印刷物やモニターにおける物理的な点の粒(物理的な最小単位)。
一般的に、画像データ上では「1ピクセル=1ドット」として扱われます。
1.1.3 LCDのメモリーマップ
LCD内部では1ドットの色表現をRGBで表現し、その色情報は1ピクセルあたり16bit(2Byte)で表現しています。
このため、1.1で説明したフォントの場合は、8×16(ドット)×2※(ピクセル) = 256(Byte)のメモリーを使用している。
※Byte数は、1Byte=8bitなので
1ピクセルは 16 / 8 = 2になる。
なおピクセル情報の
黒は0x0000、緑は0x07E0です。
また表中のX軸、Y軸に記載の項目はメモリーの相対アドレスを示す。
このため、1.1で説明したフォントの場合は、8×16(ドット)×2※(ピクセル) = 256(Byte)のメモリーを使用している。
※Byte数は、1Byte=8bitなので
1ピクセルは 16 / 8 = 2になる。
なおピクセル情報の
黒は0x0000、緑は0x07E0です。
また表中のX軸、Y軸に記載の項目はメモリーの相対アドレスを示す。
1.1.4 プログラム上の文字データ
文字データはドットの集まりで通常1文字は1つのカラーで表現できるため、ピクセルデータからドットデータになるため容量は以下の様になる
8×16(ドット) / 8 = 16(Byte)にできる。
ちなみに先に説明で表示させた『9』は 右図の様に表され
データの並びは0x00,0x00,0x00,0x18,・・・・・となる
なおプログラムではこの文字データにコードを付けて文字データを呼び出すようにしており、簡単なものとして英数字を表示させる場合昔から使用している アスキーコードを使用して1(Byte)で『0x39』と表記され文字データと対応させているものもある。
受信機プログラムでは不要なアスキーコードが有るため、アスキーコードは使用していない。
1.1.5 描画時間
SYSCLK_FREQ_96MHz_HSI
関数 Lcd_ShowString (10, 10, Green, Black, "9");で
1文字表示に必要な時間は
360(us)
プログラムについては後で記載する。
関数 Lcd_ShowString (10, 10, Green, Black, "9");で
1文字表示に必要な時間は
360(us)
プログラムについては後で記載する。
1.2 その他ドットのフォントと比較
1.2.1 比較概要
表示する文字は『9』で実施する。
(1) 8x16 :比較元の横8ドット、縦16ドットのフォントデータで表示させる場合
使用関数名 Lcd_ShowString (10, 10, Green, Black, "9");
(2) 2倍 :8x16のデータを×2して16x32のフォントを表示させる場合
使用関数名 Lcd_ShowString_Resized (26, 10, White, Black, "9", 2);
(3) 16x32:横16ドット、縦32ドットのフォントデータで表示させる場合
使用関数名 Lcd_16Char(26,42, Green, Black);
(4) 3倍 :8x16のデータを×3して24x32のフォントを表示させる場合
使用関数名 Lcd_ShowString_Resized (48, 10, White, Black, "9", 3);
(5) 24x48:横24ドット、縦48ドットのフォントデータで表示させる場合
使用関数名 Lcd_24Char(48,58, Green, Black);
(6) 32x64:横32ドット、縦64ドットのフォントデータで表示させる場合
使用関数名 Lcd_32Char(96,10, Green, Black);
(1) 8x16 :比較元の横8ドット、縦16ドットのフォントデータで表示させる場合
使用関数名 Lcd_ShowString (10, 10, Green, Black, "9");
(2) 2倍 :8x16のデータを×2して16x32のフォントを表示させる場合
使用関数名 Lcd_ShowString_Resized (26, 10, White, Black, "9", 2);
(3) 16x32:横16ドット、縦32ドットのフォントデータで表示させる場合
使用関数名 Lcd_16Char(26,42, Green, Black);
(4) 3倍 :8x16のデータを×3して24x32のフォントを表示させる場合
使用関数名 Lcd_ShowString_Resized (48, 10, White, Black, "9", 3);
(5) 24x48:横24ドット、縦48ドットのフォントデータで表示させる場合
使用関数名 Lcd_24Char(48,58, Green, Black);
(6) 32x64:横32ドット、縦64ドットのフォントデータで表示させる場合
使用関数名 Lcd_32Char(96,10, Green, Black);
1.2.2 比較表
| 比較概要No | (1) | (2) | (3) | (4) | (5) | (6) |
|---|---|---|---|---|---|---|
| 8x16 | 2倍 | 16x32 | 3倍 | 24x48 | 32x64 | |
| LCDメモリ量(Byte) | 256 | 1,024 | 1,024 | 2,304 | 2,304 | 4,096 |
| MCUメモリ量(Byte) | 16 | 16 | 64 | 16 | 144 | 256 |
| 描画時間(ms) | 0.36 | 1.36 | 1.39 | 3.11 | 2.98 | 5.5 |
1.2.3 LCD表示状況
左から(1)(2)(4)(6)
(3)(5)

(2)(4)では(1)のフォントデータを2や3倍する方法のため文字が線ではなくドットになっています。
(3)(5)(6)は、(2)(4)より線に近いですが、なめらかな線ではありません。
これをどうするか次で説明します。
(3)(5)

(2)(4)では(1)のフォントデータを2や3倍する方法のため文字が線ではなくドットになっています。
(3)(5)(6)は、(2)(4)より線に近いですが、なめらかな線ではありません。
これをどうするか次で説明します。
1.3 フォントをなめらかに
例として前項の(5)24×48ドットのフォントで確認していく。
1.3.1 なめらかにするには
アンチエイリアシングと言う手法を使用します。
アンチエイリアシング(Anti-aliasing)とは、コンピュータ上の画像や文字に現れる「ジャギー」と呼ばれる階段状のギザギザを、境界周辺を中間色で埋めることで滑らかに見せる技術です。
解像度不足による輪郭のガタつきを軽減し、自然な見た目にするため、PCゲーム、3Dグラフィックス、動画編集、印刷などで広く使用されます。
コンピュータでこのような処理をするわけですが、今回はMCUを使用するので、アンチエイリアシング処理したデータを文字データとして使用したいと思います。
アンチエイリアシング(Anti-aliasing)とは、コンピュータ上の画像や文字に現れる「ジャギー」と呼ばれる階段状のギザギザを、境界周辺を中間色で埋めることで滑らかに見せる技術です。
解像度不足による輪郭のガタつきを軽減し、自然な見た目にするため、PCゲーム、3Dグラフィックス、動画編集、印刷などで広く使用されます。
コンピュータでこのような処理をするわけですが、今回はMCUを使用するので、アンチエイリアシング処理したデータを文字データとして使用したいと思います。
1.3.2 文字データ量
24×48の単色データをアンチエイリアシング処理したデータ
プログラム上の文字データは 1.1.3 で説明したとおり、文字データが単色であることからメモリを省力化するため、ピクセルデータではなくドットの有無データになっています。
それがアンチエイリアシングにより単色でなくなり、多くのカラー情報を入れなければならないため、そのままではLCDのメモリーと同じ容量が必要となり、24×48では1文字につき2.3(KByte)必要となります。
文字データとしては
(1)8×16dドット文字 16×94種類= 数字+幾つかの英文字を24×48で使用すると 2.3(KByte)×20(予定) = 46(KByte)必要となります。
また数字だけになりますが、32×64も使用するとなると 4(KByte)×10 = 40(KByte)で合わせて86(KByte)必要になります。
今回使用する MCU の CH32V203C8T6 では Flash memory が64(KByte)で不足してしまいます。
文字データをSDカードに入れることも考えられますが、受信機の画面では0.1(s)以下の周期で画面の更新をするため間に合わないと考えられるので、文字データの縮小化を考える必要があります。
それがアンチエイリアシングにより単色でなくなり、多くのカラー情報を入れなければならないため、そのままではLCDのメモリーと同じ容量が必要となり、24×48では1文字につき2.3(KByte)必要となります。
文字データとしては
(1)8×16dドット文字 16×94種類= 数字+幾つかの英文字を24×48で使用すると 2.3(KByte)×20(予定) = 46(KByte)必要となります。
また数字だけになりますが、32×64も使用するとなると 4(KByte)×10 = 40(KByte)で合わせて86(KByte)必要になります。
今回使用する MCU の CH32V203C8T6 では Flash memory が64(KByte)で不足してしまいます。
文字データをSDカードに入れることも考えられますが、受信機の画面では0.1(s)以下の周期で画面の更新をするため間に合わないと考えられるので、文字データの縮小化を考える必要があります。
1.3.3 文字データ量を減らす
今回受信で使用する大きな文字は緑又は黄などの単色を用いるため、単純に4段階にしてもアンチエイリアシングの効果があるか確認する。
例えばファイル属性 BMP を加工するとして、緑色の文字であれば、下表の様に分けることにする。
(1)4段階の説明
(2)今までの文字データのおさらい
比較データ凡例説明
① 1.2.1(5)のフォント
② アンチエイリアシング処理した色調を4段階に減らしたもの
③ アンチエイリアシング処理したピクセルデータRGB16bitのもの
(1)4段階の説明
| 段階 | データ値 | R | G | B | 参照カラーテーブル |
|---|---|---|---|---|---|
| 1 | 0x00 | 0 | 0 | 0 | 0x0000 |
| 0 | 43 | 0 | |||
| 2 | 0x01 | 0x02A0 | |||
| 0 | 85 | 0 | |||
| 0 | 128 | 0 | |||
| 3 | 0x02 | 0x0540 | |||
| 0 | 170 | 0 | |||
| 0 | 213 | 0 | |||
| 4 | 0x03 | 0x07E0 | |||
| 0 | 255 | 0 |
(2)今までの文字データのおさらい

比較データ凡例説明
① 1.2.1(5)のフォント
② アンチエイリアシング処理した色調を4段階に減らしたもの
③ アンチエイリアシング処理したピクセルデータRGB16bitのもの
1.3.4 描画時間と画質比較確認
(1)描画時間
描画時間の呼び出し関数
①Lcd_24Char(48,10, Green, Black);
③Lcd_C24char(96,10);
②Lcd_C24CopChar(144,10);
(2)画質比較(LCD表示状況)
左から ①、③、②です。
・①に比べ③②の文字はなめらかになっている。
・②はプログラムメモリ量が③と比べると1/8に削減でき、①の2倍しか増加しない。
以上から受信機プログラムでは②の方法を採用したい。
| 比較内容 | ① | ② | ③ |
|---|---|---|---|
| 描画時間(ms) | 3.11 | 3.09 | 2.95 |
①Lcd_24Char(48,10, Green, Black);
③Lcd_C24char(96,10);
②Lcd_C24CopChar(144,10);
(2)画質比較(LCD表示状況)
左から ①、③、②です。・①に比べ③②の文字はなめらかになっている。
・②はプログラムメモリ量が③と比べると1/8に削減でき、①の2倍しか増加しない。
以上から受信機プログラムでは②の方法を採用したい。
2 プログラム
MCUはCH32V203C8T6 で MounRiver Studio Ⅱを使用してプログラムしています。
