Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

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

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: The Engine and World Modules

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

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

Установка

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

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

Базовый пример

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

Мы начнем с создания псевдонимов для всех модулей 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.

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

Заключительные мысли

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.