Pyxel ビットマップフォントがずれる場合の対応

Python 3 Pyxel

Pyxelの日本語表示の上下位置がずれる場合の対応

　Pyxelでサンプルフォント以外のビットマップフォントを読み込ませたときに，文字位置が上の方にずれている場合の対策です。

　【元の記事】　kinutani.hateblo.jp

　
　＜今回読み込ませたフォント＞
　Little Limit 門真 なむ さんが公開されている日本語ビットマップフォント
　　8×8 ドット日本語フォント「美咲フォント」
　　8×12 ドット日本語フォント「k8x12」

　

上にずれる例

　美咲フォントを表示したところ，小さな文字が上にずれて描画されました。
　

　フォントに合わせて BDFRenderer を改造してみます。


＜2023-03-31追記＞
対策内容はこちらの記事を確認してください。
kinutani.hateblo.jp



以下，本記事の対策は不十分でしたので削除して訂正します。


　

BDFRenderer の改造

　サンプルの 13_bitmap_font.py で例として載っている BDFRenderer のファイル読み込みと文字描画の処理に文字の高さとオフセットの操作を追加します。

　【ファイル】　game/bdfrenderer.py at main · benkyoubox/game · GitHub
　【変更差分（※1 ※2）】　フォント上下位置ずれ対策 · benkyoubox/game@c330d42 · GitHub

　※1　メンバ変数の「self.fontboundingbox = None 」は「self.pixelsize = 10」に再修正しました。

　※2　bdfファイル内のどの項目を参照するのが正しいかは不明ですが，今回使用したフォントでは期待する動作になりました。

　＜2023-03-31　追記＞
　初めに掲載した変更内容は，サンプルのBDFRendererから表示位置が少し変わるなどの影響があります。
　改めてフォントのレンダリング位置を調べて改善したコードをGithubに上げてあります。
　縁取り時の文字間隔を見直したら記事で報告します。

　

対策結果

対策後の表示
　
　中央がそろったように見えます。

k8x12フォントでの比較

　対策前
　
　対策後
　

　上下位置はよさそうです。

　＜課題メモ＞
　xのオフセットは上手く扱えませんでした。全角空白や縦棒の幅が狭くなるので文字幅とオフセットを正しく使うか空白描画の処理を考えるか，検討が要るのかもしれません。空白は複数並べれば間隔は開くので運用で対処と今のところは考えます。　2023-03-30追記　bdfファイル側のデータを変更して空白表示をさせました。

　

表示に使ったテストプログラム
import pyxel
from font.bdfrenderer import BDFRenderer
pyxel.init(256, 256,display_scale=2,capture_scale=2)
pyxel.load("walk.pyxres")

bdf1 = BDFRenderer("font/misaki_gothic.bdf")
bdf2 = BDFRenderer("font/misaki_gothic_2nd.bdf")
bdf3 = BDFRenderer("font/misaki_mincho.bdf")

pyxel.cls(1)

str1 = "0123456789+-*/=\\ abcdefghijklmnopqrstuvwxyz"
str2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ'\"<>_"
str3 = "スライムの攻撃！ あなたは５のダメージを受けた。｜￥"

pyxel.text(10,2,"misaki_gothic.bdf",11)
bdf1.draw_text(10, 10, str1, 7)
bdf1.draw_text(10, 22, str2, 7)
bdf1.draw_text(10, 34, str3, 7)

pyxel.text(10,50,"misaki_gothic_2nd.bdf",11)
bdf2.draw_text(10, 60, str1, 7)
bdf2.draw_text(10, 72, str2, 7)
bdf2.draw_text(10, 84, str3, 7)

pyxel.text(10,100,"misaki_mincho.bdf",11)
bdf3.draw_text(10, 110, str1, 7)
bdf3.draw_text(10, 122, str2, 7)
bdf3.draw_text(10, 134, str3, 7)

pyxel.blt(10,150, 0, 0,0, 16,16,2)
pyxel.text(26,150,"Pyxel text.",7)
pyxel.show()


　

【参考】美咲フォントの空白文字データの変更

　bdfファイルを編集して半角空白と全角空白を追加してみました。（改変可能なライセンス
8×8 ドット日本語フォント「美咲フォント」）

＜半角空白変更前　misaki_gothic.bdf＞

STARTCHAR space
ENCODING 32
SWIDTH 500 0
DWIDTH 4 0
BBX 0 0 0 0
BITMAP
ENDCHAR

＜半角空白変更後　misaki_gothic_r.bdf＞

STARTCHAR space
ENCODING 32
SWIDTH 500 0
DWIDTH 4 0
BBX 4 6 0 0
BITMAP
00
00
00
00
00
00
ENDCHAR

＜全角空白変更前　misaki_gothic.bdf＞

STARTCHAR uni3000
ENCODING 12288
SWIDTH 1000 0
DWIDTH 8 0
BBX 0 0 0 0
BITMAP
ENDCHAR

＜全角空白変更後　misaki_gothic_r.bdf＞

ENDCHAR
STARTCHAR uni3000
ENCODING 12288
SWIDTH 1000 0
DWIDTH 8 0
BBX 8 8 0 0
BITMAP
00
00
00
00
00
00
00
00
ENDCHAR

テストプログラム

import pyxel
from font.bdfrenderer import BDFRenderer
pyxel.init(200, 64,display_scale=4,capture_scale=2)

bdf1 = BDFRenderer("font/misaki_gothic.bdf")
bdf2 = BDFRenderer("font/misaki_gothic_r.bdf")

pyxel.cls(0)
str = "ABC123Qq= 漢字＝　Ｑｑ１２３"

pyxel.rectb(10,8,180,10,1)
bdf1.draw_text(10,   8, "ORG: " + str, 7)

pyxel.rectb(10,40,180,10,1)
bdf2.draw_text(10,  40, "NEW: " + str, 7)

pyxel.show()

実行結果


　
　

関連記事

kinutani.hateblo.jp