Skip to content

Assets and Tilesheets ja

Shiraishi_AKi edited this page Oct 6, 2026 · 1 revision

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 ใฎ 6 ็•ช็›ฎใฎ Tile ใ‚’ Solid ใซ่จญๅฎšใ™ใ‚‹ๅ ดๅˆ๏ผš

solid = [6]

ใ“ใ‚Œใฏ็™ป้Œฒๆธˆใฟ Tilesheet Group ๅ†…ใฎ 6 ็•ช็›ฎใฎ 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

ใ“ใ‚Œใซใ‚ˆใ‚Šใ€1 ใคใฎ 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 ใ‚’ไธ€่ฒซใ—ใฆๅ‚็…งใงใใพใ™ใ€‚

Clone this wiki locally