====== ラベルを表示する ======
まずは環境に依存しないようにフォントをアセットに登録します。(参考:[[https://qiita.com/YFukuyama/items/052454c6cbcf91881f77|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を作ってその上に乗せることにしました。もしかすると、もっと良い方法があるかもしれません。(参考:[[https://qiita.com/alkn203/items/7f2c607eb4d6e07bfb6c|[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);