菜单
Scale-to-fit canvas layout system for games. Use when implementing or modifying game layout, resolution handling, UI scaling, text fitting, or input coordinate transformation. Ensures identical visual composition across all devices using unified scale model.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Comprehensive game design methodology including OGD (Organic Game Design), player psychology, mechanics, balancing, and retention strategies.
Extracts emojis as SVGs from a given font file or URL. Use this skill when you need to obtain high-quality SVG assets for specific emojis from a specific font.
| name | adaptive-layout |
| description | Scale-to-fit canvas layout system for games. Use when implementing or modifying game layout, resolution handling, UI scaling, text fitting, or input coordinate transformation. Ensures identical visual composition across all devices using unified scale model. |
This skill defines how the game handles different screen sizes, aspect ratios, and orientations.
The game uses a scale-to-fit canvas model with a single unified scale applied to both gameplay and UI.
The game operates in two coordinate spaces:
window.innerWidth, window.innerHeight).All visuals are authored in logical resolution and scaled uniformly.
The game is a rigid canvas:
The entire game must always fit inside the visible screen.
The game uses one scale value. There is no separate UI scale.
uiScale = gameScale
Gameplay and UI always scale together, guaranteeing fully predictable sizes.
Each project defines:
BASE_WIDTHBASE_HEIGHTAll positions, sizes, and UI bounds are authored in this coordinate system.
On every resize or orientation change, compute:
layout(screenWidth, screenHeight) {
const targetAspect = BASE_WIDTH / BASE_HEIGHT;
const currentAspect = screenWidth / screenHeight;
if (currentAspect > targetAspect) {
// Fit height (pillarbox)
this.gameScale = screenHeight / BASE_HEIGHT;
this.offsetX = (screenWidth - BASE_WIDTH * this.gameScale) / 2;
this.offsetY = 0;
} else {
// Fit width (letterbox)
this.gameScale = screenWidth / BASE_WIDTH;
this.offsetX = 0;
this.offsetY = (screenHeight - BASE_HEIGHT * this.gameScale) / 2;
}
}
gameRect is the screen-space rectangle occupied by the scaled game.
gameRectUI is part of the game composition:
There is no responsive or fluid UI system.
UI may visually overlap gameplay elements. Correctness is ensured by consistent scale and composition, not by spatial separation.
By default, the game uses a single stable layout:
Exception: Layout rearrangement is allowed only when explicitly requested by the user. Do NOT introduce alternative layouts proactively.
All input must be transformed from screen space to game space:
gameX = (screenX - offsetX) / gameScale
gameY = (screenY - offsetY) / gameScale
gameRect is ignoredSupport device pixel ratio (DPR):
canvas.width = Math.floor(width * dpr);
canvas.height = Math.floor(height * dpr);
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
Rendering always uses logical coordinates.
All UI text is rendered inside predefined logical rectangles.
Text must adapt to the area. The area must never adapt to the text.
For any label placed inside a fixed rectangle (buttons, tabs, headers, counters), dynamic text fitting is mandatory:
Only text scale may change.
Localized text is unpredictable. UI must never rely on string length or language. Text fitting must always be applied.
Text fitting must not:
Only text scale is allowed to change.
The layout must remain correct under:
Visual composition must remain identical.
This game is not a responsive website. It is a scaled interactive canvas.
The system prioritizes:
This layout system guarantees:
Everything scales together. Nothing adapts automatically.