Comments (9)
Just wanted to say that I got the camera tracking working well with that snippet you posted. An example here:
Thanks for a great library. I'll drop you another line when the game is done :)
(Use the arrow keys)
from matter-js.
Looking good, please do :) Check out this codepen I found the other day that's using the engine for a spaceship type game, might be helpful.
from matter-js.
Try swapping this bit in:
var deltaCentre = Vector.sub(Vector.sub(body.position, render.bounds.min), viewportCentre),
centreDist = Vector.magnitude(deltaCentre);
Works for me on the views demo. Looks pretty cool actually.
from matter-js.
Are you trying to implement view ports?
See the views demo and the source code.
If you need control over rendering, you should create your own renderer based on Render.js, and pass it through to the engine at creation via engine.render.controller
.
from matter-js.
Yes.
But you're doing it by following the mouse. What I wanted to do is to follow a specific object(composite or body) which will be at the center of the viewport.
I have tried this, but the viewport stays fix.
var viewportCentre = {
x: render.options.width * 0.5,
y: render.options.height * 0.5
};
Events.on(_engine, 'beforeTick', function() {
var _engine = engine,
world = _engine.world
render = _engine.render,
translate,
bodyPos = body.position;
var deltaCentre = Vector.sub(bodyPos, viewportCentre),
centreDist = Vector.magnitude(deltaCentre);
if (centreDist > 50) {
// create a vector to translate the view, allowing the user to control view speed
var direction = Vector.normalise(deltaCentre),
speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);
translate = Vector.mult(direction, speed);
// prevent the view moving outside the world bounds
if (render.bounds.min.x + translate.x < world.bounds.min.x)
translate.x = world.bounds.min.x - render.bounds.min.x;
if (render.bounds.max.x + translate.x > world.bounds.max.x)
translate.x = world.bounds.max.x - render.bounds.max.x;
if (render.bounds.min.y + translate.y < world.bounds.min.y)
translate.y = world.bounds.min.y - render.bounds.min.y;
if (render.bounds.max.y + translate.y > world.bounds.max.y)
translate.y = world.bounds.max.y - render.bounds.max.y;
// move the view
Bounds.translate(render.bounds, translate);
}
});
from matter-js.
Thank you very much! Now its working.
But when free falling(or high speed movement) the viewport follow slowly. So I tried increasing the mininum speed from: var speed = Math.min(10, Math.pow(centreDist - 50, 2) * 0.0002);
to var speed = Math.min(290, Math.pow(centreDist - 50, 2) * 0.0002);// it starts at 290
, there is like a duplication(visually) of the bodies... I think that the render viewport is moving at two places which make this illusion... Putting back
var deltaCentre = Vector.sub(body.position, viewportCentre),
centreDist = Vector.magnitude(deltaCentre);
// and putting speed to
speed = Math.min(_body.speed * 1.5, _body.speed * 1.8);
helps it a bit.
It's ok though, Now I'll try to make it follow the body perfectly.
Thanks again!
from matter-js.
Great.
If you need it to go faster, you should increase the 0.0002
constant rather than the minimum speed.
from matter-js.
Ah ok. Thank you very much for your help.
from matter-js.
Nice! Keep it up.
from matter-js.
Related Issues (20)
- 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
- [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.
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.