Silverback9

추석입니다~~^^* 맛있는 아침 드셨어요~~^^*?

오늘은 matter.js와 친숙해 지는 첫 날!이예요~~^^*

간단한 사각형을 만드는 프로그램을 matter.js 라이브러리를 사용하여 만들어 보겠습니다.

그런데요…우리가 공부하는 동영상 강의가 제작된 시점 이후 matter.js의 변화가 있었던 것 같아요. 그래서, 동영상 속의 코드와는 사뭇 표현방법이 달라진 것 같아요….

우리는, 현재의 matter.js에 따라 코드를 만들어 볼까요~?

Object Destructuring에 의해, 물체의 속성 정의가 더 간단해 졌어요.

물체의 속성들을 하나 하나 변수로 따로 정의할 필요없이, 물체 속성 변수 집합으로 정의하면 되네요~^^*

변수의 값이 한 번 정해지면, 코드 중간 중간에 바뀌지 않도록 const형으로 정의해 놓겠습니다. (const 는 constant의 약자인데요~ 항상 같은 값을 유지하게 되어요~)

const { Engine, World, Bodies, Composite } = Matter;

그럼, 우리의 물체 Matter가 띄게 될 속성 변수들 Engine과 World 그리고 Bodies와 Composite 을 차례차례 살펴볼까요~~^^*

하나, Engine!!! 과 World!!! 를 살펴 봅시다~~^^*

World는 프로그램에 관련된 그 모든 것을 조정하는 객체입니다. 공간, 물체, 시간, 그 외 그 모든 것을요. 특이하게, Matter.js는 이 World를 Engine 안의 요소로 구성해 놓았습니다. 네, 물리법칙과 시뮬레이션 전체를 관장하는 최고 통치자는 바로! Engine!입니다. 음..그러면, World는 engine.world가 되겠네요^^*

둘, Bodies!!! 와 Composite!!! 을 살펴 봅시다~~^^*

Bodies는 물리현상을 경험하는 사물을 가리킵니다. 우리가 만들어 보았던 클래스 Vehicle 나 클래스 Particle 같은 것을 지칭하는 것 같아요. 그런데, 이런 사물을 생성한다고 끝이 아니구요. Engine의 요소인 World 안에 이 Bodies를 구성요소로 연결시켜야, 이 사물들이 물리현상을 경험할 수 있어요. 구성요소로서 연결해 주는 이 작용을 Composite이 해 주는 것 같아요~^^*

let engine;
let box;

engine = Engine.create();
box = Bodies.rectangle(400, 200, 80, 80);
Composite.add(engine.world, box );

네~^^* 아래 동영상을 클릭하셔서, 5:45까지 보시면, 예전 matter.js 버전으로 위의 내용을 표현하고 있는 것을 보실 수 있어요~~^^*

오늘은 우리 요기까지만 공부 할까요~~^^* 추석이니까요~~^^*

오늘도 저와 함께 추석 코딩 공부를 함께 해 주셔서 감사합니다~^^*

내일은 우리, 사물 클래스를 만들어서 사각형을 표현해 볼까요~~^^*

오늘 맛난 음식들도 많이 드시고, 기분 좋게 산책하는 오후 보내시기 바래요~^^*

네~!!! 꿈은 이루어 집니다~~!!!