Во вводном руководстве этой серии вы кратко познакомились с различными модулями в Matter.js. Библиотека содержит множество модулей, поэтому было непрактично подробно писать о каждом из них в одном учебном пособии. После прочтения первой части серии вы должны иметь общее представление о библиотеке и ее функциях.
В этом уроке мы сосредоточимся только на модуле World и модуле Engine в Matter.js. Модуль «Мир» предоставляет нам необходимые методы и свойства для создания и управления составным миром. Вы можете использовать его для добавления или удаления различных тел из мира. Модуль Engine содержит методы для создания и управления двигателями, которые отвечают за создание симуляции вашего мира.
Мир Модуль
В этом разделе вы узнаете о различных методах, свойствах и событиях модуля World. World на самом деле является Composite с дополнительными свойствами, такими как gravity и bounds . Вот список важных методов, доступных в этом модуле:
-
add(composite, object)Compositeadd(composite, object): этот метод наследуется от модуля Composite и позволяет вам добавить одно или несколько тел (ов), Composite (ов) или ограничение (я) в данный композит или мир. -
addBody(world, body): Этот метод позволяет добавлять отдельные элементы тела в данный мир. Существуют такжеaddComposite()иaddConstraint()которые позволяют добавлять композит или ограничение в мир.
Приведенный ниже код использует оба этих метода для добавления различных тел в мир. Метод add() добавляет три статических прямоугольника, которые действуют как стены. Метод addBody() добавляет круг, квадрат или прямоугольник в зависимости от кнопки, нажатой пользователем.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var ball = Bodies.circle(460, 10, 40, 10);
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });
World.add(engine.world, [topWall, leftWall, ball, bottomWall]);
var addCircle = function () {
return Bodies.circle(Math.random()*400 + 30, 30, 30);
};
$(‘.add-circle’).on(‘click’, function () {
World.add(engine.world, addCircle());
});
|
Вы можете видеть, что ключ isStatic был установлен в true для трех стен в нашем мире. Установка этого ключа в true для любого объекта делает этот объект полностью статичным. Теперь объект никогда не изменит свою позицию или угол. Существует множество других свойств, которые можно указать для управления поведением различных объектов. Вы узнаете обо всех из них в учебном пособии по модулю Body этой серии.
-
remove( composite, object, [deep=false]): это универсальный метод для удаления одного или нескольких тел, составных (-ых) или (-ых) ограничений (-ов) из данного составного (-ых) или мира. Например, вы можете использовать следующую строку, чтобы удалить верхнюю и левую стены из мира.
|
1
|
World.remove(engine.world, [topWall, leftWall]);
|
-
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() сообщают телам мира никакой скорости. Любое движение, которое происходит, является просто результатом изменения формы или положения различных тел. Вот некоторый код для масштабирования, поворота и перевода мира на основе нажатия кнопок:
|
01
02
03
04
05
06
07
08
09
10
11
|
$(‘.scale’).on(‘click’, function () {
Matter.Composite.scale( engine.world, 0.5, 0.7, {x: 400, y: 200});
});
$(‘.rotate’).on(‘click’, function () {
Matter.Composite.rotate( engine.world, Math.PI/4, {x: 400, y: 200});
});
$(‘.translate’).on(‘click’, function () {
Matter.Composite.translate( engine.world, {x: 10, y: 10});
});
|
Следует отметить, что в приведенном выше коде применяется другой масштаб по осям x и y. Это превращает круг в нашем мире Matter.js в овал. Затем овал опрокидывается, чтобы перейти в более стабильное состояние с меньшей потенциальной энергией.
Попробуйте нажать кнопку Scale в приведенной выше демонстрации. После этого нажмите кнопку « Повернуть» , чтобы увидеть, насколько близко Matter.js имитирует реальное движение овала.
Помимо всех этих методов, модуль World обладает множеством полезных свойств. Например, вы можете получить массив всех тел, которые являются прямыми world.bodies мира, с использованием world.bodies . Точно так же вы можете получить массив всех композитов и ограничений, используя world.composites и world.constraints .
Вы также можете указать границы мира, в которых Matter.js должен обнаруживать столкновения, используя world.bounds . Одна интересная вещь, которую вы можете изменить с помощью свойств мира — это гравитация. Гравитация вдоль осей x и y по умолчанию установлена на 0 и 1. Вы можете изменить эти значения, используя world.gravity.x и world.gravity.y соответственно.
Вы должны посетить страницу документации Matter.World, чтобы узнать больше об этом модуле.
Модуль двигателя
Модуль Engine необходим для правильного обновления симуляции мира. Вот список некоторых важных методов модуля Engine.
-
create([options]): этот метод полезен, когда вы хотите создать новый движок. Параметрoptionsв этом методе на самом деле является объектом с парами ключ-значение. Вы можете использоватьoptionsчтобы переопределить значения по умолчанию для разных свойств движка. Например, вы можете использовать свойствоtimeScaleдля замедления или ускорения симуляции. -
update(engine, [delta=16.666], [correction=1]): Этот метод будет перемещать симуляцию вперед во времени наdeltaмс. Значение параметраcorrectionуказывает поправочный коэффициент времени, который будет применяться после обновления. Это исправление обычно необходимо только тогда, когдаdeltaизменяется между каждым обновлением. -
merge(engineA, engineB): этот метод объединит два механизма, заданных заданными параметрами. При объединении конфигурация применяется отengineAа весь мир берется изengineB.
Модуль Engine также имеет множество других свойств, которые помогут вам контролировать качество симуляции. Вы можете установить значение для constraintIterations , positionIterations или velocityIterations чтобы указать количество итераций ограничения, положения и скорости, которые будут выполняться во время каждого обновления. Более высокое значение в каждом случае обеспечит лучшее моделирование. Однако более высокое значение также отрицательно повлияет на производительность библиотеки.
Вы можете установить значение для свойства timing.timeScale чтобы контролировать скорость, с которой происходит моделирование. Любое значение ниже 1 приведет к симуляции замедленного движения. Установка этого свойства в ноль полностью заморозит мир. Следующий пример должен прояснить это.
|
01
02
03
04
05
06
07
08
09
10
11
|
$(‘.slow-mo’).on(‘click’, function () {
engine.timing.timeScale = 0.5;
});
$(‘.norm-mo’).on(‘click’, function () {
engine.timing.timeScale = 1;
});
$(‘.fast-mo’).on(‘click’, function () {
engine.timing.timeScale = 1.5;
});
|
Возможно, вы заметили, что на этот раз шары отскакивают от земли. У каждого твердого тела коэффициент восстановления по умолчанию равен 0. Это дает им глиноподобные свойства, и они не отскакивают от столкновения. Я изменил значение реституции на 1, чтобы шары могли легко отскочить назад.
Вы узнаете обо всех этих свойствах твердых тел в следующем уроке серии. Пока добавьте несколько кругов или шаров в мир и попробуйте нажимать кнопки замедленного и ускоренного движения, чтобы заметить разницу.
Вы должны посетить страницу документации Matter.Engine, чтобы узнать больше об этом модуле.
Вывод
В этом уроке обсуждались два очень важных модуля в Matter.js, о которых вам нужно знать для запуска любых симуляций. Прочитав этот учебник, вы сможете масштабировать, вращать, замедлять или ускорять свой мир. Теперь вы также знаете, как удалять или добавлять тела в мир. Это может быть полезно при разработке 2D-игр.
В следующем уроке этой серии вы узнаете о различных методах, свойствах и событиях, доступных в модуле « Bodies ».