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)
- 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
- [Phaser 3] Position of matter sprite's image not correct in container HOT 1
- loss of sprite quality on mobile HOT 1
- `Composite.translate` didn't move the bodies included
- Create Matter.Bodies.fromVertices with rounded vertices
- MouseConstraint preventing clicks on buttons on mobile. HOT 2
- Vulnerability related to the formula of universal gravitation
- Body with high mass and low inertia behaves erratically
- The startdrag event of dragging a body does not trigger after losing focus.
- How to move camera in matter.js world?
- How to use matter.js on a web worker?
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.