Assets and Tilesheets ko - Akiaaaa20/Bit8_CLI GitHub Wiki

Asset ๋ฐ Tilesheet

English | ็น้ซ”ไธญๆ–‡ | ๆ—ฅๆœฌ่ชž | ํ•œ๊ตญ์–ด

BIT8_CLI๋Š” ๋“ฑ๋ก๋œ PNG Tilesheet๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒŒ์ž„ ๊ทธ๋ž˜ํ”ฝ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ Tilesheet๋Š” 8ร—8 ํ”ฝ์…€ ํฌ๊ธฐ์˜ Tile๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. ๋“ฑ๋ก๋œ Tile์—๋Š” ์•ˆ์ •์ ์ธ Asset ID๊ฐ€ ๋ถ€์—ฌ๋˜๋ฉฐ Script, Map, Sprite ๋ฐ Collision ์‹œ์Šคํ…œ์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ€์ด๋“œ์—์„œ๋Š” BIT8_CLI 0.1.0์˜ Asset ์‹œ์Šคํ…œ์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

1. Tilesheet

Tilesheet๋Š” ์—ฌ๋Ÿฌ Tile์ด ํฌํ•จ๋œ PNG ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค.

BIT8_CLI๋Š” ๊ณ ์ •๋œ Tile ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

8 ร— 8 ํ”ฝ์…€

์˜ˆ๋ฅผ ๋“ค์–ด 32ร—16 ํ”ฝ์…€ PNG์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

  • 4์—ด
  • 2ํ–‰
  • 8๊ฐœ์˜ Tile

Tile์€ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ, ์œ„์—์„œ ์•„๋ž˜ ์ˆœ์„œ๋กœ ๋ฒˆํ˜ธ๊ฐ€ ์ง€์ •๋ฉ๋‹ˆ๋‹ค.

32 ร— 16 PNG

+------+------+------+------+
|  A1  |  A2  |  A3  |  A4  |
+------+------+------+------+
|  A5  |  A6  |  A7  |  A8  |
+------+------+------+------+

๊ฐ Tile์€ ์ •ํ™•ํžˆ 8ร—8 ํ”ฝ์…€์ž…๋‹ˆ๋‹ค.

2. Asset Registry

BIT8_CLI๋Š” Asset Registry๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋“ฑ๋ก๋œ Tilesheet๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Registry๋Š” ๋‹ค์Œ ํŒŒ์ผ์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

bit8.assets.toml

Registry๋Š” Tilesheet๋ฅผ ์•ˆ์ •์ ์ธ Group ID์™€ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด Tilesheet์— Group A๊ฐ€ ์ง€์ •๋˜์—ˆ๋‹ค๋ฉด ํ•ด๋‹น Tile์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

A1
A2
A3
A4

Asset Registry๋Š” Asset ์‹๋ณ„ ์ •๋ณด์˜ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ณต์‹ ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค.

PNG๋ฅผ ํ”„๋กœ์ ํŠธ์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ์ž๋™ ๋“ฑ๋ก๋œ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ง€ ๋งˆ์„ธ์š”.

ํ”„๋กœ์ ํŠธ์—์„œ ์ง€์›ํ•˜๋Š” Asset ๋“ฑ๋ก ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ Registry ํ•ญ๋ชฉ์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

3. Stable Asset IDs

BIT8_CLI๋Š” ๋‹ค์Œ ํ˜•์‹์˜ ์•ˆ์ •์ ์ธ ์‹๋ณ„์ž๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Group + Tile Number

์˜ˆ:

A1
A4
B12
C3

Group์€ ๋“ฑ๋ก๋œ Tilesheet๋ฅผ ์‹๋ณ„ํ•ฉ๋‹ˆ๋‹ค.

์ˆซ์ž๋Š” ํ•ด๋‹น Tilesheet ๋‚ด๋ถ€์˜ Tile์„ ์‹๋ณ„ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Script์™€ Map์ด ์ „์—ญ ์ˆซ์ž ์ˆœ์„œ์— ์˜์กดํ•˜์ง€ ์•Š๊ณ  Tile์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด:

spr(A4, 16, 16)

์€ ์ง€์ •๋œ ์ขŒํ‘œ์— Tile A4๋ฅผ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

Stable ID๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ 

์—ฌ๋Ÿฌ Tilesheet๊ฐ€ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ๊ฐํ•ด ๋ด…์‹œ๋‹ค.

Asset์ด ์ „์—ญ ๋ชฉ๋ก์˜ ์œ„์น˜์—๋งŒ ์˜์กดํ•œ๋‹ค๋ฉด Tilesheet๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๊ธฐ์กด ์ฐธ์กฐ๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Stable Asset ID๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

BIT8_CLI๋Š” ์‚ฌ์šฉ์ด ์ข…๋ฃŒ๋œ Group ID๋„ ๊ธฐ๋กํ•˜์—ฌ ์‹ค์ˆ˜๋กœ ๋‹ค์‹œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

