레슨 8 / 8·15분
Matter.js 레퍼런스
Matter.js 핵심 API 레퍼런스
Matter.js의 주요 모듈과 자주 사용하는 API를 정리합니다. Engine, World, Bodies, Body, Constraint, Composite, Events, Render, Runner, Mouse, MouseConstraint 등 핵심 모듈의 주요 메서드와 속성을 빠르게 참조할 수 있습니다.
javascript
// ══════════════════════════════════════════
// Engine — 물리 엔진 관리
// ══════════════════════════════════════════
Engine.create(options) // 엔진 생성
Engine.update(engine, delta) // 물리 시뮬레이션 진행 (delta: ms)
// options: { gravity: { x, y, scale } }
// ══════════════════════════════════════════
// World / Composite — 바디 관리
// ══════════════════════════════════════════
World.add(world, bodies) // 바디/제약 추가
World.remove(world, body) // 바디/제약 제거
Composite.allBodies(composite) // 모든 바디 배열 반환
Composite.allConstraints(comp) // 모든 제약 배열 반환
Composite.clear(world, false) // 월드 초기화
// ══════════════════════════════════════════
// Bodies — 바디 팩토리
// ══════════════════════════════════════════
Bodies.rectangle(x, y, w, h, opts) // 사각형
Bodies.circle(x, y, radius, opts) // 원
Bodies.polygon(x, y, sides, r, opts) // 다각형
Bodies.trapezoid(x, y, w, h, slope) // 사다리꼴
Bodies.fromVertices(x, y, verts) // 꼭짓점 기반 커스텀 형태javascript
// ══════════════════════════════════════════
// Body — 바디 조작
// ══════════════════════════════════════════
Body.applyForce(body, pos, force) // 힘 적용
Body.setVelocity(body, {x, y}) // 속도 설정
Body.setAngularVelocity(body, v) // 회전 속도 설정
Body.setPosition(body, {x, y}) // 위치 직접 설정
Body.setAngle(body, angle) // 각도 직접 설정
Body.setStatic(body, isStatic) // 정적/동적 전환
Body.scale(body, scaleX, scaleY) // 크기 변경
// 주요 바디 옵션:
// {
// isStatic, isSensor, label,
// restitution, friction, frictionAir, frictionStatic,
// density, mass, inertia,
// angle, angularVelocity,
// collisionFilter: { group, category, mask },
// render: { fillStyle, strokeStyle, lineWidth, opacity }
// }
// ══════════════════════════════════════════
// Constraint — 제약 조건
// ══════════════════════════════════════════
Constraint.create({
bodyA, bodyB, // 연결할 바디
pointA, pointB, // 연결 지점 (상대 좌표)
length, // 연결 길이
stiffness, // 강성 (0~1)
damping, // 감쇄 (0~1)
})
// ══════════════════════════════════════════
// Events — 이벤트 시스템
// ══════════════════════════════════════════
Events.on(target, eventName, callback)
Events.off(target, eventName, callback)
// 엔진 이벤트: collisionStart, collisionActive,
// collisionEnd, beforeUpdate, afterUpdate
// 마우스 이벤트: mousedown, mouseup, mousemove,
// startdrag, enddrag- •Engine — 물리 엔진 생성/업데이트, 중력 설정
- •Bodies — 사각형, 원, 다각형 등 바디 팩토리 메서드
- •Body — 힘, 속도, 위치, 각도 등 바디 직접 조작
- •Constraint — 두 바디 간 연결 (줄, 스프링, 관절)
- •Composite — 바디와 제약을 그룹으로 묶어 관리
- •Events — 충돌, 업데이트, 마우스 이벤트 감지
- •Mouse / MouseConstraint — 마우스 인터랙션 지원
- •Render / Runner — 기본 렌더러와 시뮬레이션 러너
💡
Matter.js 공식 문서(brm.io/matter-js/docs)에서 모든 API의 상세 설명을 확인할 수 있습니다. GitHub 저장소의 examples 폴더에는 체인, 자동차, 천(cloth), 뉴턴의 요람 등 다양한 데모가 포함되어 있어 학습에 매우 유용합니다.