👋

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

2020/11/23に公開

おま環かもしれませんが、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);

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

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

Discussion