4. ๋“ฑ๋ก๋œ PNG ํŒŒ์ผ ์ด๋ฆ„

๋“ฑ๋ก๋œ Tilesheet๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ‘œ์ค€ ํŒŒ์ผ ์ด๋ฆ„ ํ˜•์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

<name> (<GROUP>).png

์˜ˆ:

terrain (A).png
characters (B).png
items (C).png

Group ID๋Š” ๋“ฑ๋ก๋œ Asset ์‹๋ณ„ ์ •๋ณด์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ตœ์ข… ๊ธฐ์ค€์€ Asset Registry์ž…๋‹ˆ๋‹ค.

Registry๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š๊ณ  ๋“ฑ๋ก๋œ PNG ํŒŒ์ผ์˜ ์ด๋ฆ„์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉด Asset ์ฐธ์กฐ๊ฐ€ ๊นจ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

5. Tile ๊ทธ๋ฆฌ๊ธฐ

๋“ฑ๋ก๋œ Tile์„ ๊ทธ๋ฆฌ๋ ค๋ฉด spr()์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

func draw()
    cls(0)
    spr(A4, 16, 16)
end

์ด ์ฝ”๋“œ๋Š” ํ™”๋ฉด์„ ์ง€์šฐ๊ณ  Tile A4๋ฅผ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

์ฐธ์กฐํ•˜๋Š” Tile์€ ํ”„๋กœ์ ํŠธ์˜ Asset Registry์— ์กด์žฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

BIT8_CLI๋Š” ์ด์ „ ํ”„๋กœ์ ํŠธ์™€์˜ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด ๊ธฐ์กด ์ˆซ์ž Sprite ์ฐธ์กฐ๋„ ๊ณ„์† ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์ƒˆ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Stable Asset ID๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

6. ํˆฌ๋ช…๋„์™€ ํŒ”๋ ˆํŠธ

BIT8_CLI๋Š” ๋“ฑ๋ก๋œ PNG Tilesheet์˜ ํˆฌ๋ช… ํ”ฝ์…€์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

ํˆฌ๋ช… ํ”ฝ์…€์€ Tile์„ ๊ทธ๋ฆด ๋•Œ๋„ ํˆฌ๋ช…ํ•˜๊ฒŒ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

PNG ์ƒ‰์ƒ์€ Runtime์—์„œ ์‚ฌ์šฉํ•˜๋Š” ํŒ”๋ ˆํŠธ ํ‘œํ˜„์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

Asset ์ฒ˜๋ฆฌ ๊ณผ์ •์€ Runtime ๋ Œ๋”๋ง ๊ฒฐ๊ณผ์™€ Editor ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊ฐ€ ์ผ์น˜ํ•˜๋„๋ก ์„ค๊ณ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์œผ๋ ค๋ฉด ์ƒ‰์ƒ๊ณผ ํˆฌ๋ช…๋„๊ฐ€ ๋ช…ํ™•ํ•œ Pixel Art ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

7. Solid Tile

Tile์€ Collision ํŒ์ •์„ ์œ„ํ•ด Solid๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Solid Tile ์ •๋ณด๋Š” Asset Registry์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด Tilesheet์˜ ์—ฌ์„ฏ ๋ฒˆ์งธ Tile์„ Solid๋กœ ์ง€์ •ํ•˜๋ ค๋ฉด:

solid = [6]

์ด ๊ฐ’์€ ๋“ฑ๋ก๋œ Tilesheet Group ๋‚ด๋ถ€์˜ ์—ฌ์„ฏ ๋ฒˆ์งธ Tile์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

Solid Tile์€ Collision ํŒ์ •์—์„œ ์ „์ฒด 8ร—8 ํ”ฝ์…€ ์˜์—ญ์„ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค.

Node๋Š” ๋‹ค์Œ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Solid Tile๊ณผ์˜ Collision์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

self:collide(dx, dy)

๊ทธ๋ฆฌ๊ณ :

self:move(dx, dy)

solid๋Š” bit8.assets.toml์˜ ํ•ด๋‹น Asset ๋“ฑ๋ก ํ•ญ๋ชฉ ๋‚ด๋ถ€์— ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ด€๋ จ ์—†๋Š” ์ตœ์ƒ์œ„ ์„ค์ •์œผ๋กœ ๋ฐฐ์น˜ํ•˜์ง€ ๋งˆ์„ธ์š”.

์ž์„ธํ•œ ๋‚ด์šฉ์€ Collision ํŽ˜์ด์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

8. Asset ๋ฐ Map

Map์€ ๋“ฑ๋ก๋œ Asset ID๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.

Map Cell์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ Tile ID๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

A1
A2
A3

