Pixi.js 텍스트 렌더링

 

Pixi.js 는 화면에 글씨를 렌더링 할 수 있는 Text 클래스가 있다.

사용법은 어렵지 않다.

다만 예상과 다르게 동작하는 옵션들이 있긴 하다.

직접 코딩하면서 확인해 본다.

 

기본 코딩

PIXI.Text는 캔버스에 쉽게 텍스트를 드로잉 해주는 API이다.

사용법은 아래와 같이 new(텍스트, 스타일)로 생성할 수 있다.

스타일은 생략이 가능하다.

 

캔버스에 텍스트를 드로잉을 한 것 이기에 폰트가 아닌 이미지이다.

fontFamily가 적용되면 CSS 폰트 적용과 동일하게

사전에 해당 폰트가 로드 되어 있어야 한다.

    const style = new PIXI.TextStyle({
      fontFamily: "s-core-dream-bold",
      fontSize: 60,
      fill: "#000000",
    });
    const text = new PIXI.Text('PixiJS TEXT', style);

실행 결과

 

그라데이션 색상 효과 주기

색상 값을 지정해 주는 fill 옵션에 배열로 색상 값을 넣어주면

쉽게 그라데이션 효과를 줄 수 있다.

그라데이션의 방향은 fillGradientType 옵션으로 변경이 가능하다.

0 이면 세로, 1이면 가로로 그라데이션이 적용된다.

디폴트 값은 0이다.

    const style = new PIXI.TextStyle({
      fill: [
          "red",
          "orange",
          "yellow",
          "green",
          "blue"
      ],
      fillGradientType: 1,
      fontFamily: "s-core-dream-bold",
      fontSize: 60
    });
    const text = new PIXI.Text('PixiJS TEXT', style);

실행 결과

fillGradientType : 0

fillGradientType : 1

 

Align 효과

PIXI.TestStyle 에는 align 옵션이 있다.

이는 wordWrap(줄바꿈) 옵션 활성 시 에만 적용되는 옵션이다.

흔히 생각하는 텍스트 정렬이 아니다.

const style = new PIXI.TextStyle({
      fontFamily: "s-core-dream-bold",
      fontSize: 60,
      fill: "#000000",
      wordWrap:true,
      align:"center"
    });
const text = new PIXI.Text('A AB ABC ABCD ABCDE ABCDEF ABCDEFG', style);

실행 결과

align:"left"

align:"center"

align:"right"

보편적인 Text 정렬 구현하기

위 설명대로 align 옵션은 보편적인 텍스트 정렬과 거리가 있다.

만약 흔히 생각하는 좌측, 가운데, 우측 정렬을 구현하고 싶다면

pivot 값을 바꿔서 정렬 효과를 줄 수 있다.

 

단점은 Text가 바뀔 때마다 매번 좌표값을 다시 계산해 줘야 한다.

텍스트 길이나 높이에 따라 중점이 달라지기 때문이다.

  draw(): void {
    // 중심 표시 선
    this.line = new PIXI.Graphics();
    this.line.lineStyle(2, 0xff0000, 1);
    this.line.moveTo(550, 0);
    this.line.lineTo(550, 100);
    this.stage.addChild(this.line);

    this.style = new PIXI.TextStyle({
      fill: "black",
      fontFamily: "s-core-dream-bold",
      fontSize: 60,
    });
    this.txt = new PIXI.Text("PixiJS Text", this.style);
    this.txt.y = (50 - this.txt.height / 2) >> 0;
    this.stage.addChild(this.txt);

    this.changeAlign("center");
  }

  changeAlign($align: string): void {
    // 정렬에 따른 pivot값 재설정
    if ($align == "left") this.txt.pivot.set(0, 0);
    if ($align == "center") this.txt.pivot.set((this.txt.width / 2) >> 0, 0);
    if ($align == "right") this.txt.pivot.set(this.txt.width >> 0, 0);

    this.txt.x = 550;
  }
}

 

실행 결과

좌측 정렬

가운데 정렬

우측 정렬