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