Builds the Pixel Office Canvas 2D game engine with sprite animation, tile map rendering, BFS pathfinding, and character state visualization. Pure Canvas 2D, no external game libraries. Triggers when game engine features need building or modification.
이 스킬은 Pixel Office의 2D 게임 엔진을 구축한다. 순수 Canvas 2D API만 사용한다.
반드시 먼저 읽어야 할 파일:
src/shared/types.ts — 타입 계약src/shared/asset-manifest.ts — 에셋 정보 (있는 경우)src/shared/office-layout.ts — 오피스 레이아웃 (있는 경우)에셋/레이아웃 파일이 아직 없으면 타입 정의만 기준으로 개발하고, 런타임에 동적 로딩.
src/engine/GameLoop.ts)export class GameLoop {
private running = false;
private lastTime = 0;
private updateFn: (dt: number) => void;
private renderFn: () => void;
start(): void; // RAF 시작
stop(): void; // RAF 중지
pause(): void; // 일시정지 토글
}
requestAnimationFrame 사용src/engine/SpriteSheet.ts)export class SpriteSheet {
constructor(url: string, frameWidth: number, frameHeight: number);
load(): Promise<void>; // Image 로딩
drawFrame(ctx, frameIndex, x, y, scale?): void; // 특정 프레임 그리기
}
frameIndex = row * columns + colsrc/engine/Character.ts)export class Character {
agentState: AgentState;
private currentAnimation: SpriteAnimation;
private frameTimer: number;
private currentFrame: number;
private targetPosition: { x: number; y: number } | null;
private path: { x: number; y: number }[] | null;
updateState(state: AgentState): void; // 상태 업데이트
update(dt: number): void; // 프레임 업데이트
render(ctx: CanvasRenderingContext2D): void; // 그리기
}
idle: 제자리 미세 움직임, 반투명 ZZZ 말풍선typing: 키보드 타이핑 모션, 책상 앞 고정reading: 고개 좌우 움직임 (파일 읽는 느낌)executing: 활발한 동작, 작은 기어 아이콘waiting: 물음표 말풍선 깜빡 (주의 필요!)done: 체크마크, 평화로운 자세error: 느낌표 말풍선, 붉은 깜빡임waiting → "?" 말풍선 (노란색 테두리)error → "!" 말풍선 (빨간색 테두리)src/engine/TileMap.ts)export class TileMap {
constructor(layout: OfficeLayout, spriteSheet: SpriteSheet);
render(ctx, camera): void; // 뷰포트 영역만 렌더링
isWalkable(tileX, tileY): boolean;
getSeats(): Seat[];
tileToWorld(tileX, tileY): { x: number; y: number };
worldToTile(worldX, worldY): { tileX: number; tileY: number };
}
src/engine/PathFinder.ts)export class PathFinder {
constructor(isWalkable: (x: number, y: number) => boolean, width: number, height: number);
findPath(startX, startY, endX, endY): { x: number; y: number }[];
}
src/engine/Camera.ts)export class Camera {
x: number; y: number;
zoom: number; // 1.0 = 기본, 2.0 = 2배 확대
viewportWidth: number;
viewportHeight: number;
pan(dx: number, dy: number): void;
setZoom(zoom: number): void;
worldToScreen(wx, wy): { x: number; y: number };
screenToWorld(sx, sy): { x: number; y: number };
focusOn(worldX, worldY): void; // 특정 위치로 부드러운 이동
}
src/engine/index.ts)export class PixelOfficeEngine {
constructor(canvas: HTMLCanvasElement);
start(): void;
stop(): void;
// 에이전트 관리
updateAgent(state: AgentState): void;
addAgent(state: AgentState): void;
removeAgent(id: string): void;
// 카메라
focusOnAgent(id: string): void;
// 이벤트
onAgentClick(callback: (agentId: string) => void): void;
// 리사이즈
resize(width: number, height: number): void;
}
이것이 frontend-builder가 사용할 유일한 인터페이스.