Pixi.js: ์ž์‹ ์ปจํ…Œ์ด๋„ˆ์— ์ถ”๊ฐ€ํ•  ๋•Œ PIXI.Text๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์—†์Œ

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

์˜ˆ๋ฅผ ๋“ค์–ด http://pixijs.github.io/examples/#/demos/text -demo.js๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

view๋ผ๋Š” ์ปจํ…Œ์ด๋„ˆ๋ฅผ stage์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
1

๋ณด๊ธฐ์— textSample์„ ์ถ”๊ฐ€ํ•˜๊ณ ,
2

๊ทธ๋Ÿฌ๋ฉด textSample์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋งž์Šต๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ๋ฒ„๊ทธ์ž…๋‹ˆ๊นŒ?

๐Ÿค” Question

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

๋งž์Šต๋‹ˆ๋‹ค.. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ด์œ ๋Š” ์•„์ด๋“ค์˜ ์ˆœ์„œ์ž…๋‹ˆ๋‹ค.

init() ํ•จ์ˆ˜ ๋‚ด์—์„œ

// add a shiny background...
var background = PIXI.Sprite.fromImage('required/assets/textDemoBG.jpg');
stage.addChild(background);

์ด ๋ฐฐ๊ฒฝ์€ ์ƒˆ ๋ณด๊ธฐ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ถ”๊ฐ€๋œ _after_ ์ถ”๊ฐ€๋˜๋ฉฐ, ๋”ฐ๋ผ์„œ ์ƒˆ ๋ณด๊ธฐ ์ปจํ…Œ์ด๋„ˆ์— ์ถ”๊ฐ€๋œ ๋‚ด์šฉ ํ›„์— ๊ทธ๋ ค์ง‘๋‹ˆ๋‹ค.
์ด๋™ํ•˜๋ฉด

var view = new PIXI.Container();
stage.addChild(view)

์ง์ „์—
view.addChild(textSample);
์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)

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

๋งž์Šต๋‹ˆ๋‹ค.. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ด์œ ๋Š” ์•„์ด๋“ค์˜ ์ˆœ์„œ์ž…๋‹ˆ๋‹ค.

init() ํ•จ์ˆ˜ ๋‚ด์—์„œ

// add a shiny background...
var background = PIXI.Sprite.fromImage('required/assets/textDemoBG.jpg');
stage.addChild(background);

์ด ๋ฐฐ๊ฒฝ์€ ์ƒˆ ๋ณด๊ธฐ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ถ”๊ฐ€๋œ _after_ ์ถ”๊ฐ€๋˜๋ฉฐ, ๋”ฐ๋ผ์„œ ์ƒˆ ๋ณด๊ธฐ ์ปจํ…Œ์ด๋„ˆ์— ์ถ”๊ฐ€๋œ ๋‚ด์šฉ ํ›„์— ๊ทธ๋ ค์ง‘๋‹ˆ๋‹ค.
์ด๋™ํ•˜๋ฉด

var view = new PIXI.Container();
stage.addChild(view)

์ง์ „์—
view.addChild(textSample);
์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)

์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด ์Šค๋ ˆ๋“œ๋Š” ๋‹ซํžŒ ํ›„ ์ตœ๊ทผ ํ™œ๋™์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์ž ๊ฒผ์Šต๋‹ˆ๋‹ค. ๊ด€๋ จ ๋ฒ„๊ทธ์— ๋Œ€ํ•œ ์ƒˆ ๋ฌธ์ œ๋ฅผ ์—ฌ์‹ญ์‹œ์˜ค.

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