Adding retina support

[pvienneau]

Have finished using the matter.js 0.8.0 build for a project, very nice. However, did attempt to add support for screen pixel ratio above 1 (such as retina) by hacking the library abit. Would be great to have this supported out of the box.

[liabru]

Interesting, I've not had a chance to experiment with this myself.

Would you be able to provide a jsfiddle showing what you did?

[pvienneau]

I will write up a jsfiddle for you in the next week; will keep you posted.

[aroman]

Any status on this? I'd love to use Matter in a project I'm working on, but Retina support is a must.

[pvienneau]

@liabru @aroman Sorry I totally forgot about this. I'll try to get some code to present in the next week.

[liabru]

@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!

[pvienneau]

@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!)

[liabru]

@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?

[pvienneau]

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!

[liabru]

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?

[pvienneau]

True, thanks @liabru I'll check this out tomorrow at work!

[liabru]

@pvienneau @aroman

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!

[pvienneau]

@liabru Very nice, thank you!

[liabru]

If you find any issues, please report them here, cheers

[SaFrMo]

For future reference, the Engine.create solution has been deprecated, and pixel ratio is set directly on the Render now (link).

[yanballas]

@pvienneau @aroman

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!

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