웹에서 2D 물리엔진 사용하기 #1 Matter.js 시작하기

Explanation

오늘은 웹에서 2D 물리 엔진을 사용해보려 합니다~ 물리 엔진에 관련해서 몇가지 라이브러리들이 있는데요. 짧게 알아봤을때, Box2Djs와 Matter.js 이렇게 두개를 찾아 볼 수 있었어요. 그리고 저는 이중에서 Matter.js에 대해 공부하고 공부한 내용을 조금씩 정리해보려 합니다.

저도 아직 사용해 본 지 얼마 되지 않아서 잘 모르는 부분이 많고, 글에도 틀린 부분이 많을 수 있습니다.

1. Getting started

우선 간단하게 Matter.js의 ‘Getting started’을 그대로 실행해보면 아래와 같습니다.
참고링크. Matter.js – Getting started

헐… 신기방기…

간단하게 ‘Getting started’의 코드를 보았을때, 가장 기본이 되는 부분은 Engine, Render, World, Bodies 인가봐요. Engine은 이름 그대로 물리 엔진을 구현해주는 역할, World는 그 물리 엔진이 적용되는 공간을 의미하는 것 같고, Bodies는 그 공간안의 오브제들에 관련한 일을 하고 Render는 공간안에서 오브제들의 변화를 지속적으로 Canvas에 반복해서 그려 애니메이션을 구현해주는 것 같아요.

2. 직접 해보기

참고 소스는 깃허브 https://github.com/falsy/matter-js-quick-start를 통해 확인하셔도 되고 아래의 JSFiddle를 참고하셔도 될 거 같아요.

3. 코드

4. 참조

Matter.js – API documentation

Leave a Reply