Phaser3で日本語文字が欠ける問題の対処

3609 ワード
phaser tech テキストリンク

おま環かもしれませんが、Phaserで日本語文字列の出力をやると、文字が欠けます。

一応の対処方法としては、Paddingを指定してやることで回避できるようです。
上記の画像の出力コードは以下になります。

  this.add
    .text(100, 100, '普通にやると文字が見切れるぞ！三振', {
      fontSize: '32px',
    })
    .setSize(32);

  this.add
    .text(100, 200, 'setPaddingするとよさそう！三振', {
      fontSize: '32px',
    })
    .setPadding(4);

  this.add
    .text(100, 300, 'Padding-topのみ指定！三振', {
      fontSize: '32px',
    })
    .setPadding(0, 4, 0, 0);

三振は特に意味ないですが、
フォントがなんか変じゃね？→いや確実に変だわ！
と確信できた漢字なので採用しました。

（※もっと抜本的な対処方法ご存知でしたら教えて下さい。
フォントメトリクスの構成あたりが怪しいと思うんですが…🤔)

Vue アプリケーションを Docker コンテナにして外部に公開する
Prisma2を触ってみた(メモ)