Matter.js : 소개를 시작합니다

matter.js는 JavaScript로 작성된 2D 강성 신체 물리 엔진입니다. 이 라이브러리를 사용하면 브라우저에서 2D 물리학을 쉽게 시뮬레이션 할 수 있습니다. 그것은 단단한 몸체를 생성하고 질량, 면적 또는 밀도와 같은 물리적 특성을 할당하는 능력과 같은 많은 기능을 제공합니다. 중력 마찰과 같은 다양한 유형의 충돌 및 힘을 시뮬레이션 할 수도 있습니다.

matter.js는 모든 주류 브라우저를 지원합니다. 또한, 터치를 감지하고 반응이 좋기 때문에 모바일 장치에 적합합니다. 이러한 모든 기능을 사용하면 엔진 사용 방법을 배울 수있는 시간이 필요합니다. 이는 물리 기반 2D 게임 또는 시뮬레이션을 쉽게 만들 수 있습니다. 이 튜토리얼에서는 설치 및 사용법을 포함한이 라이브러리의 기본 사항을 다루고 실행 가능한 예제를 제공합니다.

설치 당신은 npm과 같은 패키지 관리자를 사용하여 다음 명령으로 matter.js를 설치할 수 있습니다.

CDN에서 라이브러리로 링크를 가져 와서 다음과 같이 프로젝트에 직접 포함시킬 수 있습니다.

matter.js는 자주 업데이트를 게시하여 코드를 제대로 작동시키기 위해 코드를 약간 수정해야 할 수도 있습니다. 이 튜토리얼의 예제는 버전 0.18.0을 기반으로합니다.

기본 예 Matter.js를 배우는 가장 좋은 방법은 실제 코드를보고 작동 방식을 이해하는 것입니다. 이 섹션에서는 일부 객체를 만들고 필요한 코드를 라인별로 소개합니다.

우리는 먼저 프로젝트에 필요할 수있는 모든 matter.js 모듈에 대한 별칭을 만듭니다.

matter.runner 모듈을 사용하면 엔진과 세계에 대한 지속적인 업데이트를 위해 게임 루프에 액세스 할 수 있습니다.

npm install matter-js

matter.composite 모듈을 사용하면 컬렉션, 제약 조건 또는 객체의 복합 객체를 만들 수 있습니다. 단지에는 단일 객체 또는 전체 시뮬레이션이 포함될 수 있습니다.

다음 줄은 모듈의

메소드를 사용하여 새 엔진을 생성합니다. 마찬가지로, 우리는 또한 새로운 러너와 새로운 렌더러를 만들었습니다. 위 메소드의

<!-- CDN链接 -->

매개 변수는 실제로 엔진과 관련된 특정 속성의 기본값을 덮어 쓰는 키 값 쌍 객체입니다. 이 예에서는 모든 것을 기본값으로 남겨 두었습니다.

예를 들어 세계의 모든 객체에 대한 글로벌 시간 스케일링 계수를 제어 할 수 있습니다. 1 미만의 값을 설정하면 세계가 슬로우 모션으로 상호 작용하게됩니다. 마찬가지로 1보다 큰 값은 세상을 빠르게 만들 것입니다. 이 시리즈의 다음 튜토리얼에서

모듈에 대한 자세한 내용을 알게됩니다.

후, 모듈의

메소드를 사용하여 새 렌더러를 만듭니다. 엔진 모듈과 마찬가지로 위 메소드의 설정 매개 변수는 매개 변수의 다른 옵션을 지정하기위한 객체입니다. 키를 사용하여 라이브러리가 캔버스에 삽입 해야하는 요소를 지정할 수 있습니다. 마찬가지로

키를 사용하여 Matter.js World를 렌더링 해야하는 캔버스 요소를 지정할 수도 있습니다.

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

렌더링 세계에 적용하는 엔진을 지정하는 데 사용할 수있는 키가 있습니다. 실제로 객체를 그 값으로 받아들이는 키도 있습니다. 이 키를 사용하여 캔버스의 또는 와 같은 다른 매개 변수에 대한 값을 설정할 수 있습니다. 또한 키의 값을 각각 또는 engine로 설정하여 와이어 프레임을 켜거나 끌 수도 있습니다. 우리는 또한 배경의 값을 흰색으로 설정하여 세상의 캔버스 색상을 흰색으로 만듭니다. options 다음 몇 줄은 세상에서 상호 작용할 다른 객체를 만듭니다. 이 객체는 모듈을 사용하여 Must.js에서 생성됩니다. 이 예에서는 두 개의 원과 사각형을 생성하기 위해 width 및 height 메소드 만 사용합니다. 다른 방법을 사용하여 다른 다각형을 만들 수도 있습니다. wireframe 객체를 만든 후에는 모듈의 true 메소드를 사용하여 선택한 세계에 추가해야합니다. 필요한 개체를 세상에 추가 한 후에는 각 모듈에서 false 메소드를 사용하여 러너와 렌더러를 실행하면됩니다. 이것은 기본적으로 Matter.js World에서 작성하고 렌더링하는 데 필요한 모든 코드입니다. 이 섹션의 시작 부분에있는 코드는 다음 결과를 만듭니다.

