菜单
Use when working with sprite sheets, texture atlases, or extracting rectangular regions from images into separate canvases. Handles grid-based and pixel-based extraction, repeating regions for animations, and integrates with @basementuniverse/content-manager.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use this skill when implementing or working with chunk-based viewport rendering systems in 2D games using @basementuniverse/view-port. Handles visible chunk computation, lazy chunk generation, chunk lifecycle management (update/draw), and FIFO cache eviction. Ideal for tile-based or grid-based world rendering where only visible + buffered chunks need processing.
Use this skill when working with 2D tile-based game rendering, implementing chunked tile map systems, procedural tile generation, tile-based collision detection, or optimizing tile rendering performance with the @basementuniverse/tile-map library.
Use this skill when implementing timers, countdowns, or time-tracking features in browser-based games using the @basementuniverse/stopwatch library. Covers game loop integration, timer configuration, and time-based events.
Use this skill when working with @basementuniverse/sprite - a 2D sprite component for games with animations, directions, attachment points, and debug visualization. Invoke when creating or modifying game sprites, implementing sprite animations, setting up directional sprites (e.g., walk-left, walk-right), working with attachment points for composite sprites, or integrating with Content Manager for asset loading.
Use this skill when implementing or working with stack-based scene management in TypeScript/JavaScript games. Covers scene transitions, scene lifecycle, rendering order, and scene stack operations using @basementuniverse/scene-manager.
Use this skill when implementing hierarchical scene graphs for 2D games, managing game object parent-child relationships with transform inheritance, or implementing actors/entities that need positional hierarchy (e.g., weapons attached to players, UI elements in containers).
| name | basementuniverse-texture-atlas |
| description | Use when working with sprite sheets, texture atlases, or extracting rectangular regions from images into separate canvases. Handles grid-based and pixel-based extraction, repeating regions for animations, and integrates with @basementuniverse/content-manager. |
Use this skill when working with @basementuniverse/texture-atlas.
The library operates in two modes:
Relative Mode (default): Image is divided into a grid of cells
Absolute Mode: Direct pixel-based positioning
Each region is extracted from the source image and rendered into a new HTMLCanvasElement. Regions are defined with:
The repeat feature extracts multiple consecutive regions with automatic naming:
repeatOffsetrepeatNameFormat templateimport { textureAtlas } from '@basementuniverse/texture-atlas';
const spriteSheet = new Image();
spriteSheet.src = './sprites.png';
spriteSheet.onload = () => {
const atlas = textureAtlas(spriteSheet, {
relative: true,
width: 4, // 4 columns
height: 3, // 3 rows
regions: {
hero: { x: 0, y: 0 }, // Single cell at grid (0,0)
enemy: { x: 2, y: 1, width: 2 } // 2-cell wide region
}
});
// atlas.hero and atlas.enemy are now HTMLCanvasElements
};
const atlas = textureAtlas(spriteSheet, {
relative: true,
width: 8,
height: 4,
regions: {
walk: {
x: 0,
y: 1,
repeat: 4, // Extract 4 frames
// Creates: walk-1, walk-2, walk-3, walk-4
}
}
});
const atlas = textureAtlas(image, {
relative: false, // Use pixel coordinates
regions: {
logo: { x: 10, y: 20, width: 200, height: 100 },
icon: { x: 220, y: 20, width: 64, height: 64 }
}
});
import { textureAtlasContentProcessor } from '@basementuniverse/texture-atlas';
import ContentManager from '@basementuniverse/content-manager';
ContentManager.initialise({
processors: {
textureAtlas: textureAtlasContentProcessor,
},
});
ContentManager.load([
{
name: 'sprite-sheet',
type: 'image',
args: ['./sprites.png'],
},
{
name: 'character',
type: 'json',
args: [{
relative: true,
width: 5,
height: 2,
regions: {
idle: { x: 0, y: 0 },
walk: { x: 1, y: 0, width: 4 },
},
}],
processors: [{
name: 'textureAtlas',
args: ['sprite-sheet'],
}],
},
]);
// Results in content items: character_idle, character_walk
relative: true (grid mode)width: 1, height: 1 (single cell)cellMargin: 0 (no spacing)Adjacent cell margins collapse, similar to CSS margin collapse:
Default format is {name}-{n} where:
{name} = original region name{n} = 1-based index (starts at 1, not 0)Custom format example: repeatNameFormat: 'frame_{name}_{n}'
When used as a content processor:
{dataName}_{regionName}The library throws errors for:
width <= 0 or height <= 0