8๋ฐฉํฅ ์กฐ์ด์คํฑ ์ ๋ ฅ
๋ฐฉํฉํ๋ ์ํผ
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