Статьи

Начало работы с Matter.js: Введение

Декабрь 8, 2018

Matter.js — это двумерный движок физики твердого тела, написанный на JavaScript. Эта библиотека может помочь вам легко симулировать 2D физику в браузере. Он предлагает множество функций, таких как способность создавать твердые тела и присваивать им физические свойства, такие как масса, площадь или плотность. Вы также можете моделировать различные виды столкновений и сил, таких как гравитация и трение.

Matter.js поддерживает все основные браузеры, включая IE8 +. Кроме того, он подходит для использования на мобильных устройствах, поскольку он может обнаруживать прикосновения и реагирует. Все эти функции стоят того, чтобы потратить ваше время на изучение того, как использовать движок, поскольку тогда вы сможете легко создавать физические 2D-игры или симуляции. В этом уроке я расскажу об основах этой библиотеки, включая ее установку и использование, и приведу рабочий пример.

Установка

Вы можете установить Matter.js с помощью менеджеров пакетов, таких как Bower или NPM, с помощью следующих команд:

1
2
bower install matter-js
npm install matter-js

Вы также можете получить ссылку на библиотеку из CDN и напрямую включить ее в свои проекты, например:

1
<script src=»path/to/matter.min.js»></script>

Основной пример

Лучший способ узнать о Matter.js — это посмотреть какой-то реальный код и понять, как он работает. В этом разделе мы создадим несколько тел и построчно пройдем необходимый код.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;
     
var engine = Engine.create();
 
var render = Render.create({
                element: document.body,
                engine: engine,
                options: {
                    width: 800,
                    height: 400,
                    wireframes: false
                }
             });
              
var boxA = Bodies.rectangle(400, 200, 80, 80);
var ballA = Bodies.circle(380, 100, 40, 10);
var ballB = Bodies.circle(460, 10, 40, 10);
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });
 
World.add(engine.world, [boxA, ballA, ballB, ground]);
 
Engine.run(engine);
Render.run(render);

Мы начнем с создания псевдонимов для всех модулей Matter.js, которые могут нам понадобиться в нашем проекте. Модуль Matter.Engine содержит методы для создания и управления движками. Двигатели необходимы в проекте для обновления симуляции мира. Модуль Matter.Render — это базовый рендерер на основе холста HTML5. Этот модуль необходим для визуализации различных движков.

Модуль Matter.World используется для создания и управления миром, в котором работает движок. Он похож на модуль Matter.Composite , но позволяет настроить несколько дополнительных свойств, таких как gravity и bounds . Последний модуль в нашем коде, называемый Matter.Bodies , позволяет создавать объекты твердого тела. Еще один похожий модуль под названием Matter.Body позволяет манипулировать отдельными телами.

Следующая строка использует метод create([settings]) модуля Matter.Engine для создания нового движка. Параметр settings в вышеприведенном методе на самом деле является объектом с парами ключ-значение, чтобы переопределить значения по умолчанию для нескольких свойств, связанных с механизмом.

Например, вы можете контролировать глобальный коэффициент масштабирования времени для всех тел в мире. Установка значения меньше 1 приведет к медленному движению мира. Точно так же значение больше 1 сделает мир стремительным. Вы узнаете больше о модуле Matter.Engine в следующем уроке из этой серии.

После этого мы используем метод create([settings]) модуля Matter.Render для создания нового рендерера. Так же, как и модуль Engine, параметр settings в вышеприведенном методе является объектом, используемым для указания различных опций для параметра. Вы можете использовать ключ element чтобы указать элемент, куда библиотека должна вставить холст. Точно так же вы можете также использовать ключ canvas чтобы указать элемент canvas, где должен отображаться мир Matter.js.

Существует ключ engine который вы можете использовать для указания движка, который должен использоваться для визуализации мира. Существует также ключ options который фактически принимает объект в качестве значения. Вы можете использовать эту клавишу для установки значений для различных параметров, таких как width или height холста. Вы также можете включить или выключить каркас, установив для значения ключа wireframe значение true или false соответственно.