์ด๋ฅผ ํ†ตํ•ด ํ•˜๋‚˜์˜ Map์—์„œ ์„œ๋กœ ๋‹ค๋ฅธ Group์˜ Tile์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Map Workspace์—๋Š” ๋“ฑ๋ก๋œ Tile์„ ์„ ํƒํ•˜๊ณ  Map Cell์— ๋ฐฐ์น˜ํ•˜๋Š” ๋„๊ตฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ Map ํŽ˜์ด์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

9. Asset ๋ฐ Sprite

Sprite Definition๋„ ๋“ฑ๋ก๋œ Tile์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Sprite๋Š” Tile์„ ์ฐธ์กฐํ•˜์—ฌ ๋‹ค์Œ ์š”์†Œ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ •์  ๋ฏธ๋ฆฌ๋ณด๊ธฐ
  • Animation Frame
  • ์ด๋ฆ„์ด ์ง€์ •๋œ Animation

Sprite Definition์€ ๋‹ค์Œ ํŒŒ์ผ์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

bit8.sprites.toml

์˜ˆ๋ฅผ ๋“ค์–ด Player๋ผ๋Š” Sprite๋Š” ์—ฌ๋Ÿฌ ๋“ฑ๋ก๋œ Tile์„ Animation Frame์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Node Script์—์„œ๋Š” ๋‹ค์Œ ์ฝ”๋“œ๋กœ Animation์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

self:play("walk")

ํ˜„์žฌ Frame์„ ๊ทธ๋ฆฌ๋ ค๋ฉด:

self:spr()

์ž์„ธํ•œ ๋‚ด์šฉ์€ Sprite ๋ฐ Animation ํŽ˜์ด์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

10. Asset ๊ด€๋ฆฌ ๊ฐ€์ด๋“œ

Asset์„ ๊ด€๋ฆฌํ•  ๋•Œ๋Š” ๋‹ค์Œ ์‚ฌํ•ญ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

  1. ์ง€์›๋˜๋Š” Asset ๋“ฑ๋ก ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ PNG Tilesheet๋ฅผ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.
  2. ๋“ฑ๋ก๋œ Group ID๋ฅผ ์•ˆ์ •์ ์œผ๋กœ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  3. ๊ธฐ์กด Asset ID๋ฅผ ์ˆ˜๋™์œผ๋กœ ๋‹ค์‹œ ํ• ๋‹นํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  4. ๋“ฑ๋ก๋œ Asset ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•  ๋•Œ Registry๋„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
  5. Asset์„ ์‚ญ์ œํ•˜๊ธฐ ์ „์— Map๊ณผ Sprite์˜ ์ฐธ์กฐ๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  6. ์‚ฌ์šฉ์ด ์ข…๋ฃŒ๋œ Group ID๋ฅผ ์‹ค์ˆ˜๋กœ ์žฌ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

Stable ID๋Š” ์ฐธ์กฐ ๊ด€๊ณ„๋ฅผ ๋ณดํ˜ธํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋Šฅ์ด์ง€๋งŒ Asset์„ ์ˆ˜์ •ํ•œ ํ›„์—๋„ ๊ฐ™์€ ๊ทธ๋ž˜ํ”ฝ์ด ์œ ์ง€๋œ๋‹ค๋Š” ๊ฒƒ์„ ์ž๋™์œผ๋กœ ๋ณด์žฅํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๋“ฑ๋ก๋œ PNG ๋‚ด๋ถ€์—์„œ Tile์˜ ์œ„์น˜๋ฅผ ๋ฐ”๊พธ๋ฉด ๊ธฐ์กด Asset ID๊ฐ€ ๋‹ค๋ฅธ ๊ทธ๋ฆผ์„ ๊ฐ€๋ฆฌํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

11. ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ์˜ˆ์ œ

Tilesheet๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŒŒ์ผ์ด ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

my-bit8-game/
โ”œโ”€โ”€ main.b8
โ”œโ”€โ”€ bit8.assets.toml
โ”œโ”€โ”€ bit8.sprites.toml
โ””โ”€โ”€ assets/
    โ”œโ”€โ”€ terrain (A).png
    โ””โ”€โ”€ characters (B).png

์ด๊ฒƒ์€ ์˜ˆ์‹œ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ Asset ๊ฒฝ๋กœ๋Š” Asset Registry์˜ ๋“ฑ๋ก ์ •๋ณด์™€ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ ๋‹จ๊ณ„

๋‹ค์Œ ํŽ˜์ด์ง€:

Map

๊ด€๋ จ ๋ฌธ์„œ:

Stable Asset ID๋ฅผ ํ†ตํ•ด Script, Map, Sprite๊ฐ€ ๋“ฑ๋ก๋œ Tile์„ ์ผ๊ด€๋˜๊ฒŒ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โš ๏ธ **GitHub.com Fallback** โš ๏ธ