Method of changing background is outdated in demos? about matter-js HOT 7 CLOSED

Ah, it's a little confusing!

The issue here is that if you are using wireframe rendering, there is a separate property to set instead:

engine.render.options.wireframeBackground = "color"

Where color is a CSS color value e.g. '#ffffff'.

That said, there also seems to be a bug in Render.setBackground, as it doesn't actually set the renderer's background option, it only applies the given background to the canvas.

I'll add a fix for this soon (maybe it should detect what render mode you're using too).

from matter-js.

Those sound like great fixes. I don't really know what wireframe rendering is and I'm not sure how I would or wouldn't do it. It was actually the background of the canvas that I was trying to set.

In the demo it looked like render.options.background was changing the background of the canvas, but perhaps I didn't read it carefully enough and it was changing the background of the elements.

from matter-js.

Wireframe rendering is just the default mode, it's what you see when you run the demos. It's basic and only draws outlines, but useful for debugging and testing.

Unless you have set render.options.wireframes to false in your code, then you will be seeing wireframe rendering.

I think you should probably set render.options.wireframes to false in your code and then set render.options.background to set your background. This will also enable full solid rendering of objects rather than just outlines.

from matter-js.

Thanks for the tip on the wireframes. Was wondering how I could change that. I actually want to try to use three.js to render the objects. For now I'm going to keep them, they're great for debugging purposes.

I'm not sure if it helps, but _render.controller.setBackground( _render, 'green' ); seemed to work to change the background.

from matter-js.

Thanks for the tip on the wireframes. Was wondering how I could change that.

Yeah I need to document this better. Also maybe make the default mode solid rendering... hmm.

I actually want to try to use three.js to render the objects.

It might be a good idea then to look at Matter.RenderPixi, since it has code for handling the scene graph?

I'm not sure if it helps, but _render.controller.setBackground( _render, 'green' ); seemed to work to change the background.

I'm going to remove setBackground, since it never really should have been public. You should use the properties render.options.background and render.options.wireframeBackground, are they working for you?

from matter-js.

I'm actually pretty new to this, so I'm not sure how to use the scene graph, but I'll look into it. Using _engine.render.options.background and .wireframeBackground doesn't seem to get me any results. I don't get errors, but nothing happens.

I've been trying a lot of things and getting, as it is with these things, weird results. Right now, despite setting the render property to Matter.RenderPixi, the context of the canvas is 2D. Here's the code for that: http://pastebin.com/tRXhLwq5

Sometime in the past I got it to be 3D, but I think I had to use var foo = Matter.RenderPixi.create(...) which ended up making two canvases. Also, I couldn't see the three.js stuff under the matter.js stuff. Maybe this all belongs in a different issue, though, or on stackoverflow or something.

Edit: Didn't see the reply to the other issue. Just took a look at the wiki and it clarifies a bit, thank you.

from matter-js.

Closed because Matter.RenderPixi is now deprecated so support is limited.

from matter-js.