레슨 1 / 8·15분
엔진과 월드
Matter.js 물리 엔진 시작하기
Matter.js는 웹 브라우저에서 2D 물리 시뮬레이션을 구현하는 자바스크립트 라이브러리입니다. Engine은 물리 연산을 수행하고, World는 물리 객체(Body)가 존재하는 공간이며, Render는 시뮬레이션을 화면에 그립니다. Runner는 매 프레임 Engine을 업데이트하여 물리가 진행되도록 합니다.
javascript
// Matter.js 모듈 가져오기
const { Engine, Render, Runner, World, Bodies } = Matter;
// ── 1. 엔진 생성 — 물리 연산 담당 ──
const engine = Engine.create({
gravity: { x: 0, y: 1 }, // 중력 방향 (아래쪽)
});
// ── 2. 렌더러 생성 — 시뮬레이션 화면 표시 ──
const render = Render.create({
element: document.getElementById('canvas-container'),
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false, // false면 색상/질감 표시
background: '#1a1a2e',
},
});
// ── 3. 렌더러 및 러너 실행 ──
Render.run(render);
const runner = Runner.create();
Runner.run(runner, engine);javascript
// ── 바디(Bodies) 생성 — 물리 객체 ──
// 떨어지는 공
const ball = Bodies.circle(400, 50, 30, {
restitution: 0.8, // 탄성 (0~1, 1이면 완벽한 반동)
render: { fillStyle: '#e74c3c' },
});
// 떨어지는 박스
const box = Bodies.rectangle(300, 100, 60, 60, {
restitution: 0.5,
render: { fillStyle: '#3498db' },
});
// 바닥 (isStatic: true → 움직이지 않는 고정 객체)
const ground = Bodies.rectangle(400, 580, 810, 40, {
isStatic: true,
render: { fillStyle: '#2c3e50' },
});
// 벽
const wallLeft = Bodies.rectangle(0, 300, 40, 600, { isStatic: true });
const wallRight = Bodies.rectangle(800, 300, 40, 600, { isStatic: true });
// 월드에 추가
World.add(engine.world, [ball, box, ground, wallLeft, wallRight]);- •Engine.create() — 물리 엔진 인스턴스 생성, 중력 등 설정
- •Render.create() — 캔버스 렌더러 생성, wireframes: false로 컬러 표시
- •Runner.run(runner, engine) — 매 프레임 물리 시뮬레이션 업데이트
- •Bodies.circle(x, y, radius, options) — 원형 바디 생성
- •Bodies.rectangle(x, y, width, height, options) — 사각형 바디 생성
- •World.add(world, bodies) — 월드에 바디 추가
💡
isStatic: true로 설정한 바디는 중력이나 충돌의 영향을 받지 않고 고정됩니다. 바닥, 벽, 플랫폼 등을 만들 때 사용하세요. restitution 값은 0(찰흙처럼 흡수)부터 1(완벽한 반동)까지 설정합니다.