Pixi.js: ํŠน์ • ๋ฌผ์ฒด์˜ ์ค‘์•™ ์Šคํ…Œ์ด์ง€

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

2D ๊ฒŒ์ž„์„ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ณด๊ธฐ๊ฐ€ ํ”Œ๋ ˆ์ด์–ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ์˜ ์ค‘์•™์— ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ์‹œ์ ์—์„œ ๋ชจ๋“  ์Šคํ”„๋ผ์ดํŠธ์˜ ๋ชจ๋“  ์ขŒํ‘œ๋ฅผ ์ˆ˜๋™์œผ๋กœ ์˜คํ”„์…‹ํ•˜๋Š” ๊ฒƒ ์™ธ์—๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”Œ๋ ˆ์ด์–ด๊ฐ€ ํ•ญ์ƒ ์บ”๋ฒ„์Šค ๋ณด๊ธฐ์˜ ์ค‘์•™์— ์žˆ๋„๋ก ์Šคํ…Œ์ด์ง€๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

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

๋‚˜๋Š” ํ‘œ์ค€ ์œ„์น˜/์Šค์ผ€์ผ/ํ”ผ๋ฒ— ์ฝค๋ณด๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

//(0,0) for us is center of the screen
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;
//scale it
stage.scale.x = 2.0;
stage.scale.y = 2.0;
//now specify which point INSIDE stage must be (0,0)
stage.pivot.x = character.position.x;
stage.pivot.y = character.position.y;

๋‚ด ๊ฐœ๋ฐœ ๋ฒ„์ „์—๋Š” ๋น„๋ฐ€ Camera ๊ฐœ์ฒด๊ฐ€ ์žˆ์œผ๋ฉฐ ์ผ๋ถ€ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ์žˆ๋”๋ผ๋„ ๊ฐœ์ฒด๋ฅผ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‚˜๋Š” ํ‘œ์ค€ ์œ„์น˜/์Šค์ผ€์ผ/ํ”ผ๋ฒ— ์ฝค๋ณด๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

//(0,0) for us is center of the screen
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;
//scale it
stage.scale.x = 2.0;
stage.scale.y = 2.0;
//now specify which point INSIDE stage must be (0,0)
stage.pivot.x = character.position.x;
stage.pivot.y = character.position.y;

๋‚ด ๊ฐœ๋ฐœ ๋ฒ„์ „์—๋Š” ๋น„๋ฐ€ Camera ๊ฐœ์ฒด๊ฐ€ ์žˆ์œผ๋ฉฐ ์ผ๋ถ€ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ์žˆ๋”๋ผ๋„ ๊ฐœ์ฒด๋ฅผ ๋”ฐ๋ผ๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์™„๋ฒฝํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค! :)

๊ทธ๊ฒƒ์€ ๋˜ํ•œ ๋‚ด๊ฐ€ ํ•„์š”ํ–ˆ์ง€๋งŒ ๋ฌป์ง€ ์•Š์€ ๋˜ ๋‹ค๋ฅธ ์งˆ๋ฌธ(๋ฌด๋Œ€๋ฅผ ํ™•๋Œ€ํ•˜๋Š” ๋ฐฉ๋ฒ•)์— ๋Œ€ํ•œ ๋‹ต๋ณ€์„ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค.

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

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