Text

phaser.io
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/text
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

TextゲームオブジェクトはCanvas内に生成してから、canvasのfillTextやstrokeTextコマンドで文字を描画します。renderのループの間、テキストはCanvasに存在して、transformなどのエフェクトを加えてrendererで描画されます。

image

BitmapTextと異なり、フォントのためにテクスチャーは用いず、ブラウザーのフォントの制御や描画機能を利用します。

TextオブジェクトはTextStyleクラスのインスタンスを保持しています。このクラスはスタイルや表示機能を担当します。

  • font
  • backgroundColor
  • fill
  • stroke
  • strokeThickness
  • shadowOffsetX
  • shadowOffsetY
  • shadowColor
  • shadowBlur
  • shadowStroke
  • shadowFill
  • align
  • maxLines
  • fixedWidth
  • fixedHeight

また、configオブジェクトでTextの寸法を渡すことで、canvasを作成せずに内部的にテキストの寸法を算出することができます。

 

すでにPhaser3には包括的なTextオブジェクトが実装されています。

Examples

３つの異なるTextオブジェクトの作成例です。

//  スタイルを設定しないデフォルトのテキストの設定です
text = this.add.text(100, 100, 'Phaser');

//  コンストラクターにスタイルを渡す例です
var text2 = this.add.text(100, 200, 'Phaser', { font: '64px Arial', fill: '#00ff00' });

//  以下のようにメソッドチェーンにすることもできます
var text3 = this.add.text(100, 300, 'Phaser').setFont('64px Arial').setFill('#ffff00');

configオブジェクトによるTextの生成例:

var config1 = {
    x: 100,
    y: 100,
    text: 'Phaser 3\nCreate from config',
    style: {
        font: '64px Arial',
        fill: '#ffffff',
        align: 'center',
        backgroundColor: '#ff00ff'
    }
};

this.make.text(config1);

一覧へ戻る

Print Friendly, PDF & Email