Pixi 에서 Text 를 표현하는 가장 좋은 방법 : BitmapText 클래스

먼저 코드를 보자.

// https://pixijs.download/dev/docs/PIXI.BitmapFont.html

BitmapFont.from("LeeFont", {

    fontFamily: 'sans-serif',
    fontSize: 100,
    fontWeight : '700',
    fill: 'white',
    

}, { chars : [

    ...BitmapFont.ALPHANUMERIC, // 모든 알파벳, 숫자 포함. (특수기호 제외)
    '△', '#', '(', ')', ',', '-' // 여기 직접 특수기호들 추가

]})

const bitmapText = new BitmapText(text, {fontName : 'LeeFont', fontSize : 14 })

this.stage.addChild(bitmapText)

BitmapText 는 PIXI.Text 클래스보다 훨씬 빠르다고한다.

실제로도 cpu 점유율이 줄어드는것을 보았다.

PIXI.Text 는 canvas 를 내부적으로 사용하지만 BitmapText 는 Sprite 이라고 한다.

BitmapText 는 미리 원하는 글자들을 다 랜더링한뒤에, 이를 조합해서 사용하는 방식이다.

따라서 런타임에서 drawingCall 이 발생하지않는다.

위에 chars 라는 프로퍼티속에 필요한 문자들을 집어넣으면 되는데,

BitmapFont.ALPHANUMERIC 은 PIXI 에서 제공하는 constant 로, 알파벳과 숫자들을 가지고있다.

이것들을 집어넣은뒤에, 필요한 특수기호들은 직접 리터럴로 집어넣어줘야한다.

만약 chars 에 아무것도 집어넣지않을 경우, BitmapFont.ALPHANUMERIC 가 default 로 생성된다.

이게 BitmapFont.from 에서 사용한 fontName 을, BitmapText 인스턴르를 사용할때 2번째 인자 option 의 fontName 에 같은 이름을 사용하여 로딩하게된다.fontSize 같은 경우, 애초에 BitmapFont.from 에서는 조금 크게 100 으로 생성한뒤에,BitmapText 클래스에서는 좀 더 작은 fontSize 를 설정하면 조금이나마 글씨가 선명해지는거같다.