Comments (4)
I can't find a way to obtain the responsability for setting the world's update step, like we can do in box2d by calling World.Step when we want (i.e. in the game loop)
If you wish to call update yourself the function is:
Engine.update(engine, delta, correction)
Where engine
is the engine to update, delta
is the time between steps (e.g. 1000/60
) and correction
is a time correction factor between steps (you can just use 1
for now).
Have a look at the source for Engine.js.
Here you say the engine calls the CustomRenderer function on every render : but who decides how often or/and when to render ?
Fair question. Matter.js includes a built in game loop in Engine.js, that I've spent some time testing and optimising.
It uses window.requestAnimationFrame
and therefore updates at 60fps usually.
I've experimented with this and found you really don't want to be updating at any less than 60fps or physics and rendering really start to suffer.
I also found that the timestamps supplied by requestAnimationFrame
are noisey and this causes jittery physics, so the Matter.js game loop has smoothing filters over a sliding window to prevent this.
I wouldn't be surprised to have been missing some key concept of your engine... I guess as it grows in popularity you would have to clear these basic questions up anyway.
No worries, it's still early days and most of this isn't yet fully documented. The key thing to note is that you should look at how Engine.run works and integrate it into your own game loop. Or the other way round!
I hope to make this a bit clearer and easier in future.
from matter-js.
You can pass a custom renderer when you create a engine. I've yet to fully document any of this, but here's how:
var engine = Engine.create(document.body, {
render: {
controller: CustomRenderer,
options: {
something: true
}
}
});
Where CustomRenderer
is an object that implements two functions:
CustomRenderer.create(options)
where you set up anything you need, where options is therender.options
object passed viaEngine.create
on creation (but you may not need to pass anything)
e.g. see L21 on Render.js
CustomRenderer.world(engine)
whereengine
is passed by the engine that calls this method on every render, from there you can access the whole world composite viaengine.world
. This is where you should update your Pixi sprites.
e.g. see L98 on Render.js
You can see an alternate renderer I implemented RenderPixi.js
Usage of this would be e.g.
var engine = Engine.create(document.body, {
render: {
controller: Matter.RenderPixi
}
});
Hope that clears it up!
from matter-js.
Ok, I think I get it, thanks !
There is still something I don't understand though, about the way the matter.js' world is updated. In the demos you made, I can't find a way to obtain the responsability for setting the world's update step, like we can do in box2d by calling World.Step when we want (i.e. in the game loop). Here you say the engine calls the CustomRenderer function on every render : but who decides how often or/and when to render ? Can I ?
As you know in pixi.js we depend on what we pass to requestAnimFrame to manage the game loop. So how can matter.js' world be updated and accessed by me in this scenario ?
Side note : I wouldn't be surprised to have been missing some key concept of your engine... I guess as it grows in popularity you would have to clear these basic questions up anyway.
from matter-js.
All right,
Thanks a lot for your answers, I'll be studying this ;)
from matter-js.
Related Issues (20)
- Slingshot example with Keys and Constraint, instead of MouseConstraint and Mouse
- Render canvas object HOT 5
- Energy loss, despite air friction 0 HOT 1
- Rigid connection between two bodies
- the bodies do not collide and do not stop, but tremble
- Nothing showing in the matter.js canvas HOT 1
- `Body.create` ignores given velocity
- `Body.create` ignores `anglePrev`, `area`, `mass` and `inertia` when they are 0.
- 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
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.