まずは環境に依存しないようにフォントをアセットに登録します。(参考:phina.js で Webフォント を使ってみるよ! - Qiita)
ここではGoogleのNoto Fontを使用しています。
const ASSETS = { font: { 'noto': './fonts/NotoSansCJKjp-Regular.ttf', }, }; phina.main(function() { var app = GameApp({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, startLabel: 'main', assets: ASSETS, });
あとはフォントを指定してラベルを作成するだけですが、背景色を塗りつぶすと文字に対して塗りつぶす範囲が広いのでRectangleShapeを作ってその上に乗せることにしました。もしかすると、もっと良い方法があるかもしれません。(参考:[phina.js-Tips-027] ラベルのフォントを指定する - Qiita)
this.scoreLabelBase = RectangleShape({ height: 22, width: 148, fill: BACK_COLOR, strokeWidth: 0, x: Math.round(this.gridX.center()), y: 14, }).addChildTo(this); this.scoreLabel = Label({ text: 'SCORE: 000000', fontSize: 20, fill: FORE_COLOR, fontFamily: 'Noto', }).addChildTo(this.scoreLabelBase);
あとはupdateとかでtextを変更すれば、表示内容を更新することができます。
this.scoreLabel.text = 'SCORE: ' + ('000000' + this.score).slice(-6);