Skip to content

Assets and Tilesheets zh TW

Shiraishi_AKi edited this page Oct 6, 2026 · 1 revision

Asset ่ˆ‡ Tilesheet

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

BIT8_CLI ไฝฟ็”จๅทฒ่จปๅ†Š็š„ PNG Tilesheet๏ผŒ็‚บ้Šๆˆฒๆไพ›ๅœ–ๅƒ็ด ๆใ€‚

ๆฏๅผต Tilesheet ้ƒฝๆœƒๅˆ‡ๅˆ†ๆˆ 8ร—8 ๅƒ็ด ็š„ Tileใ€‚่จปๅ†ŠๅพŒ็š„ Tile ๆœƒๅ–ๅพ—็ฉฉๅฎš็š„ Asset ID๏ผŒไพ›่…ณๆœฌใ€Mapใ€Sprite ๅ’Œ็ขฐๆ’ž็ณป็ตฑๅผ•็”จใ€‚

ๆœฌๆŒ‡ๅ—ไป‹็ดน BIT8_CLI 0.1.0 ็š„็ด ๆ็ณป็ตฑใ€‚

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 ๆ˜ฏ็ด ๆ่บซๅˆ†็š„ๅ”ฏไธ€ๆฌŠๅจไพ†ๆบใ€‚

ไธ่ฆๅ‡่จญๅช่ฆๆŠŠ PNG ๆ”พ้€ฒๅฐˆๆกˆ๏ผŒๅฐฑๆœƒ่‡ชๅ‹•ๅฎŒๆˆ่จปๅ†Šใ€‚

ๆ‡‰้€้Žๅฐˆๆกˆๆ”ฏๆด็š„ Asset ่จปๅ†Šๆต็จ‹ๅปบ็ซ‹ๆˆ–ๆ›ดๆ–ฐ Registryใ€‚

3. Stable Asset IDs

BIT8_CLI ไฝฟ็”จไปฅไธ‹ๅฝขๅผ็š„็ฉฉๅฎš่ญ˜ๅˆฅ็ขผ๏ผš

Group + Tile Number

ไพ‹ๅฆ‚๏ผš

A1
A4
B12
C3

Group ไปฃ่กจๅทฒ่จปๅ†Š็š„ Tilesheetใ€‚

ๆ•ธๅญ—ไปฃ่กจ่ฉฒ Tilesheet ไธญ็š„ Tileใ€‚

้€™็จฎ่จญ่จˆ่ฎ“่…ณๆœฌๅ’Œ Map ไธๅฟ…ไพ่ณดๅ…จๅŸŸๆ•ธๅญ—ๆŽ’ๅˆ—้ †ๅบใ€‚

ไพ‹ๅฆ‚๏ผš

spr(A4, 16, 16)

ๆœƒๅœจๆŒ‡ๅฎšๅบงๆจ™็นช่ฃฝ A4 Tileใ€‚

็‚บไป€้บผ้œ€่ฆ Stable IDs๏ผŸ

ๅ‡่จญไธ€ๅ€‹ๅฐˆๆกˆๅŒ…ๅซๅคšๅผต Tilesheetใ€‚

ๅฆ‚ๆžœ็ด ๆๅฎŒๅ…จไพ่ณดๅ…จๅŸŸๅˆ—่กจ็š„ไฝ็ฝฎ๏ผŒๆ–ฐๅขžๆˆ–้‡ๆ–ฐๆŽ’ๅˆ— Tilesheet ๅฐฑๅฏ่ƒฝๆ”น่ฎŠๆ—ขๆœ‰ๅผ•็”จใ€‚

Stable Asset IDs ๅฏไปฅ้™ไฝŽ้€™้กžๅ•้กŒใ€‚

BIT8_CLI ไนŸๆœƒ่ฟฝ่นคๅทฒ้€€ๅฝน็š„ Group ID๏ผŒ้ฟๅ…ๆ„ๅค–้‡่ค‡ไฝฟ็”จใ€‚

4. ๅทฒ่จปๅ†Š PNG ็š„ๅ‘ฝๅ

ๅทฒ่จปๅ†Š็š„ Tilesheet ไฝฟ็”จไปฅไธ‹ๆจ™ๆบ–ๆช”ๅๅฝขๅผ๏ผš

<ๅ็จฑ> (<GROUP>).png

ไพ‹ๅฆ‚๏ผš

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

Group ID ๆ˜ฏๅทฒ่จปๅ†Š็ด ๆ่บซๅˆ†็š„ไธ€้ƒจๅˆ†ใ€‚

Asset Registry ไป็„ถๆ˜ฏๆœ€็ต‚ไพๆ“šใ€‚

