Spritecook Use Dual Grid Tilesets

SpriteCook/skills/skills/spritecook-use-dual-grid-tilesets

作者 SpriteCookfb6d4eeffa3f256e05e0f01ebead772ec581d9cd無授權條款收錄於 2026年10月9日更新於 2026年10月9日

Implementation guide for using SpriteCook top-down 15-piece tilesets with a dual-grid autotile renderer. Use when explaining or coding how to map a 4x4 15-piece tileset image into terrain using SpriteCook's dual-grid mask system.

僅含說明Software Development

AI 產生的概覽

使用雙網格自動拼接遮罩渲染器繪製 SpriteCook 15 格俯視地形集的實作指南。

功能: 說明 SpriteCook 雙網格 15 格地形集的運作方式：每個繪製的圖塊會取樣周圍四個邏輯儲存格，組成 4 位元遮罩。文件提供遮罩位元順序、16 項的影格查找表，以及 4x4 圖集的欄列計算方式。另外也附上渲染器虛擬碼，以及關於地圖尺寸、像素畫縮放和遮罩處理的實用說明。
適用情境: 在撰寫或解說使用 SpriteCook 4x4 15 格地形集的俯視自動拼接渲染器時使用。適合需要把已繪製的邏輯地形儲存格轉成可見圖塊的遊戲引擎或自訂渲染器工作。
執行需求: 此技能不附帶指令碼或資源，只有說明文件。它假定已有 SpriteCook 4x4 15 格地形集影像，以及可繪製影像區域的渲染環境。

SpriteCook Dual-Grid 15-Piece Tilesets

Use this skill when implementing a top-down 15-piece SpriteCook tileset in a game engine or custom renderer.

This skill is about using a generated tileset. For generation, use spritecook-generate-tilesets.

Concept

A dual-grid tileset stores terrain as logical painted cells, then renders visible tiles between those cells. Each rendered tile is chosen from the four logical cells around it.

For each rendered tile, sample:

top-left logical cell
top-right logical cell
bottom-left logical cell
bottom-right logical cell

That four-cell pattern becomes a 4-bit mask. The mask chooses one frame from the 4x4 15-piece atlas.

Mask Order

Use SpriteCook's current mask bit order:

let mask = 0if (filled(x - 1, y - 1)) mask |= 1 // top-leftif (filled(x,     y - 1)) mask |= 2 // top-rightif (filled(x - 1, y    )) mask |= 4 // bottom-leftif (filled(x,     y    )) mask |= 8 // bottom-right

let mask = 0if (filled(x - 1, y - 1)) mask |= 1 // top-leftif (filled(x,     y - 1)) mask |= 2 // top-rightif (filled(x - 1, y    )) mask |= 4 // bottom-leftif (filled(x,     y    )) mask |= 8 // bottom-right

Mask 0 renders nothing. Other masks map into the 4x4 atlas through this lookup:

The atlas cell is:

const frame = frameByMask[mask]if (frame < 0) return nullconst atlasColumn = frame % 4const atlasRow = Math.floor(frame / 4)

const frame = frameByMask[mask]if (frame < 0) return nullconst atlasColumn = frame % 4const atlasRow = Math.floor(frame / 4)

Renderer Pseudocode

