๋‚ด ์ธ์ƒ์—์„œ ๋ฏฟ์„ ๊ฑด ์˜ค์ง ๋‚˜ ์ž์‹ ๋ฟ!

The only one you can truly trust is yourself.

๋‚ด ์ด์•ผ๊ธฐ/1์ธ ๊ฒŒ์ž„ ๊ฐœ๋ฐœ

8๋ฐฉํ–ฅ ์กฐ์ด์Šคํ‹ฑ ์ž…๋ ฅ

๐ŸŽฎinspirer9 2022. 12. 12. 00:37
728x90
๋ฐ˜์‘ํ˜•

๋ฐฉํ™ฉํ•˜๋Š” ์˜ํ˜ผ

360๋„ ๋ฐฉํ–ฅ์œผ๋กœ ์ด๋™/์‚ฌ๊ฒฉ ํ•˜๋˜ ์ƒ˜ํ”Œ์„ ๋„ํŠธ ๋Š๋‚Œ์œผ๋กœ ๋ฐ”๊พธ๋ ค๊ณ , 8๋ฐฉํ–ฅ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ์ฃผ์›Œ์„œ ์Šคํ‹ฑ ์ž…๋ ฅ์„ 8๋ฐฉํ–ฅ์œผ๋กœ ์ˆ˜์ •ํ–ˆ๋‹ค.

๊ทผ๋ฐ 8๋ฐฉํ–ฅ ์Šคํ‹ฑ ์ž…๋ ฅ์„ ๊ตฌํ˜„ํ•  ๋•Œ 2D ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ์•„๋ฌด๊ฑฐ๋‚˜ ์ฃผ์›Œ๋‹ค ์จ์„œ ๊ทธ๋Ÿฐ์ง€, ์•„ํŠธ๋ฅผ ์”Œ์šธ์ˆ˜๋ก ๊ตฌ๋ ค์ง€๋Š” ๋Š๋‚Œ์ด๋‹ค.

๊ทธ๋ƒฅ 2D๋กœ ๋‹จ์ˆœํ•œ ๋„ํ˜•์œผ๋กœ ๊ฐ€์•ผํ•˜๋‚˜? ๊ทธ๋Ÿฌ๋ฉด ๋„ˆ๋ฌด ์ง€์˜ค๋ฉ”ํŠธ๋ฆฌ ๋Œ€์‰ฌ์ฒ˜๋Ÿผ ๋Š๊ปด์ ธ์„œ ์•„ํŠธ๋ฅผ ์”Œ์›Œ์•ผ ํ•  ๊ฒƒ ๊ฐ™๊ธด ํ•œ๋ฐ...

ํ ... ์ผ๋‹จ ์˜ค๋Š˜๊นŒ์ง€ ํ•œ๊ฑฐ ์ •๋ฆฌ ์ข€ ํ•ด๋†“๊ณ  ๋จธ๋ฆฌ ์ข€ ์‹ํžˆ์ž.

ํ˜ผ์ž ๊ธ‰ํ•ด์„œ ์•„๋ฌด ์ƒ๊ฐ์—†์ด ๋Œ€์ถฉ ์ด๊ฒƒ ์ €๊ฒƒ ๋งŒ๋“ค๋‹ค๋ณด๋ฉด ์•„๋ฌด๊ฒƒ๋„ ์•„๋‹Œ๊ฒŒ ๋‚˜์˜ค๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

8๋ฐฉํ–ฅ ์Šคํ‹ฑ ์ž…๋ ฅ ์ •๋ฆฌ

  • ์Šคํ‹ฑ ์ž…๋ ฅ -> ์Šคํ‹ฑ ์ขŒํ‘œ๋กœ ์ ์šฉ
  • ์Šคํ‹ฑ ์ขŒํ‘œ๋ฅผ ์•„ํฌํƒ„์  ํŠธ๋กœ ๊ฐ๋„๋กœ ๋ณ€๊ฒฝ
  • ๊ฐ๋„์— ๋”ฐ๋ผ ๋ฐฉํ–ฅ ๋ฆฌํ„ด
  • ํ•ด๋‹น ๋ฐฉํ–ฅ์— ๋งž๋Š” ์Šคํ”„๋ผ์ดํŠธ ์‹œํ€ธ์Šค๋กœ ๋ฐ”๊ฟ”์„œ ํ”Œ๋ ˆ์ด

์ด๊ฒƒ ์ €๊ฒƒ ์ฐธ๊ณ ํ•˜๋‹ค๊ฐ€ ์ฝ”๋“œ๋ฅผ ๋‹ค ์งœ๊ณ  ๊ฒ€์ƒ‰ํ–ˆ๋Š”๋ฐ ๋‚ด๊ฐ€ ์ง  ์ฝ”๋“œ๋ž‘ ๊ฐ€์žฅ ํก์‚ฌํ•œ ์ฝ”๋“œ๋ฅผ ์ฐพ์•˜๋‹ค. ๊ทธ๋ƒฅ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ด๊ฑธ ์ฐธ๊ณ ํ–ˆ์œผ๋ฉด ์‹œ๊ฐ„ ๋‚ญ๋น„ ์•ˆํ–ˆ์„ํ…๋ฐ... ์•„๋‹ˆ ์ฒ˜์Œ์—” ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•ด์•ผ๋ ์ง€๋„ ๋ชฐ๋ž์œผ๋‹ˆ๊นŒ ๊ฒ€์ƒ‰ํ•ด๋„ ์ด๋Ÿฐ๊ฒŒ ์•ˆ๋‚˜์™”์—ˆ๋‹ค.

https://cantwell-tom.medium.com/animate-an-8-directional-sprite-in-javascript-89eed0e5b69

 

Animate an 8 directional sprite in javascript

When animating a character for a game, you’ll usually be working with something called a “spritesheet”. Let’s take a look at the one we’re…

cantwell-tom.medium.com

 

728x90
๋ฐ˜์‘ํ˜•