Matter.Bodies circle() Common Matter.js 모듈 Matter.js에는 20 개 이상의 다른 모듈이 있습니다. 이러한 모든 모듈은 다양한 유형의 시뮬레이션을 생성하는 데 유용한 다양한 방법과 속성을 제공하며 상호 작용할 수 있습니다. 이러한 모듈 중 일부는 충돌을 처리하고 다른 모듈은 렌더링 및 시뮬레이션을 처리합니다. rectangle() 이전 섹션의 예제는 렌더링, 시뮬레이션 및 객체 생성을 처리하기 위해 네 가지 모듈을 사용합니다. 이 섹션에서는 Matter.js에서 일반적으로 사용되는 일부 모듈의 역할에 대해 배우게됩니다.

엔진 : Matter.js World의 시뮬레이션을 업데이트하려면 엔진이 필요합니다. 모듈은 다른 엔진의 동작을 제어 할 수있는 다양한 방법과 특성을 제공합니다. Engine render : 사용자가 시뮬레이션에서 볼 수있는 실제 객체를 만들려면 렌더러가 필요합니다. 엘프 등을 지원하는 기본 게임을 개발하는 데 사용할 수 있습니다.
• 러너 : 당신이 시뮬레이션하는 모든 세계의 물체는 서로 끊임없이 서로 상호 작용할 것입니다. 러너 모듈은 이러한 지속적인 업데이트를 엔진과 세계에 처리합니다.
바디
• : 모듈에는 원, 사각형 또는 사다리꼴과 같은 일반적인 모양으로 강성 몸체를 만드는 데 도움이되는 다양한 방법이 포함되어 있습니다.
Body :이 모듈은 모듈에서 함수를 사용하여 생성하는 강체를 생성하고 조작하기위한 다양한 방법과 속성을 제공합니다. 이 모듈을 사용하면 단일 객체를 스케일, 회전 또는 번역 할 수 있습니다. 또한 다른 물체의 속도, 밀도 또는 관성을 지정할 수있는 기능도 있습니다. 많은 기능이 있으므로이 시리즈의 세 번째 자습서는 모듈에서 사용 가능한 방법과 속성에 대해서만 설명합니다. 복합재 : Bodies 모듈과 유사 하게이 모듈에는 공통 구성으로 복합 객체를 생성하는 데 사용할 수있는 다양한 방법이 포함되어 있습니다. 예를 들어, 모듈에서 단일 방법을 사용하여 직사각형 상자의 스택 또는 피라미드를 만들 수 있습니다. composite
• : 모듈에는 복합 객체를 생성하고 조작 할 수있는 다양한 방법과 속성이 있습니다. 이 시리즈의 네 번째 튜토리얼에서 및 Bodies 모듈에 대한 자세한 내용을 읽을 수 있습니다. Body 제약 조건
:이 모듈을 사용하면 제약 조건을 생성하고 조작 할 수 있습니다. 제약 조건을 사용하여 두 객체 또는 고정 된 세계 우주 지점과 객체가 고정 거리로 유지되도록 할 수 있습니다. 이것은 강화를 통해 두 객체를 연결하는 것과 유사합니다. 로드가 스프링과 비슷하기 시작하여 이러한 제약 조건의 강성을 수정할 수 있습니다. Matter.js는 Newtonian 진자 또는 체인 복합체를 만들 때 제약 조건을 사용합니다.
• MouseConstraint :이 모듈은 마우스 제약 조건을 생성하고 조작 할 수있는 다양한 방법과 속성을 제공합니다. 이것은 세계의 다른 객체가 사용자와 상호 작용하기를 원할 때 유용합니다. Bodies 최종 사고 Composites 이 튜토리얼은 Matter.js 라이브러리를 소개하기위한 것입니다. 이를 염두에두고 라이브러리의 기능과 설치에 대한 빠른 개요를 제공했습니다. 두 개의 원과 사각형이 포함 된 기본 예는 라이브러리를 사용하여 간단한 시뮬레이션을 만드는 것이 얼마나 쉬운 지 보여줍니다.
Matter.js에는 많은 모듈이 있으므로 각각 엔진에 고유 한 접근 방식을 추가하여 일부 공통 모듈을 간략하게 요약했습니다. 이 시리즈의 나머지 부분은 일반적으로 사용되는 모듈을 더 자세히 설명하는 데 중점을 둘 것입니다.
• 이 게시물은 Monty Shokeen의 기여로 업데이트되었습니다. Monty는 튜토리얼을 작성하고 새로운 JavaScript 라이브러리를 배우는 것을 좋아하는 풀 스택 개발자입니다.

위 내용은 Matter.js : 소개를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!