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 имеется множество модулей, каждый из которых добавляет свои уникальные методы в движок, я написал краткое описание нескольких распространенных модулей. Остальная часть серии будет посвящена более подробному изучению этих общих модулей.