type CellMap = boolean[] // width * height logical terrain cells
function cellIndex(x: number, y: number, columns: number) {  return y * columns + x}
function isFilled(cells: CellMap, x: number, y: number, columns: number, rows: number) {  return x >= 0 && y >= 0 && x < columns && y < rows && cells[cellIndex(x, y, columns)] === true}
function dualGridMask(cells: CellMap, x: number, y: number, columns: number, rows: number) {  let mask = 0  if (isFilled(cells, x - 1, y - 1, columns, rows)) mask |= 1  if (isFilled(cells, x,     y - 1, columns, rows)) mask |= 2  if (isFilled(cells, x - 1, y,     columns, rows)) mask |= 4  if (isFilled(cells, x,     y,     columns, rows)) mask |= 8  return mask}
function atlasCellForMask(mask: number) {  const frameByMask = [-1, 15, 8, 9, 0, 11, 14, 7, 13, 4, 1, 10, 3, 2, 5, 6]  const frame = frameByMask[Math.max(0, Math.min(15, Math.floor(mask)))]  if (frame < 0) return null  return { column: frame % 4, row: Math.floor(frame / 4) }}
function renderDualGrid(ctx, atlasImage, cells: CellMap, columns: number, rows: number, tileSize: number) {  for (let y = 0; y <= rows; y += 1) {    for (let x = 0; x <= columns; x += 1) {      const mask = dualGridMask(cells, x, y, columns, rows)      const atlasCell = atlasCellForMask(mask)      if (!atlasCell) continue
      ctx.drawImage(        atlasImage,        atlasCell.column * tileSize,        atlasCell.row * tileSize,        tileSize,        tileSize,        x * tileSize,        y * tileSize,        tileSize,        tileSize,      )    }  }}

type CellMap = boolean[] // width * height logical terrain cells
function cellIndex(x: number, y: number, columns: number) {  return y * columns + x}
function isFilled(cells: CellMap, x: number, y: number, columns: number, rows: number) {  return x >= 0 && y >= 0 && x < columns && y < rows && cells[cellIndex(x, y, columns)] === true}
function dualGridMask(cells: CellMap, x: number, y: number, columns: number, rows: number) {  let mask = 0  if (isFilled(cells, x - 1, y - 1, columns, rows)) mask |= 1  if (isFilled(cells, x,     y - 1, columns, rows)) mask |= 2  if (isFilled(cells, x - 1, y,     columns, rows)) mask |= 4  if (isFilled(cells, x,     y,     columns, rows)) mask |= 8  return mask}
function atlasCellForMask(mask: number) {  const frameByMask = [-1, 15, 8, 9, 0, 11, 14, 7, 13, 4, 1, 10, 3, 2, 5, 6]  const frame = frameByMask[Math.max(0, Math.min(15, Math.floor(mask)))]  if (frame < 0) return null  return { column: frame % 4, row: Math.floor(frame / 4) }}
function renderDualGrid(ctx, atlasImage, cells: CellMap, columns: number, rows: number, tileSize: number) {  for (let y = 0; y <= rows; y += 1) {    for (let x = 0; x <= columns; x += 1) {      const mask = dualGridMask(cells, x, y, columns, rows)      const atlasCell = atlasCellForMask(mask)      if (!atlasCell) continue
      ctx.drawImage(        atlasImage,        atlasCell.column * tileSize,        atlasCell.row * tileSize,        tileSize,        tileSize,        x * tileSize,        y * tileSize,        tileSize,        tileSize,      )    }  }}

Practical Notes

Render one more tile column and row than the logical map size because rendered tiles sit around painted logical cells.
For pixel art, disable smoothing and use nearest-neighbor scaling.
Treat mask 15 as the filled interior tile and mask 0 as transparent/no draw.
Use the generated atlas exactly as a 4x4 grid of equal tile-sized cells.
Do not reinterpret the sheet as a normal 8-neighbor blob tileset; this mapping is specifically SpriteCook's dual-grid 15-piece layout.

來源與署名

來源：SpriteCook/skills位於skills/spritecook-use-dual-grid-tilesets提交fb6d4ee

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Spritecook Use Dual Grid Tilesets

SpriteCook Dual-Grid 15-Piece Tilesets

Concept

Mask Order

Renderer Pseudocode

Practical Notes

來源與署名

更多來自 SpriteCook/skills 的技能

Spritecook Workflow Essentials

Spritecook Generate Sprites

Spritecook Use Assets In Godot

Spritecook Animate Assets

Spritecook Generate Tilesets

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices