MonochromSoft

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== ラベルを表示する ======

まずは環境に依存しないようにフォントをアセットに登録します。（参考：[[https://qiita.com/YFukuyama/items/052454c6cbcf91881f77|phina.js で Webフォント を使ってみるよ！ - Qiita]]）

ここではGoogleのNoto Fontを使用しています。

<code>
const ASSETS = {
    font: {
        'noto': './fonts/NotoSansCJKjp-Regular.ttf',
    },
};

phina.main(function() {

    var app = GameApp({
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        startLabel: 'main',
        assets: ASSETS,
    });
</code>

あとはフォントを指定してラベルを作成するだけですが、背景色を塗りつぶすと文字に対して塗りつぶす範囲が広いのでRectangleShapeを作ってその上に乗せることにしました。もしかすると、もっと良い方法があるかもしれません。（参考：[[https://qiita.com/alkn203/items/7f2c607eb4d6e07bfb6c|[phina.js-Tips-027] ラベルのフォントを指定する - Qiita]]）

<code>
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);
</code>

あとはupdateとかでtextを変更すれば、表示内容を更新することができます。

<code>
this.scoreLabel.text = 'SCORE: ' + ('000000' + this.score).slice(-6);
</code>

MonochromSoft

ユーザ用ツール

サイト用ツール

ページ用ツール