Следующие несколько строк создают разные тела, которые будут взаимодействовать в нашем мире. Тела создаются с помощью модуля Matter.Bodies в Matter.js. В этом примере мы только что создали два круга и прямоугольник, используя методы circle() и rectangle() . Другие методы также доступны для создания различных полигонов.

После того как мы создали тела, нам нужно добавить их в мир по нашему выбору, используя метод add() из модуля Matter.World . После добавления необходимых тел в наш мир нам просто нужно запустить движок и рендер, используя метод run() из соответствующих модулей. Это в основном весь код, который вам нужен для создания и рендеринга мира в Matter.js.

Код в начале этого раздела создает следующий результат.

Общие модули Matter.js

В Matter.js более 20 различных модулей. Все эти модули предоставляют различные методы и свойства, которые полезны для создания различных видов моделирования и позволяют вам взаимодействовать с ними. Некоторые из этих модулей обрабатывают коллизии, другие — рендеринг и симуляцию.

В примере из предыдущего раздела использовались четыре различных модуля для обработки рендеринга, моделирования и создания тел. В этом разделе вы узнаете о роли некоторых распространенных модулей, доступных в Matter.js.

  • Движок : вам нужны движки для обновления симуляций вашего мира Matter.js. Модуль Engine предоставляет различные методы и свойства, которые позволяют контролировать поведение различных двигателей.
  • Мир : Этот модуль предоставляет вам методы и свойства для создания и управления целыми мирами одновременно. World на самом деле является Composite телом с дополнительными свойствами, такими как гравитация и границы.
  • Тела . Модуль « Bodies » содержит различные методы, помогающие создавать твердые тела с общими формами, такими как круг, прямоугольник или трапеция.
  • Тело . Этот модуль предоставляет различные методы и свойства для создания и управления твердыми телами, которые вы создали с помощью функций из модуля « Bodies ». Этот модуль позволяет масштабировать, вращать или переводить отдельные тела. Он также имеет функции, позволяющие вам указать скорость, плотность или инерцию различных тел. Из-за большого количества функций в третьем руководстве этой серии рассматриваются только методы и свойства, доступные в модуле Body.
  • Композиты . Как и модуль « Bodies », этот модуль содержит различные методы, которые можно использовать для создания композитных тел с общими конфигурациями. Например, вы можете создать стек или пирамиду прямоугольных блоков, используя всего один метод, с помощью модуля Composites .
  • Составной : модуль « Composite » имеет методы и свойства, которые позволяют создавать и управлять составными телами. Вы можете прочитать больше о модулях Composite и Composites в четвертом руководстве серии.
  • Ограничение : этот модуль позволяет создавать ограничения и управлять ими. Вы можете использовать ограничение, чтобы убедиться, что два тела или фиксированная точка мирового пространства и тело поддерживают фиксированное расстояние. Это похоже на соединение двух тел через стальной стержень. Вы можете изменить жесткость этих ограничений так, чтобы стержень начал действовать больше как пружины. Matter.js использует ограничения при создании колыбели Ньютона или цепочки.
  • MouseConstraint : этот модуль предоставляет вам методы и свойства, которые позволяют создавать ограничения мыши и управлять ими. Это полезно, когда вы хотите, чтобы разные тела в мире взаимодействовали с пользователем.

Последние мысли

Это руководство предназначено для знакомства с библиотекой Matter.js. Имея это в виду, я предоставил краткий обзор функций и установки библиотеки. Основной пример, включающий два круга и прямоугольник, показывает, как легко создавать простые симуляции с использованием библиотеки.

Поскольку в Matter.js имеется множество модулей, каждый из которых добавляет свои уникальные методы в движок, я написал краткое описание нескольких распространенных модулей. Остальная часть серии будет посвящена более подробному изучению этих общих модулей.

41
Share: