337 questions
0
votes
0
answers
84
views
How to release dragged element if mouse goes beyond bounding box?
when dragging a ball outside of the blue box, it will start to spin fast and if I release the mouse while outside of the bounding box the element will continue to be dragged. I would like to release ...
- 1,008
0
votes
0
answers
37
views
Engine.update not advancing simulation ( having trouble with deltaTime )
so i am trying to run a matter instance in a worker thread.
Im running it with my own loop as shown below. However I'm experiencing trouble with game pacing. Before getting to the explanation here is ...
- 153
0
votes
2
answers
77
views
The Small cards/objects are overlapped by Big Cards/objects. They are not getting their priority [closed]
enter image description here
The Problem can be seen in the picture that the small capsules or cards is not taking its priority in the matter.js world. It is being overlapped by userCards or big cards....
- 21
1
vote
1
answer
69
views
Phaser.js: mismatch between coordinates for graphics and Matter.js body
I'm trying to mathematically create some shape graphics in Phaser.js, and to attach matching Matter.js physics bodies to them. I'm finding that the coordinate systems used for these two things don't ...
- 1,047
1
vote
1
answer
84
views
Manipulate matter.js Body
I run into an issue with generated bodies in matter.js.
if i generate a body from svg via:
Matter.Svg.pathToVertices(svgPath, 1)
It can happen that the generated Body consists of more shapes like ...
- 530
3
votes
2
answers
168
views
Create physics body from svg in phaser with matter.js
I'm loading a svg as xml in the preload function:
this.load.xml("xml-pipe-bottom", "assets/svg/shape_pipe_b.svg");
and create a body and the svg as sprite:
const shapeBody = this....
- 530
0
votes
1
answer
96
views
MatterJS Ball Not Affected by Gravity in version 0.20.0
I'm trying to integrate a game, built with matter-js, into my existing SvelteKit webapp but am getting stumped as to why gravity is not affecting the circle body I'm adding. The following is the ...
1
vote
1
answer
49
views
How to add a Matter.js MouseConstraint to an svg viewbox element?
I'm trying to use Matter.js for it's physics engine while using D3.js for rendering the Matter physics bodies as SVG elements.
This demo is just a box dropping onto the ground. Everything works as ...
- 63
0
votes
1
answer
51
views
How to fix error "Composite.add is not a function" caused by code not yet run [duplicate]
I am making a project using MatterJS. However, I am having some difficulties. Whenever I run my code it throws the error TypeError: Composite.add(...) is not a function. I asked about the problem in ...
1
vote
0
answers
97
views
Creating functional flippers for a pinball game with p5.js and Matter.js
I am creating a pinball game for a school project. I am using p5.js for graphics and Matter.js for the physics. Everything else in my code is working except for the flippers, which keep firing ...
- 11
2
votes
1
answer
52
views
How to disable Bounce
I want to disable bounced in my io game. Main idea to set object (player) velocity and player must move until io socket command stop movement.
sample this.objects[id].setVelocityX (-speed);
to prevent ...
- 21
0
votes
0
answers
34
views
Why are the results always different from my tests?
I am currently developing a Plinko game using Matter.js. I’ve written code to ensure that the result is always determined by the ball’s initial position, without any external influence.
For example, ...
- 1
0
votes
0
answers
54
views
Instability of the components in the Matter JS engine
I am simulating a snooker game via JavaScript using the P5 and Matter JS, I'm almost done but I'm having trouble with some of the ball behaviors.
I added all the balls to the engine world in Matter JS ...
2
votes
0
answers
19
views
I want to achieve the effect of chain adsorption, but the end cannot stick tightly
I want to achieve a situation where, when I drag the end of the chain to the object on the right, the end sticks to the object (i.e., both sides are parallel). However, I tried adding constraints to ...
- 102
0
votes
1
answer
97
views
How to set different collision filters on compound body parts
I am trying to use a 2D physics engine to model a rotating disc with a pin on its edge. The pin can collide with other objects, either preventing the disc from rotating further, or pushing the other ...
- 4,468
0
votes
1
answer
64
views
Matter.js - Handling collisions at high object speeds in matter.js
I'm currently working on a space flight simulator using matter.js as a game engine. I'm facing a problem with the huge size of the map. If we consider that 1 metre is 10px (adjusted to the size of ...
- 1
2
votes
1
answer
242
views
Matter.js with custom renderer runs twice as fast as it should
I'm trying to use JavaScript to make it so that when certain pieces of text in the document are clicked, they become physical objects and drop down to the bottom of the screen. I'm using matter.js to ...
- 23
1
vote
1
answer
41
views
No friction on tweened sprite
I have a moving platform and box on top of it. No matter how fast the platform is moving, the box doesnt move sideways along with the platform and eventually falls down if the platform slipped away.
I ...
- 530
0
votes
1
answer
383
views
MatterJs don't do animation in nextjs
I'm a newbie in matter.js.I'm using Matter.js in NextJS but it is not working and I don't know why.
This is just a code that I copy and translate to NextJS components.
It displays like this but it ...
- 78
0
votes
1
answer
136
views
Style matter-js bodies
I Want To Create This Ping Effect.
You can see more about it on https://stake.com/casino/games/plinko
I'm re-building this plinko game and want to create this effect of a 'ping'. I got to a point ...
- 1,082
3
votes
1
answer
240
views
Setting fillStyle works inconsistently for bodies in Matter.JS
I'm working with Matter.JS for an interactive header graphic on a website. I have some basic letter paths in SVG, which get loaded, converted to shapes and bodies and placed in the world. They get ...
- 2,486
3
votes
0
answers
229
views
WARN: matter-js: Matter.Engine.update: delta argument is recommended to be less than or equal to 16.667 ms
I am using matter-js with react-native-game-engine to create game with a falling body. And then, in setupWorld() function I am defining them, like this:
class GameScreen extends Component {
...
- 224
0
votes
1
answer
121
views
How can I prevent dragging body beyond specific area with MatterJS? [closed]
TLDR; How do I make a body draggable only in the bottom half of the screen and release it if user tries to go beyond that specified area?
I'm making a simple game using p5.js for rendering and Matter ...
- 161
0
votes
0
answers
158
views
Error loading images in a React + p5.js project
THE ERROR: This error appears if I use loadImage() function, even if I didn't use the image loaded anywhere else. In this case it is the background image, but even loading images I just want to use on ...
- 161
1
vote
1
answer
120
views
How to reset ball position if it goes out of bounds, using p5.js and matter.js?
I want to reset the ball back to its initial position if it flies off the screen, or if its position.y < 0 (I'll add in other boundary conditions once this is figured out).
I tried simulating that ...
- 161
0
votes
1
answer
70
views
Why is there a loss of energy in matter.js newtons cradle?
In the live simulation available at https://brm.io/matter-js/demo/#newtonsCradle, how can the issue of energy loss be resolved? Despite setting friction to zero, energy loss still occurs.
Does anyone ...
- 48
1
vote
0
answers
71
views
Phaser 3 collision - ball is disappearing in specific collision situations resulting in NaN values for velocity / position properties
I have a simple basketball shooting game built in Phaser 3. It has a ball, a rim with a point on each side where the ball can bounce off of, and a zone underneath the rim that I use to track for ...
1
vote
1
answer
230
views
How to conditionally turn on/off collisions in Phaser 3?
I'm making a simple flick type basketball game. The game is 2D, but the ball scales smaller after you launch it to give the 3d effect.
Where the ball spawns, the rim of the hoop is directly above it ...
0
votes
0
answers
38
views
Matter Js on live server
I am using matter js in my project
but it is not visible and throws an error in the console using the live server extension
"matter.min.js:6 Uncaught DOMException: Failed to execute 'drawImage' ...
- 127
0
votes
1
answer
54
views
How do I prevent collision between bodies in a stack using MatterJS?
Using MatterJS I have a stack of circles and a floor rectangle:
var stack = Composites.stack(300, 0, 3, 3, 10, 10, function(x, y) {
return Bodies.circle(x, y, Common.random(10, 20), {friction: 0, ...
- 1,462
0
votes
2
answers
80
views
How do I change the gravity when the Enter key is pressed
So I made a little matter.js thing, using javascript and html, it just creates a black floor, where which a rectangle, trapezoid, square, and circle fall on it:
<!DOCTYPE html>
<html lang=...
- 23
0
votes
0
answers
165
views
In Matter.js, using SVG objects created "fromVertices" I can't "applyForce" or setVelocity on those bodies
When adding convex SVGs to a matter.js canvas (using the polyfills so they look fine) the movement of these bodies when forces are applied is not correct. I can barely move the bodies at all even when ...
2
votes
1
answer
61
views
Add/parent physicsless sprite to matterjs vertexbody such that it moves with the body. PhaserJS using MatterJS
const poly1 = this.add.polygon(200, 200, Ployploy, 0x0000ff, 0.2);
ThisPlayer = this.matter.add.gameObject(poly1, { shape: { type: 'fromVerts', verts: Ployploy, flagInternal: true } });
//add this ...
0
votes
1
answer
188
views
How to use matter.js on a web worker?
I want to use matter.js on a web worker with offscreen canvas, but the problem is it seems to throw errors about requestAnimationFrame. It tries to get it by using window.requestAnimationFrame but in ...
- 44.5k
0
votes
0
answers
92
views
How to move camera in matter.js world?
I am making a RTS game in matter.js, similar to starcraft. One thing I want to implement is panning around with viewports.
I created the canvas and the world
const canvas = document.getElementById(&...
- 44.5k
0
votes
0
answers
211
views
Matter.JS Scaling textures automatically + sprites not on body
I am making a game where every time you click, a fruit falls down from the mouse coordinates. The game was working when I was working with plain colours, so then I decided to add textures. However, I ...
0
votes
0
answers
99
views
Multi-polygon objects in matter.js being "smushed" together?
I have a polygon that I'm trying to make into a Body in matter.js, but it's concave so i've split it into multiple convex polygons as shown below:
here is the point data, it's very large
But when I ...
0
votes
0
answers
59
views
How can I render bodies continuously on the screen with an interval in React Native & Expo with matter .js?
I'm trying to create a simple game in React native with matter.js and react-native-game engine. I have created a bunch of shapes which I want to render continuously with a 1 second delay. The shapes ...
0
votes
1
answer
76
views
JavaScript svg scale issue with matter.js
I'm developing a Javascript animation using matter.js. Here is the link:
https://codepen.io/Sergio-Escalona/pen/VwNrwbw
document.addEventListener("DOMContentLoaded", function () {
// ...
2
votes
1
answer
109
views
How to have circle roll when pushed using MatterJS?
I have a simple animation where I have a static rectangle slowly moving horizontally so that it pushes a circle across the 'floor'.
How can I make the circle roll instead of slide?
I tried adding ...
- 1,462
3
votes
1
answer
208
views
Add a constraint from a point A to another constraint in Matter.js
let Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
World = Matter.World,
Bodies = Matter.Bodies,
Constraint = Matter.Constraint;
let engine = Engine.create(),
...
- 33
0
votes
1
answer
473
views
Matter.js cursor – how to change cursor when hovering a body?
On my website, I create a matter.js world where I have a bunch of draggable bodies. Any simple ideas on how to create a grab cursor when hovering over the bodies I had, failed. Without it, there is no ...
0
votes
0
answers
90
views
Matter.JS elements crash endlessly after page reload
I'm using matter.js in a Next.js project. And I need help. When my Technology block, which is reused on different pages of the application, is located at the top of the page when loading the page, the ...
1
vote
0
answers
54
views
How to make objects without loss of speed using phaser js matter?
Example, removed gravity, removed friction, made maximum elasticity. The balls still stop. What else can you do to make the balls move endlessly? Or is this a phaser js bug?
var config = {
type: ...
- 41
1
vote
0
answers
87
views
matterjs physics not behaving correctly
In my game, I have a scenario where (simple) polygons are created dynamically in parts from vertices.
However, I am facing what appears to be a bug with the physics between these Polygons.
Take the ...
- 11
0
votes
0
answers
53
views
Matter.js / SVG.js issue with Safari 'ReferenceError: Can't find variable: draw'
I'm working on a site that uses matter.js in a particular section to add some floating shapes to the background of the div. One of the shapes is a semicircle, which I used svg.js to create the shape. ...
- 51
0
votes
1
answer
863
views
Matter.js: Cannot read properties of undefined (reading 'events') in Events.trigger() when calling World.add()
// matter.js modules
let Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies,
Mouse = Matter.Mouse,
MouseConstraint = Matter....
- 1
3
votes
1
answer
313
views
How to draw circles in a pyramid shape using p5js and matterjs
I am trying to draw multiple circles in pyramid shape like this: balls in pyramid shape
I have made this 'Balls' class:
class Balls {
constructor(x, y, radius, color, ballCount) {
this.x = x;
...
- 33
0
votes
0
answers
199
views
How to create precise platformer movement using MatterJS?
I'm using MatterJS to create a simple tile-based platformer, but running into issues getting both gravity and movement to work together.
My goal is to have it so the player is only partially physics ...
- 714
1
vote
1
answer
155
views
How do I determine the origin of the physics engine
I was using matte.js, using my own rendering, and it was fine until I suddenly found out how matter knew the origin of my canvas, that is, when I created the rigid body, how did its position x,y ...
- 35