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

Начало работы с Matter.js: модули Engine и World

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: Introduction
Getting Started With Matter.js: The Body Module

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

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

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

Модуль World

В этом разделе вы узнаете о различных методах, свойствах и событиях модуля World. World на самом деле является Composite с дополнительными свойствами, такими как gravity и bounds, добавленными к нему. Вот список важных методов, доступных в этом модуле:

  • add(Composite, Object): этот метод наследуется от модуля Composite и позволяет вам добавить одно или несколько тел, композитов или ограничений к данному композиту или миру.
  • addBody(world, body): этот метод позволяет добавлять отдельные элементы тела в данный мир. Существуют также методы addComposite() и addConstraint(), которые позволяют добавлять композит или ограничение в мир.

Приведенный ниже код использует оба этих метода для добавления различных тел в мир. Метод add() добавляет три статических прямоугольника, которые действуют как стены. Метод addBody() добавляет круг, квадрат или прямоугольник в зависимости от кнопки, нажатой пользователем.

Вы можете видеть, что ключ isStatic был установлен в true для трех стен в нашем мире. Установка для этого ключа значения true для любого объекта делает этот объект полностью статичным. Теперь объект никогда не изменит свою позицию или угол. Существует множество других свойств, которые можно указать для управления поведением различных объектов. Вы узнаете обо всех из них в учебном пособии по модулю Body этой серии.

  • remove( composite, object, [deep=false]): Это универсальный метод для удаления одного или более тел, композитов или ограничений из данного композита или мира. Например, вы можете использовать следующую строку, чтобы удалить верхнюю и левую стены из мира.
  • clear(world, keepStatic): этот метод является псевдонимом для своего аналога Composite. Вы можете использовать его, чтобы удалить все элементы из мира одновременно. Второй параметр - это логическое значение, которое можно использовать для предотвращения очистки статических элементов. По умолчанию оно имеет значение false. Это означает, что вызов World.clear(world) удалит все элементы из этого конкретного мира.
  • rotate( composite, rotation, point, [recursive=true]): этот метод можно использовать для поворота всех дочерних элементов в данном мире или композите на определенный угол вокруг указанной точки. Угол, указанный здесь, указан в радианах. Параметр point определяет точку вращения.
  • scale( composite, scaleX, scaleY, point, [recursive=true]): Вы можете использовать этот метод для масштабирования всех дочерних элементов вашего композита или мира по заданным значениям. Этот метод масштабирует все от ширины, высоты и площади до массы и инерции.
  • translate(composite, translation, [recursive=true]): метод translate полезен, когда вы хотите переместить всех потомков мира или композита по заданному вектору относительно их текущих позиций.

Вам следует помнить одну вещь: ни translate(), ни rotate() не сообщают никакой скорости телам в мире. Любое движение, которое происходит, является просто результатом изменения формы или положения различных тел. Вот небольшой код для масштабирования, поворота и перемещения мира по нажатию кнопки:

Следует отметить, что в приведенном выше коде применяется другой масштаб по осям X и Y. Это превращает круг в нашем мире Matter.js в овал. Затем овал опрокидывается, чтобы перейти в более устойчивое состояние с меньшей потенциальной энергией.

Попробуйте нажать кнопку Scale в приведенной выше демонстрации. После этого нажмите кнопку Rotate, чтобы увидеть, насколько близко Matter.js имитирует реальное движение овала.

Помимо всех этих методов, модуль World также обладает множеством полезных свойств. Например, вы можете получить массив всех тел, которые являются прямыми дочерними элементами композита мира, с помощью world.body. Точно так же вы можете получить массив всех композитов и ограничений, используя world.composites и world.constraints.

Вы также можете указать границы мира, в которых Matter.js должен обнаруживать столкновения, используя world.bounds. Одна интересная вещь, которую вы можете изменить с помощью свойств мира - это гравитация. Гравитация вдоль осей x и y по умолчанию установлена на 0 и 1. Вы можете изменить эти значения, используя world.gravity.x и world.gravity.y соответственно.

Вы должны посетить страницу документации Matter.World, чтобы узнать больше об этом модуле.

Модуль Engine

Модуль Engine необходим для правильного обновления симуляции мира. Вот список некоторых важных методов модуля Engine.

  • create([options]): этот метод полезен, когда вы хотите создать новый движок. Параметр options в этом методе на самом деле является объектом с парами ключ-значение. Вы можете использовать options, чтобы переопределить значения по умолчанию для разных свойств движка. Например, вы можете использовать свойство timeScale для замедления или ускорения симуляции.
  • update(engine, [delta=16.666], [correction=1]): этот метод будет перемещать симуляцию вперед во времени на dellta мс. Значение параметра correction указывает поправочный коэффициент времени, который будет применяться после обновления. Это исправление обычно необходимо только тогда, когда delta меняется между каждым обновлением.
  • merge(engineA, engineB): этот метод объединит два движка, заданных этими параметрами. При объединении конфигурация применяется от engineA, а весь мир берется из engineB.

Модуль Engine также имеет множество других свойств, которые помогут вам контролировать качество моделирования. Вы можете установить значение для constraintIterations, positionIterations или velocityIterations, чтобы указать количество итераций ограничения, положения и скорости, которые будут выполняться во время каждого обновления. Более высокое значение в каждом случае обеспечит лучшее моделирование. Однако более высокое значение также отрицательно повлияет на производительность библиотеки.

Вы можете установить значение для свойства timer.timeScale, чтобы контролировать скорость, с которой происходит моделирование. Любое значение ниже 1 приведет к симуляции замедленного движения. Установка этого свойства в ноль полностью заморозит мир. Следующий пример должен прояснить это.

Вы могли заметить, что на этот раз шары отскакивают от земли. Каждое твердое тело имеет коэффициент реституции, установленный в 0 по умолчанию. Это дает им глиноподобные свойства, и они не отскакивают от столкновения. Я изменил значение реституции на 1, чтобы шары могли легко отскочить назад.

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

Чтобы узнать больше об этом модуле, вы должны посетить страницу документации Matter.Engine.

Заключение

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

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

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.