ๅฆ‚ๆžœ็›ดๆŽฅๆ‰‹ๅ‹•้‡ๆ–ฐๅ‘ฝๅๅทฒ่จปๅ†Š็š„ PNG๏ผŒๅปๆฒ’ๆœ‰ๅŒๆญฅๆ›ดๆ–ฐ่จปๅ†Š่ณ‡ๆ–™๏ผŒๅฏ่ƒฝ้€ ๆˆ็ด ๆๅผ•็”จๅคฑๆ•ˆใ€‚

5. ็นช่ฃฝ Tile

ไฝฟ็”จ spr() ็นช่ฃฝๅทฒ่จปๅ†Š็š„ Tileใ€‚

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

้€™ๆฎต็จ‹ๅผๆœƒๆธ…้™ค็•ซ้ข๏ผŒ็„ถๅพŒ็นช่ฃฝ A4 Tileใ€‚

ไฝฟ็”จๅ‰ๅฟ…้ ˆ็ขบไฟๅฐˆๆกˆๅทฒ่จปๅ†Šๅฐๆ‡‰็š„ Tileใ€‚

็‚บไบ†็›ธๅฎน่ˆŠๅฐˆๆกˆ๏ผŒBIT8_CLI ไปไฟ็•™ๅ‚ณ็ตฑๆ•ธๅญ— Sprite ๅƒ็…งใ€‚

ๆ–ฐๅฐˆๆกˆๅปบ่ญฐไฝฟ็”จ Stable Asset IDsใ€‚

6. ้€ๆ˜Žๅบฆ่ˆ‡่ชฟ่‰ฒ็›ค

BIT8_CLI ๆ”ฏๆดๅทฒ่จปๅ†Š PNG Tilesheet ไธญ็š„้€ๆ˜Žๅƒ็ด ใ€‚

Tile ็นช่ฃฝๆ™‚๏ผŒ้€ๆ˜Žๅƒ็ด ๆœƒไปฅ้€ๆ˜Žๆ–นๅผ่™•็†ใ€‚

PNG ้ก่‰ฒๆœƒ่ฝ‰ๆ›ๆˆ Runtime ไฝฟ็”จ็š„่ชฟ่‰ฒ็›ค่กจ็คบๆ–นๅผใ€‚

็ด ๆ่™•็†ๆต็จ‹็š„่จญ่จˆ็›ฎๆจ™๏ผŒๆ˜ฏ่ฎ“ Runtime ็นช่ฃฝ็ตๆžœ่ˆ‡ Editor ้ ่ฆฝไฟๆŒไธ€่‡ดใ€‚

็‚บไบ†ๅพ—ๅˆฐๅฏ้ ๆœŸ็š„็ตๆžœ๏ผŒๅปบ่ญฐไฝฟ็”จ้ก่‰ฒ่ˆ‡้€ๆ˜Žๅบฆๆ˜Ž็ขบ็š„ Pixel Art ๅœ–็‰‡ใ€‚

7. Solid Tile

Tile ๅฏไปฅๆจ™่จ˜็‚บ Solid๏ผŒไพ›็ขฐๆ’ž็ณป็ตฑไฝฟ็”จใ€‚

Solid Tile ็š„่จญๅฎšๅฑฌๆ–ผ Asset Registryใ€‚

ไพ‹ๅฆ‚๏ผŒๆŸๅผต Tilesheet ๅฏไปฅๅฐ‡็ฌฌๅ…ญๅ€‹ Tile ๆจ™่จ˜็‚บ Solid๏ผš

solid = [6]

้€™ไปฃ่กจ่ฉฒ Tilesheet Group ไธญ็š„็ฌฌๅ…ญๅ€‹ Tileใ€‚

Solid Tile ๅœจ็ขฐๆ’žๅˆคๅฎšไธญไฝ”ๆ“šๅฎŒๆ•ด็š„ 8ร—8 ๅƒ็ด ๅ€ๅŸŸใ€‚

Node ๅฏไปฅ้€้Ž๏ผš

self:collide(dx, dy)

ไปฅๅŠ๏ผš

self:move(dx, dy)

ไฝฟ็”จ Solid Tile ็ขฐๆ’žใ€‚

solid ๅฟ…้ ˆๆ”พๅœจ bit8.assets.toml ไธญๅฐๆ‡‰็š„็ด ๆ่จปๅ†Š้ …็›ฎๅ…ง๏ผŒ่€Œไธๆ˜ฏไปปๆ„ๆ”พๅœจๆœ€ๅค–ๅฑคใ€‚

่ฉณ็ดฐ่ณ‡่จŠ่ซ‹้–ฑ่ฎ€ Collisionใ€‚

8. Asset ่ˆ‡ Map

