liabru / matter-js

a 2D rigid body physics engine for the web ▲● ■
MIT License
16.37k stars 1.95k forks source link

Please add blur and blend modes. #1228

Open MaxMinimus opened 1 year ago

MaxMinimus commented 1 year ago

This is not enough for full-fledged graphics in games.

And also make border of primitive on top of sprite. This is needed in my editor to highlight body when you click on it.

photonstorm commented 1 year ago

Why on earth would you expect that in a physics library??! What a random request.

MaxMinimus commented 1 year ago

Because it's a renderer, not just a physics engine. It already has sprites and transparency.

photonstorm commented 1 year ago

No, it really isn't a renderer. The Canvas only render class it has built-in is documented as:

/**
* The `Matter.Render` module is a simple canvas based renderer for visualising instances of `Matter.Engine`.
* It is intended for development and debugging purposes, but may also be suitable for simple games.
* It includes a number of drawing options including wireframe, vector with support for sprites and viewports.
*
* @class Render
*/

"Development and debugging purposes"

It doesn't really have true sprite support. All it allows is the assignment of a texture to a body. If you want a fully featured rendering library, look at Pixi.

MaxMinimus commented 1 year ago

I use this library for simple games. Sprite support is: body.render.sprite.texture

Blurring will probably be hard to do, but the pixel blend mode is probably not hard.

photonstorm commented 1 year ago

Both are easy, canvas has native support for both blurring and blend modes, and you have direct access to the Canvas Renderer Matter provides. You can access render.context and call any Canvas API function you want, such as https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation for blend modes or https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter for blur.

This is still the wrong tool for the job, though. Using an actual renderer would be far more efficient.

MaxMinimus commented 1 year ago

Do I understand correctly that with Pixi, performance will be higher, because WebGL and GPU are used?

How much does Canvas slow down the engine? Or does Canvas not limit the engine in any way?

photonstorm commented 1 year ago

Canvas limits it massively but it depends on the game, how many physics objects there are, how fast it needs to run, etc.

For really simple games it may be enough. For most, a proper renderer wound give a lot more flexibility.

MaxMinimus commented 1 year ago

Besides Pixi, what other visualization libraries are there? Pixi is too big and complicated. Is there anything lightweight but just as fast?

photonstorm commented 1 year ago

Pixi is really easy to use and, with a modern bundler (like Vite or Rollup), creates nice compact builds as well.

I don't know of any other well maintained 2D renderers.

You said the game was simple. So you could always use the standard Canvas API and no library at all. Just be aware of its limitations once you start getting in to high numbers of bodies (by which point I would question how 'simple' this game really is)