Kiwi Engine

빠른 시작

1. 프로젝트에 kiwiengine을 설치합니다. npm install kiwiengine
2. Renderer를 생성하고 레이어를 구성합니다.
3. GameObject를 만들어 renderer에 추가합니다.

import { Renderer, GameObject } from 'kiwiengine'

const renderer = new Renderer(document.body, {
  layers: [
    { name: 'background', drawOrder: 0 },
    { name: 'game',       drawOrder: 1 },
    { name: 'ui',         drawOrder: 2 },
  ]
})

const player = new GameObject({ x: 0, y: 0, layer: 'game' })
renderer.add(player)

핵심 개념

• 중심 좌표계 — 화면 중앙이 (0,0). screenToWorld(x,y)로 화면→월드 좌표 변환.
• 반응형 캔버스 — 부모 엘리먼트 크기에 맞춰 자동 리사이징.
• 레이어/카메라 — 레이어별 그리기 순서, 카메라 이동/줌.
• 시간 기반 업데이트 — Ticker가 dt(초)를 전달. 디버그 모드에서 비활성 탭 6FPS 캡.

주요 노드

• GameObject — 위치/회전/스케일/레이어, 자식 관리.
• SpriteNode / AnimatedSpriteNode — 텍스처/스프라이트시트 렌더링.
• BitmapTextNode — 비트맵 폰트 텍스트.
• CircleNode / RectangleNode — 기본 도형.
• SpineNode — Spine 애니메이션.
• ParticleSystem — 간단한 파티클 버스트.
• Dom* — DOM 기반 렌더 노드(스프라이트/애니/파티클/컨테이너).

충돌/물리

• checkCollision — 사각/원/타원/폴리곤 지원.
• PhysicsWorld / PhysicsObject — 중력/충돌 시뮬레이션 및 렌더 변환 동기화.

오디오

• musicPlayer — BGM 플레이어 (localStorage에 볼륨 저장).
• sfxPlayer — 경량 효과음 재생.

디버그

enableDebug()로 디버그 모드 토글. 비활성 탭에서 자동 6FPS 고정 스텝 등 동작.