Map ไฝฟ็”จๅทฒ่จปๅ†Š็š„ Asset IDใ€‚

Map Cell ๅฏไปฅๅŒ…ๅซ๏ผš

A1
A2
A3

็ญ‰ Tile ๅƒ็…งใ€‚

ๅ› ๆญค๏ผŒๅŒไธ€ๅผต Map ๅฏไปฅไฝฟ็”จไธๅŒ Group ็š„ Tileใ€‚

Map Workspace ๆไพ›้ธๆ“‡ๅทฒ่จปๅ†Š Tile๏ผŒไปฅๅŠๅฐ‡ Tile ็นช่ฃฝๅˆฐ Map Cell ็š„ๅทฅๅ…ทใ€‚

่ฉณ็ดฐ่ณ‡่จŠ่ซ‹้–ฑ่ฎ€ Mapใ€‚

9. Asset ่ˆ‡ Sprite

Sprite Definition ไนŸๆœƒไฝฟ็”จๅทฒ่จปๅ†Š็š„ Tileใ€‚

Sprite ๅฏไปฅๅผ•็”จ Tile ไพ†ๅฎš็พฉ๏ผš

  • ้œๆ…‹้ ่ฆฝ
  • Animation Frame
  • ๅ…ทๅ Animation

Sprite Definition ๅ„ฒๅญ˜ๅœจ๏ผš

bit8.sprites.toml

ไพ‹ๅฆ‚๏ผŒๅ็‚บ Player ็š„ Sprite ๅฏไปฅไฝฟ็”จๅคšๅ€‹ๅทฒ่จปๅ†Š Tile ไฝœ็‚บๅ‹•็•ซๅฝฑๆ ผใ€‚

Node Script ๅฐฑ่ƒฝ้€้Ž๏ผš

self:play("walk")

ๆŽงๅˆถๅ‹•็•ซ๏ผŒไธฆไฝฟ็”จ๏ผš

self:spr()

็นช่ฃฝ็›ฎๅ‰็š„ๅฝฑๆ ผใ€‚

่ฉณ็ดฐ่ณ‡่จŠ่ซ‹้–ฑ่ฎ€ Sprite ่ˆ‡ Animationใ€‚

10. Asset ็ฎก็†ๅปบ่ญฐ

็ฎก็†็ด ๆๆ™‚๏ผš

  1. ไฝฟ็”จๆ”ฏๆด็š„ Asset ่จปๅ†Šๆต็จ‹ๅŠ ๅ…ฅ PNG Tilesheetใ€‚
  2. ็ถญๆŒๅทฒ่จปๅ†Š Group ID ็š„็ฉฉๅฎšๆ€งใ€‚
  3. ้ฟๅ…ๆ‰‹ๅ‹•้‡ๆ–ฐๅˆ†้…ๆ—ขๆœ‰ Asset IDใ€‚
  4. ไฟฎๆ”นๅทฒ่จปๅ†Š็ด ๆๆช”ๆกˆๆ™‚๏ผŒๅŒๆญฅๆ›ดๆ–ฐ Registryใ€‚
  5. ็งป้™ค็ด ๆๅ‰๏ผŒๅ…ˆๆชขๆŸฅ Map ่ˆ‡ Sprite ็š„ๅผ•็”จใ€‚
  6. ๅˆฉ็”จ้€€ๅฝน Group ID ๆฉŸๅˆถ๏ผŒ้ฟๅ…็ด ๆ่บซๅˆ†่ขซๆ„ๅค–้‡่ค‡ไฝฟ็”จใ€‚

Stable IDs ๅฏไปฅไฟ่ญทๅผ•็”จ้—œไฟ‚๏ผŒไฝ†ไธไปฃ่กจไปปไฝ•็ด ๆไฟฎๆ”น้ƒฝ่ƒฝ่‡ชๅ‹•็ถญๆŒ็›ธๅŒ็š„่ฆ–่ฆบๆ„็พฉใ€‚

ไพ‹ๅฆ‚๏ผŒ้‡ๆ–ฐๆŽ’ๅˆ—ๅทฒ่จปๅ†Š 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 Registry ไธญ็š„่จปๅ†Š่ณ‡ๆ–™ไธ€่‡ดใ€‚

ไธ‹ไธ€ๆญฅ

็นผ็บŒ้–ฑ่ฎ€๏ผš

Map

็›ธ้—œๆ–‡ไปถ๏ผš

Stable Asset IDs ่ฎ“่…ณๆœฌใ€Map ๅ’Œ Sprite ๅฏไปฅ็ฉฉๅฎšๅผ•็”จๅทฒ่จปๅ†Š็š„ Tileใ€‚

Clone this wiki locally