メニュー
Use this skill when implementing, integrating, or debugging camera movement, zoom, coordinate conversion, and viewport bounds with @basementuniverse/camera in 2D canvas-based browser games.
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-camera |
| description | Use this skill when implementing, integrating, or debugging camera movement, zoom, coordinate conversion, and viewport bounds with @basementuniverse/camera in 2D canvas-based browser games. |
Use this skill when working with @basementuniverse/camera.
Use this skill when you need to:
draw() convenience method.import Camera from '@basementuniverse/camera';
const camera = new Camera(
{ x: 0, y: 0 },
{
minScale: 0.5,
maxScale: 4,
moveEaseAmount: 0.1,
scaleEaseAmount: 0.1,
}
);
function update() {
camera.update({ x: canvas.width, y: canvas.height });
}
function render(context: CanvasRenderingContext2D) {
context.save();
camera.setTransforms(context);
// Render world-space objects here
context.restore();
}
camera.update(screen) before camera.setTransforms(context) each frame.camera.position and camera.scale for eased movement/zoom.camera.positionImmediate and camera.scaleImmediate for instant snaps.camera.actualPosition and camera.actualScale for post-easing values.camera.bounds to query the visible world rectangle.Use these for input and hit testing:
const worldMouse = camera.screenToWorld({ x: mouseX, y: mouseY });
const screenEnemy = camera.worldToScreen(enemy.position);
options.bounds is provided, target camera position is clamped each update.[minScale, maxScale].The camera.draw(context, screen) method still works, but it is a compatibility method that only calls:
camera.update(screen)camera.setTransforms(context)Prefer calling those methods explicitly in new code.