[PIXI] PIXI.Text와 PIXI.TextStyle 사용 방법

기본 코드

const Application = PIXI.Application;
const app = new Application({
	width: window.innerWidth,
	height: window.innerHeight,
	transparent: false,
	antialias: true,
	backgroundColor: 0xAAAAAA
});
//배경색 변경
app.renderer.backgroundColor = 0x23395D;
//생성자가 아니더라도 이와 같이 크기 조정 가능
app.renderer.view.style.position = 'absolute';
document.body.appendChild(app.view);

const style = new PIXI.TextStyle({
	fontFamily: 'Montserrat',
	fontsize: 48,
	fill: 'deepskyblue',
	stroke: '#ffffff',
	strokeThickness: 4,
	dropShadow: true,
	dropShadowDistance: 10,
	dropShadowAngle: Math.PI / 2,
	dropShadowBlur: 4,
	dropShadowColor: '#000000'
});

const myText = new PIXI.Text('Hello PIXI!', style);

app.stage.addChild(myText);

뒤에 초록색은 도형그려둔 것이므로 무시!

여기서 직접 텍스트 변경

myText.text = 'Hi PIXI.js!!!';

이렇게 줄바꿈 속성도 추가가능

myText.style.wordWrap = true;
myText.style.wordWrapWidth = true;

 

전체 코드

const Application = PIXI.Application;
const app = new Application({
	width: window.innerWidth,
	height: window.innerHeight,
	transparent: false,
	antialias: true,
	backgroundColor: 0xAAAAAA
});

app.renderer.backgroundColor = 0x23395D;

app.renderer.view.style.position = 'absolute';
document.body.appendChild(app.view);

const graphics = PIXI.Graphics;
const rect = new graphics();
rect.beginFill(0x00ff00)
	.lineStyle(4, 0xFFEAA00, 1)
	.drawRect(40, 40, 200, 250)//x좌표 y좌표 너비 높이
	.endFill()
app.stage.addChild(rect);

const style = new PIXI.TextStyle({
	fontFamily: 'Montserrat',
	fontsize: 48,
	fill: 'deepskyblue',
	stroke: '#ffffff',
	strokeThickness: 4,
	dropShadow: true,
	dropShadowDistance: 10,
	dropShadowAngle: Math.PI / 2,
	dropShadowBlur: 4,
	dropShadowColor: '#000000'
});

const myText = new PIXI.Text('Hello PIXI!', style);
app.stage.addChild(myText);
myText.text = 'Hi PIXI.js!!!';
myText.style.wordWrap = true;
myText.style.wordWrapWidth = true;
myText.style.align = 'center';//가로정렬