Pixi.js: ํ…์ŠคํŠธ ๋ณ€๊ฒฝ ํ›„ BitmapText ๋„ˆ๋น„

์— ๋งŒ๋“  2020๋…„ 09์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: pixijs/pixi.js

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

ํ˜„์žฌ ํ–‰๋™

์ด ํ…์ŠคํŠธ๊ฐ€ "1111111111111111111111111"์ธ PIXI.BitmapText ์ธ์Šคํ„ด์Šค๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ๋„ˆ๋น„๋ฅผ ๊ธฐ์–ต ํ•œ ๋‹ค์Œ ํ…์ŠคํŠธ๋ฅผ "1"๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ๋„ˆ๋น„๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•˜๋ฉด ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€๋Šฅํ•œ ํ•ด๊ฒฐ์ฑ…

์ด ๋ฌธ์ œ๋Š” PIXI.BitmapText ์ธ์Šคํ„ด์Šค์— 199 ๊ฐœ ์ด์ƒ์˜ ์ •์ ์ด์žˆ๋Š” ์ž์‹์œผ๋กœ PIXI.Mesh ์ธ์Šคํ„ด์Šค๊ฐ€์žˆ์„ ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์žฌํ˜„ ๋‹จ๊ณ„

https://pixijs.io/examples/#/text/bitmap -text.js
์ด ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ ๋„ฃ์œผ์‹ญ์‹œ์˜ค.

const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

app.loader
    .add('desyrel', 'examples/assets/bitmap-font/desyrel.xml')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    const bitmapFontText = new PIXI.BitmapText('11111111111111111111111111111111111111111111111', { font: '55px Desyrel'});
    console.log(bitmapFontText.width);
    bitmapFontText.x = 50;
    bitmapFontText.y = 200;
    bitmapFontText.text = '1';
    console.log(bitmapFontText.width);
    app.stage.addChild(bitmapFontText);
}

ํ™˜๊ฒฝ

  • pixi.js ๋ฒ„์ „ : 5.3.2
  • ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „ : Chrome 85
  • OS ๋ฐ ๋ฒ„์ „ : Windows 10
๐Ÿ•ท Bug

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‹ค์Œ์€ JSFiddle ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ๋ฐ”์™€ ๊ฐ™์ด,์ด ๋ฌธ์ œ๋Š” ์ƒˆ ํ…์ŠคํŠธ๊ฐ€ ์ด์ „๋ณด๋‹ค ์ž‘์„ ๋•Œ ์ •์  ๋ฒ„ํผ๋ฅผ ์ •๋ฆฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
์ด ์กฐ๊ฑด์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธ
image

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‹ค์Œ์€ JSFiddle ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

๋‹ค์Œ์€ JSFiddle ๋ฒ„์ „์ž…๋‹ˆ๋‹ค.
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

๋‚ด๊ฐ€ ์ดํ•ดํ•˜๋Š” ๋ฐ”์™€ ๊ฐ™์ด,์ด ๋ฌธ์ œ๋Š” ์ƒˆ ํ…์ŠคํŠธ๊ฐ€ ์ด์ „๋ณด๋‹ค ์ž‘์„ ๋•Œ ์ •์  ๋ฒ„ํผ๋ฅผ ์ •๋ฆฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
์ด ์กฐ๊ฑด์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธ
image

์ •์  ๋ฒ„ํผ๋ฅผ 0์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์ƒˆ๋กœ ์ƒ์„ฑ๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