메뉴
Use this skill when implementing or reviewing HTML5 Canvas rendering code with @basementuniverse/canvas-helpers, including shape drawing, style configuration, path interpolation, image layout/repeat modes, and context binding via withContext.
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-canvas-helpers |
| description | Use this skill when implementing or reviewing HTML5 Canvas rendering code with @basementuniverse/canvas-helpers, including shape drawing, style configuration, path interpolation, image layout/repeat modes, and context binding via withContext. |
Use this skill when working with @basementuniverse/canvas-helpers.
This library is a lightweight set of drawing helpers for CanvasRenderingContext2D.
It is intentionally unopinionated: you can use helpers for repetitive operations,
then drop down to native canvas APIs whenever needed.
line, circle, rectangle, polygon, path, grid, image, arrow, cross).StyleOptions while still using native canvas semantics.withContext and reuse helper calls.linear, bezier, catmull-rom) or image fit/repeat behavior.CanvasRenderingContext2D as first argument.Partial<StyleOptions>.context.save() / context.restore() internally.batch: true avoids beginPath and immediate stroke/fill for compatible helpers, enabling manual batching.arrow explicitly does not support batch drawing because it renders the line and arrowhead in separate path steps.rectangleAnchor, arrow, grid, image, pathType).withContext.clearPatternCache.withContext expects variadic function arguments, not an array wrapper.path with catmull-rom needs at least 4 vertices; it falls back to linear otherwise.path with bezier clamps order to 1..3.image throws if width/height cannot be derived from the source.lineDash handling is nuanced:
lineDash in style wins.lineStyle is provided, default dash pattern is used.repeatMode supports loop-based repeat and pattern-based repeat; pattern-based modes use an internal cache.