ユーザ用ツール

サイト用ツール


phinajs:label

ラベルを表示する

まずは環境に依存しないようにフォントをアセットに登録します。(参考: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);
phinajs/label.txt · 最終更新: 2017/11/21 00:14 by kaneda