Comments (15)
This is now implemented if you wish to try it!
https://github.com/liabru/matter-js/blob/master/build/matter.min.js
There is a new option for the renderer render.options.pixelRatio
.
By default this is set to 1
which will still give the same results as before.
If you want to enable hidpi by automatic detection you should pass this option as 'auto'
when the renderer is created e.g.
Engine.create({
render: {
options: {
pixelRatio: 'auto'
}
}
});
You can also use a fixed decimal value to vary render quality (e.g. 0.5
, 1
, 2
).
Note that hidpi is very processor intensive. While implementing this I found that using hidpi really starts churning my processor and it got hot quickly, so use with care!
from matter-js.
For future reference, the Engine.create
solution has been deprecated, and pixel ratio is set directly on the Render now (link).
from matter-js.
Interesting, I've not had a chance to experiment with this myself.
Would you be able to provide a jsfiddle showing what you did?
from matter-js.
I will write up a jsfiddle for you in the next week; will keep you posted.
from matter-js.
Any status on this? I'd love to use Matter in a project I'm working on, but Retina support is a must.
from matter-js.
@liabru @aroman Sorry I totally forgot about this. I'll try to get some code to present in the next week.
from matter-js.
@pvienneau that would be great if you could, thanks
In the meantime @aroman are you talking about the stuff mentioned in this article?
One thing is that the included renderer is really just intended to be for demo purposes. You can quite easily use it as a starting point for your own and pass it through via the engine options. Usually if you're doing any kind of serious rendering, e.g. for a game, you'll want to do this as early as you can really. You can even use a completely custom game loop if you like.
That said, I'll see if I can implement this anyway if it turns out to be straightforward!
from matter-js.
@liabru the article you mentioned hits exactly what you need to do, but in less lines (simpler, but may not be as efficient). See the following two examples (have a look on your retina device):
http://www.moarcode.com/sandbox/matter/: Your default setting (pixel ratio set to 1). Notice on retina screens that the lines aren't as crisp as they could be.
http://www.moarcode.com/sandbox/matter/retina: With a dynamic pixel ratio set, lines are crisper on devices such as the IPad.
You can have a look through the matter.js file I include. The changes I've brought have been labelled with a CUSTOM comment tag, so you can easily find them. Essentially, any interaction between the visual and logical side of the canvas (display, resize, or mouse/touch interactions) need to be calculated with the pixel ratio in mind. I may not have covered all bases with my changes, but enough to display a full size canvas, and correctly calculate the mouse position and interactions with the objects.
On Ipod (and perhaps IPhone too), there's a serious performance hit, which I have no idea why. The project we used it on (http://carbure.co) doesn't seem to have the same performance hit on small screen devices, so I'm unsure what I may have changes/added to work around this (perhaps it's as simple as not being in debug mode).
All to say, that implemented retina and @X3 support should be fairly straightforward. Plus it open a whole new world of uses for matter.js (I've plugged our website into the phone's accelerometers into matter.js too to give it an extra kick!)
from matter-js.
@pvienneau thanks for the information, it does look much better for sure, I'll have a go at implementing this soon!
Very nice work on http://carbure.co/, slick design and nice use of Matter :)
Accelerometer stuff didn't seem to happen when I moved my device around though?
I think it would be cool if the objects had some sort of constant but subtle motion maybe too?
The project we used it on (http://carbure.co) doesn't seem to have the same performance hit on small screen devices
I'm going to guess this is because you're using sprites rather than a lot of primitive drawing which tends to be slower?
from matter-js.
That's true, we've created our own icon font, the only things for the renderer to draw manually are the boundary walls, which are not visible - so basically nothing to draw :)
Hmm strange, but thanks for the feedback, I might be able to check this out. What device do you have? Android only supports the acceleration on 4+, and IOS has supported it pretty early. It's not so much simulating gravity, but acceleration, so you need to be a bit aggressive with it.
We had alot of attempts at making the icons move around by themselves, all trying to go through Matter.js. Not at the libraries fault, we couldn't find a good algorithm that would give them random movement while not making their paths linear or give them a pattern. I think I ended adding random repulsion forces to each body, which got calculated within matter.js's positioning rendering function, affecting the bodie's paths - but if you let them long enough the icons balance themselves out and stand still - not much better.
If you had a suggestion as to how to incorporate movement on the icons without it forming a pattern or making it too linear, let me know I'd be happy to incorporate it!
from matter-js.
Hmm strange, but thanks for the feedback, I might be able to check this out. What device do you have? Android only supports the acceleration on 4+, and IOS has supported it pretty early.
I'm using the latest Chrome on Android 5.0. I've tried rotating and shaking the phone but doesn't seem to do anything! Strange because my own mobile demo uses accelerometers and works fine.
If you had a suggestion as to how to incorporate movement on the icons without it forming a pattern or making it too linear, let me know I'd be happy to incorporate it!
Disable the friction and resistance and they should keep bouncing around forever, occasionally repelling off each other maybe?
from matter-js.
True, thanks @liabru I'll check this out tomorrow at work!
from matter-js.
@liabru Very nice, thank you!
from matter-js.
If you find any issues, please report them here, cheers
from matter-js.
This is now implemented if you wish to try it!
https://github.com/liabru/matter-js/blob/master/build/matter.min.js
There is a new option for the renderer
render.options.pixelRatio
. By default this is set to1
which will still give the same results as before.If you want to enable hidpi by automatic detection you should pass this option as
'auto'
when the renderer is created e.g.Engine.create({ render: { options: { pixelRatio: 'auto' } } });
You can also use a fixed decimal value to vary render quality (e.g.
0.5
,1
,2
).Note that hidpi is very processor intensive. While implementing this I found that using hidpi really starts churning my processor and it got hot quickly, so use with care!
Hi! I try to use that, cause i have a problem with sprite in mobile but then I actually lose the wall and ground of the canvas and just zoom it in
from matter-js.
Related Issues (20)
- 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
- [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
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.