matter.js

问题 I'm new to Matter JS, so please bear with me. I have the following code I put together from demos and other sources to suit my needs: function biscuits(width, height, items, gutter) { const { Engine, Render, Runner, Composites, MouseConstraint, Mouse, World, Bodies, } = Matter const engine = Engine.create() const world = engine.world const render = Render.create({ element: document.getElementById('canvas'), engine, options: { width, height, showAngleIndicator: true, }, }) Render.run(render)

问题 I am trying to programmatically set the width and heights of the chained bodies in matter.js. Unfortunately, I am only getting 0 as values and I am unsure why. My guess is that the images are not being loaded fast enough to provide those values. How can I load those dimensions before the images are loaded? Pseudo-code Several bodies from Array Get the width and height of each image in the Array Use this value to set the Bodies dimensions Code var playA = Composites.stack( percentX(25) -

问题 Is there any way to make hollow circle in matter js ? I didn't find anything As you can see above image there is red circle which is located inside of black circle. That is what I want to do. Here is the code which works but not as I want. // Black circle Matter.Bodies.circle(120, 120, 180, { mass: 50 }) // Red circle Matter.Bodies.circle(60, 60, 30, { mass: 50 }) 回答1: I've been looking to do something. It seems like the best way to effect a hollow shape is to approximate its surface with a

问题 I'm trying to run a server that runs a physics simulation on a server and have clients connect to this server via websockets/socket.io. I know I can calculate the Engine separately from the rendering with Matter.js. So my question is, how do I get the engine data to the client? I have a Game class, and on socket connection, I want to emit the World to the client to render. var g = new Game() g.initEngine() io.sockets.on('connection', function(socket) { io.emit('gamestate', g.getGameState()) }

问题 I want to render custom HTML elements as Bodies in Matter.js. I am using it in React which adds a bit of complexity but it's irrelevant to my issue. I've searched a lot and the only example I found was this one here, which seems to use querySelector to select the elements that live in the HTML code then somehow use them inside the rectangle shapes. The part that seems to be doing the job is the following: var bodiesDom = document.querySelectorAll('.block'); var bodies = []; for (var i = 0, l

问题 I know in traditional HTML5 canvas, we can use drawImage method (the longest one with 9 properties) and change frameX and frameY to make sprite sheet animation. But I am new to matter.js. I've checked matter.js document but still don't have any idea about how to animate my sprite. Here is my object: const ball = Bodies.circle(340, 340, 10, { density: 0.0005, frictionAir: 0.06, restitution: 0, friction: 0, render: { sprite: { texture: "images/blueMonster.png", yScale: 0.2, xScale: 0.2,

问题 I have an instance of Matter.js on the screen such as a game, and want to completely start over from scratch when the user/player clicks a "new game" button: const { Engine, Render, Runner, World, Bodies, Mouse, MouseConstraint, Body, Events } = Matter; //movement setup const engine = Engine.create(); const { world } = engine; let render; let runner; const startGame = document.querySelector('#start'); startGame.addEventListener('click', event => { event.preventDefault(); //hide 'choose

问题 I have an instance of Matter.js on the screen such as a game, and want to completely start over from scratch when the user/player clicks a "new game" button: const { Engine, Render, Runner, World, Bodies, Mouse, MouseConstraint, Body, Events } = Matter; //movement setup const engine = Engine.create(); const { world } = engine; let render; let runner; const startGame = document.querySelector('#start'); startGame.addEventListener('click', event => { event.preventDefault(); //hide 'choose

问题 I have an instance of Matter.js on the screen such as a game, and want to completely start over from scratch when the user/player clicks a "new game" button: const { Engine, Render, Runner, World, Bodies, Mouse, MouseConstraint, Body, Events } = Matter; //movement setup const engine = Engine.create(); const { world } = engine; let render; let runner; const startGame = document.querySelector('#start'); startGame.addEventListener('click', event => { event.preventDefault(); //hide 'choose

问题 I have an instance of Matter.js on the screen such as a game, and want to completely start over from scratch when the user/player clicks a "new game" button: const { Engine, Render, Runner, World, Bodies, Mouse, MouseConstraint, Body, Events } = Matter; //movement setup const engine = Engine.create(); const { world } = engine; let render; let runner; const startGame = document.querySelector('#start'); startGame.addEventListener('click', event => { event.preventDefault(); //hide 'choose