PixiJSで文字を表示する方法

投稿日：2022年1月18日

Table of Contents

確認環境

PixiJS v6.2.1

コード

文字を表示する

const app = new PIXI.Application({ backgroundColor: 0xffffff });
document.body.appendChild(app.view);
 
const text = new PIXI.Text('Hello World!');
app.stage.addChild(text);

スタイルを設定する

Text()の第二引数にスタイル設定オブジェクトを渡すことで、スタイルを設定可能です。

const style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fill: ['#000000'],
});
const text = new PIXI.Text('Hello World!', style);

キー	設定内容
fontFamily	フォントファミリ
fontSize	フォントサイズ
fontStyle	‘normal’, ‘italic’または’oblique’を指定します。
fontWeight	フォントの太さ ‘normal’, ‘bold’, ‘bolder’, ‘lighter’または、’100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, 800′, ‘900’を指定します。
fill	文字色 black等の文字色名、または#000000等のカラーコードで指定します。配列の要素に複数の色を追加するとグラデーションになります。

位置を設定する

text.x = 0;
text.y = 0;

リンク

・PixiJS API Documentation
PIXI.Text
https://pixijs.download/release/docs/PIXI.Text.html
PIXI.TextStyle
https://pixijs.download/release/docs/PIXI.TextStyle.html