Comments (1)
ggorlen
commented on May 16, 2024
Try using the canvas: key on your Render initializer options object rather than element:. If you use element:, Matter.js treats it as a container (say, a <div>) and assumes it should create and append a canvas inside the element. On the other hand, specifying canvas: causes Matter.js to treat the element as a canvas rather than a container.
This behavior could probably be improved in terms of in-app errors. If a <canvas> is provided where a container is expected, it seems reasonable to expect MJS to throw a clear error.
Here's an example you can build from. I made the ground static so it won't fall, formatted the code, replaced let with const, etc, but most of these are cosmetic changes. The minimal way to make your code work is to use canvas: canvas rather than element: canvas.
In modern JS, {canvas: canvas} can be simplified to {canvas}.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<style>
canvas {
border: 1px solid grey;
margin: auto;
display: block;
background-color: black;
}
body {
background-color: black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById("canvas");
const engine = Matter.Engine.create();
const render = Matter.Render.create({
canvas,
engine,
options: {
width: 600,
height: 600,
wireframes: false,
},
});
const testBox = Matter.Bodies.rectangle(300, 100, 100, 100, {
render: {fillStyle: "grey"},
});
const ground = Matter.Bodies.rectangle(300, 500, 600, 100, {
isStatic: true,
render: {fillStyle: "grey"},
});
Matter.Composite.add(engine.world, [testBox, ground]);
const runner = Matter.Runner.create();
Matter.Runner.run(runner, engine);
Matter.Render.run(render);
</script>
</body>
</html>Please close the issue if this resolves your question, since MJS maintenance has been low recently from liabru, so there's no other way to close an issue without him around. Thanks!
from matter-js.
Related Issues (20)
- Platformer character sticking to walls instead of sliding down HOT 5
- convert text to matter component like a bridge but Uncaught TypeError: Cannot read properties of undefined (reading 'max')
- support and documentation for vitejs please :( HOT 1
- Complete the rendering problem yourself
- What is the least expensive way to make bodies of different shapes smaller? HOT 1
- Constraints seems to make bodies stick
- add n-gon to the project gallery
- weird texture behavior - multiple textures rendered for one body HOT 2
- Chain connecting 2 players causes 1 player to accelerate slower than the other even with same force
- Render.setSize is not present in the build
- Trying to change seed, to take control of deterministic behavior
- How to suppress body tremors? HOT 2
- Why does the attractor only work on one of the two BODYs? HOT 1
- Using compound bodies with Bodies.fromVertices does not work it just shows a filled in shape. HOT 1
- Why don't bodies sometimes collide? HOT 1
- Constraints with distance limits (e.g. for ropes)
- Why might there be such an error? HOT 1
- Simple Polygon Physics Issues HOT 1
- How to add project to the Wiki gallery ?
- How to scale the world? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matter-js.