メニュー
Use this skill when integrating or modifying debug overlays built with @basementuniverse/debug on HTML5 canvas render loops, including values, charts, markers, borders, tags, and frame-clear behavior.
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 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 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.
| name | basementuniverse-debug |
| description | Use this skill when integrating or modifying debug overlays built with @basementuniverse/debug on HTML5 canvas render loops, including values, charts, markers, borders, tags, and frame-clear behavior. |
Use this skill when working with @basementuniverse/debug.
Use this skill when you need to:
Debug.value).Debug.chart).Debug.marker, Debug.border).Debug.initialise.CanvasRenderingContext2D.Debug.initialise(...) exactly once before any Debug.* usage.Debug.initialise multiple times in one runtime; it throws.Debug.draw(...) to clear values/markers/borders by default each call.Debug.removeChart) or Debug.clear(true).Debug.draw(context, tags, false) and manually clear once per frame.label.space: 'world' draws in current world transform.space: 'screen' draws after reset transform, pinned to viewport.import Debug from '@basementuniverse/debug';
Debug.initialise({
margin: 12,
defaultChart: { valueBufferSize: 120, maxValue: 240 },
});
function draw(context: CanvasRenderingContext2D) {
// Your scene draw here...
Debug.value('FPS', fps, { align: 'right' });
Debug.chart('actors', actorCount, { align: 'right' });
Debug.marker('player', player.name, player.position);
Debug.border('player-hitbox', '', player.position, {
size: player.size,
borderStyle: 'dashed',
});
Debug.draw(context);
}
Debug.draw.size.radius.tags and draw receives desired tag list.valueBufferSize.