Sprites and Animation ko - Akiaaaa20/Bit8_CLI GitHub Wiki
Sprite ๋ฐ Animation
English | ็น้ซไธญๆ | ๆฅๆฌ่ช | ํ๊ตญ์ด
BIT8_CLI๋ 2D ๊ฒ์์ ์ํ ๊ฒฝ๋ Sprite ๋ฐ Animation ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
Sprite๋ Asset Registry์ ๋ฑ๋ก๋ Tile์ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฆ์ด ์ง์ ๋ Animation์ ์ ์ํ๊ณ , ์ฌ์ ์๋๋ฅผ ์ค์ ํ๋ฉฐ, Node์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
BIT8_CLI 0.1.0์์๋ ๊ฐ Node๊ฐ ๋ ๋ฆฝ์ ์ธ Animation ์ฌ์ ์ํ๋ฅผ ์ ์งํฉ๋๋ค.
๋ฐ๋ผ์ ์ฌ๋ฌ ๊ฒ์ ๊ฐ์ฒด๊ฐ ๋์ผํ Sprite Definition์ ์ฌ์ฉํ๋ฉด์ ์๋ก ๋ค๋ฅธ Animation์ ์ฌ์ํ ์ ์์ต๋๋ค.
1. Sprite๋?
Sprite๋ ๊ฒ์ ๊ฐ์ฒด๊ฐ ์ฌ์ฉํ ์ ์๋ ๊ทธ๋ํฝ ์ ์์ ๋๋ค.
์๋ฅผ ๋ค์ด ๋ค์๊ณผ ๊ฐ์ ๊ฐ์ฒด์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ํ๋ ์ด์ด ์บ๋ฆญํฐ
- ์ ์บ๋ฆญํฐ
- NPC
- ์ํธ์์ฉ ๊ฐ๋ฅํ ๊ฐ์ฒด
- ์์ง์ด๋ ์ฅ์ ์์
Sprite๋ ์ ์ ์ธ ์ด๋ฏธ์ง ๋๋ ์ฌ๋ฌ Animation Frame์ ํฌํจํ ์ ์์ต๋๋ค.
BIT8_CLI๋ Sprite Definition๊ณผ ๊ฐ๋ณ Node Instance๋ฅผ ๋ถ๋ฆฌํ์ฌ ๊ด๋ฆฌํฉ๋๋ค.
๋ฐ๋ผ์ ์ฌ๋ฌ Node๊ฐ ๋์ผํ Sprite๋ฅผ ์ฐธ์กฐํ๋๋ผ๋ Animation ์ฌ์ ์์น๋ฅผ ๊ณต์ ํ ํ์๊ฐ ์์ต๋๋ค.
2. Sprite Registry
Sprite Definition์ ํ๋ก์ ํธ์ ์ ํ์ ์ค์ ํ์ผ์ ์ ์ฅ๋ฉ๋๋ค.
bit8.sprites.toml
์ด ํ์ผ์๋ Runtime์ Sprite ์์คํ ์์ ์ฌ์ฉํ๋ ์ ์๊ฐ ํฌํจ๋ฉ๋๋ค.
ํ๋ก์ ํธ ๊ตฌ์กฐ ์์:
my-bit8-game/
โโโ main.b8
โโโ bit8.assets.toml
โโโ bit8.sprites.toml
โโโ world.b8map
โโโ assets/
โโโ characters (A).png
Sprite Registry๋ Asset Registry์ ํจ๊ป ์๋ํฉ๋๋ค.
Asset Registry๋ ๋ฑ๋ก๋ Tile์ ์๋ณํฉ๋๋ค.
Sprite Registry๋ ํด๋น Tile์ Sprite์ Animation์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ์ํฉ๋๋ค.
์ ํํ TOML ํ ์ด๋ธ ๊ตฌ์กฐ๋ ํด๋น ๋ฆด๋ฆฌ์ค์ ๊ตฌํ์ ์ฐธ๊ณ ํ์ธ์.
3. Sprite Definition
Sprite Definition์ ์ฌ์ฌ์ฉํ ์ ์๋ ๊ทธ๋ํฝ ๋ฆฌ์์ค๋ฅผ ์ค๋ช ํฉ๋๋ค.
์๋ฅผ ๋ค์ด ํ๋ก์ ํธ์ ๋ค์ ์ด๋ฆ์ Sprite๋ฅผ ์ ์ํ ์ ์์ต๋๋ค.
Player
์ด Sprite์๋ ๋ค์๊ณผ ๊ฐ์ Animation์ ํฌํจํ ์ ์์ต๋๋ค.
idle
walk
attack
๊ฐ Animation์ ๋ฑ๋ก๋ Tile์ ์ฐธ์กฐํ ์ ์์ต๋๋ค.
์:
Player
โ
โโโ idle
โ โโโ A1
โ
โโโ walk
โ โโโ A2
โ โโโ A3
โ โโโ A4
โ
โโโ attack
โโโ A5
โโโ A6
์ด ๊ทธ๋ฆผ์ Sprite, Animation, ๋ฑ๋ก๋ Tile ์ฌ์ด์ ๊ด๊ณ๋ฅผ ๋ณด์ฌ ์ค๋๋ค.
์ค์ TOML ์ค์ ํ์์ ์๋๋๋ค.
4. Animation Frame
Animation์ ์ฌ๋ฌ Frame์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
๊ฐ Frame์ ๋ฑ๋ก๋ Asset ์์คํ ์ ๊ทธ๋ํฝ์ ์ฐธ์กฐํฉ๋๋ค.
์:
walk
Frame 1 โ A2
Frame 2 โ A3
Frame 3 โ A4
์ฌ์ ์ค Runtime์ Animation์ ์๊ฐ ์ค์ ์ ๋ฐ๋ผ ์ ์ ํ Frame์ ์ ํํฉ๋๋ค.
Node๋ ์ ํ๋ Frame์ ํ๋ฉด์ ๊ทธ๋ฆด ์ ์์ต๋๋ค.
5. Animation ์ฌ์ ์๋
BIT8_CLI๋ ๋ค์ ๋ฒ์์ Animation ์ฌ์ ์๋๋ฅผ ์ง์ํฉ๋๋ค.
1 ~ 30 FPS
FPS๋ Frames Per Second์ ์ฝ์๋ก, 1์ด ๋์ ํ์๋๋ Frame ์๋ฅผ ์๋ฏธํฉ๋๋ค.
| Animation FPS | Frame๋น ๋๋ต์ ์ธ ์๊ฐ |
|---|---|
| 1 FPS | 1์ด |
| 5 FPS | 0.2์ด |
| 10 FPS | 0.1์ด |
| 15 FPS | 0.067์ด |
| 30 FPS | 0.033์ด |
BIT8_CLI Runtime์ ๊ณ ์ ๋ Simulation Rate๋ฅผ ์ฌ์ฉํฉ๋๋ค.
30 Hz
Animation ์ฌ์ ์๋๋ Simulation Rate์ ๋ ๋ฆฝ์ ์ผ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
๋ฐ๋ผ์ ํ๋์ ๊ฒ์์์ ๋น ๋ฅธ Animation๊ณผ ๋๋ฆฐ Animation์ ํจ๊ป ์ฌ์ฉํ ์ ์์ต๋๋ค.
6. Node์ Sprite ์ฐ๊ฒฐํ๊ธฐ
Node๋ ๋ค์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ Sprite๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
self:sprite("Player")
์ด ์ฝ๋๋ Player๋ผ๋ ์ด๋ฆ์ Sprite Definition์ ์ฐธ์กฐํฉ๋๋ค.
์:
func init()
self:sprite("Player")
end
์ฌ์ฉํ๋ ค๋ Sprite๋ Sprite Registry์ ๋ฏธ๋ฆฌ ์ ์๋์ด ์์ด์ผ ํฉ๋๋ค.
7. Animation ์ฌ์ํ๊ธฐ
์ด๋ฆ์ด ์ง์ ๋ Animation์ ์ ํํ๋ ค๋ฉด ๋ค์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
self:play("walk")
์:
func init()
self:sprite("Player")
self:play("idle")
end
์ด ์ฝ๋๋ Player Sprite๋ฅผ ์ ํํ๊ณ idle Animation์ ์ฌ์์ ์์ฒญํฉ๋๋ค.
Animation ์ด๋ฆ์ ์ ํ๋ Sprite Definition์ ์กด์ฌํด์ผ ํฉ๋๋ค.
8. Sprite ๊ทธ๋ฆฌ๊ธฐ
Node์ ํ์ฌ Sprite Frame์ ๊ทธ๋ฆฌ๋ ค๋ฉด ๋ค์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.
self:spr()
์:
func draw()
self:spr()
end
๋ ๋๋ง์๋ Node์ Sprite ์ํ์ ์์น๊ฐ ์ฌ์ฉ๋ฉ๋๋ค.
ํ์ฑํ๋ Camera์ ๋ฐ๋ผ ์ต์ข ํ๋ฉด ์์น๊ฐ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
์์ธํ ๋ด์ฉ์ Camera ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ์ธ์.
9. Node Script ์์
๋ค์ ์์ ๋ ์๋ ์กฐ๊ฑด์ ๊ฐ์ ํฉ๋๋ค.
Player๋ผ๋ Sprite๊ฐ ์ ์๋์ด ์์ต๋๋ค.- Sprite์
idle๊ณผwalkAnimation์ด ์์ต๋๋ค. - Node์ ์ด Script๊ฐ ์ฐ๊ฒฐ๋์ด ์์ต๋๋ค.
func init()
self:sprite("Player")
self:play("idle")
end
func update()
if btn(LEFT) then
self:move(-1, 0)
self:play("walk")
elseif btn(RIGHT) then
self:move(1, 0)
self:play("walk")
else
self:play("idle")
end
end
func draw()
self:spr()
end
์ด ์์ ๋ Node ์ด๋๊ณผ Animation ์ ํ์ ๊ฒฐํฉํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ ์ค๋๋ค.
Animation ์ ํ์ ์ค๊ณํ ๋๋ self:play()๋ฅผ ๋ฐ๋ณต ํธ์ถํ์ ๋์ ์ ํํ ๋์์ Runtime ๊ตฌํ์์ ํ์ธํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
10. ๋ ๋ฆฝ์ ์ธ Animation State
BIT8_CLI์ ์ค์ํ ํน์ง ์ค ํ๋๋ Animation ์ฌ์ ์ํ๊ฐ ๊ฐ Node์ ๊ฐ๋ณ์ ์ผ๋ก ์ ์ฅ๋๋ค๋ ์ ์ ๋๋ค.
๋ ๊ฐ์ Node๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ด ์๋ค.
Node 1 โ Player Sprite โ walk
Node 2 โ Player Sprite โ idle
๋ Node๋ ๋์ผํ Sprite Definition์ ์ฐธ์กฐํฉ๋๋ค.
ํ์ง๋ง Animation State๋ ์๋ก ๋ ๋ฆฝ์ ์ ๋๋ค.
์:
Node 1
Frame: A3
Node 2
Frame: A1
์ด ๊ตฌ์กฐ๋ฅผ ํตํด ๋์ผํ Sprite Definition์ ์ฌ๋ฌ ๊ฒ์ ๊ฐ์ฒด์์ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
11. ์๊ตฌ Sprite ์ฐธ์กฐ
BIT8_CLI 0.1.0์ .b8map ๋ฐ์ดํฐ์ Sprite ์ฐธ์กฐ๋ฅผ ์ ์ฅํ๋ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค.
Node๋ ๋ค์๊ณผ ๊ฐ์ Sprite ์ด๋ฆ์ ์ ์ฅํ ์ ์์ต๋๋ค.
Player
Runtime์ Node์ ์ด๊ธฐํ ํจ์๋ฅผ ์คํํ๊ธฐ ์ ์ ์ ์ฅ๋ Sprite ์ฐธ์กฐ๋ฅผ ํด์ํฉ๋๋ค.
๋ฐ๋ผ์ Script์์ Sprite๋ฅผ ๋งค๋ฒ ์๋์ผ๋ก ์ค์ ํ์ง ์์๋ Node๋ ์ง์ ๋ Sprite๋ฅผ ์ฌ์ฉํ์ฌ ์์ํ ์ ์์ต๋๋ค.
Script๋ ์ง์๋๋ Runtime API๋ฅผ ํตํด Animation์ ์ ํํ๊ฑฐ๋ Sprite๋ฅผ ๋ณ๊ฒฝํ ์๋ ์์ต๋๋ค.
12. Sprite์ Map Workspace
VS Code Map Workspace๋ Sprite์ ๊ด๋ จ๋ Node ์์ฑ์ ๋ค๋ฃจ๋ ๊ธฐ๋ฅ์ ์ง์ํฉ๋๋ค.
์ด๋ฅผ ํตํด ์๊ฐ์ ํธ์ง๊ณผ Runtime ๋์์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด Map์ ํธ์งํ๋ ๋์ Node๋ฅผ Sprite Definition๊ณผ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
Runtime์ ๊ฒ์์ ๋ถ๋ฌ์ฌ ๋ ์ ์ฅ๋ ํ๋ก์ ํธ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
Sprite Registry๋ Sprite์ ๊ทธ๋ํฝ๊ณผ Animation์ ์ ์ํ๋ ์ญํ ์ ๊ณ์ ๋ด๋นํฉ๋๋ค.
13. Sprite์ ๋ฑ๋ก๋ Asset
Sprite๋ ๋ฑ๋ก๋ ๊ทธ๋ํฝ Asset์ ์ฌ์ฉํฉ๋๋ค.
bit8.assets.toml
โ
โผ
Registered Tiles
โ
โผ
bit8.sprites.toml
โ
โผ
Sprite Definitions
โ
โผ
Node Animation State
โ
โผ
Runtime Rendering
์ด๋ฌํ ๋ถ๋ฆฌ ๊ตฌ์กฐ์๋ ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ์ด ์์ต๋๋ค.
- Tile์ ์ฌ๋ฌ Sprite์์ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
- Sprite Definition์ ์ฌ๋ฌ Node์์ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๊ฐ Node๊ฐ ๋ ๋ฆฝ์ ์ธ Animation State๋ฅผ ์ ์งํ ์ ์์ต๋๋ค.
- Stable Asset ID๋ฅผ ํตํด ๊ทธ๋ํฝ ๋ฆฌ์์ค๋ฅผ ์์ ์ ์ผ๋ก ์ฐธ์กฐํ ์ ์์ต๋๋ค.
์์ธํ ๋ด์ฉ์ Assets and Tilesheets ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ์ธ์.
14. ํ์ฌ ์ ํ ์ฌํญ
BIT8_CLI 0.1.0์ ๊ฒฝ๋ Sprite ๋ฐ Animation ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
์์ ํ Skeletal Animation ๋๋ Character Rigging ์์คํ ์ ์๋๋๋ค.
ํ์ฌ ์์คํ ์ ์ฃผ๋ก ๋ค์ ๊ธฐ๋ฅ์ ์ค์ ์ ๋ก๋๋ค.
- ๋ฑ๋ก๋ Tile ์ฐธ์กฐ
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ Sprite Definition
- ์ด๋ฆ์ด ์ง์ ๋ Animation
- ์ค์ ๊ฐ๋ฅํ Animation FPS
- Node๋ณ ๋ ๋ฆฝ์ ์ธ Animation State
- Runtime Sprite ๋ ๋๋ง
๋ ๋ฐ์ ๋ Animation ๊ธฐ๋ฅ์ ํฅํ ๋ฆด๋ฆฌ์ค์์ ๊ฒํ ๋ ์ ์์ต๋๋ค.
๋ค์ ๋จ๊ณ
๋ค์ ํ์ด์ง:
๊ด๋ จ ๋ฌธ์:
Sprite๋ ํ ๋ฒ ์ ์ํ๊ณ , ๊ฐ Node์์ ์๋ก ๋ค๋ฅธ ์์ง์์ ๋ง๋ค์ด ๋ณด์ธ์.