[Feature request] Allow supplying a custom renderer

[L1lith]

Is your feature request related to a problem? Please describe. Supporting custom renderers could make transitioning to 3d easier (as most of the burden of the implementation details would be on the rendering plugin), it also would make it easy to build custom renderers for things like OpenGL or other device APIs so people could get the most optimization and flexibility out of melonJS if they wanted to. This would also help us complete https://github.com/melonjs/melonJS/issues/1136

Describe the solution you'd like Some kind of standardized API about the standards that the plugins should use (like 3D vectors etc)

Describe alternatives you've considered you could fork melonJS to add custom rendering but it would be nice to have first class support for it.

Additional context

[obiot]

this is definitely a good idea, and an easy one to do, but I'm not sure I understand how it would help with #1136 ?

[L1lith]

this is definitely a good idea, and an easy one to do, but I'm not sure I understand how it would help with #1136 ?

Then we could make a drop-in replacement for the melonJS renderer for React Native. We could use a lib like GCanvas or use the native canvas API on Android/native canvas API on IOS. I'm not sure what is the fastest option here. We could also keep it inside a WebView but I get a feeling we could see some benefits by using native components over HTML ones

[obiot]

so this one is done !

the way it works :

1. any custom renderer should extend the default Renderer class. Both the built-in Canvas and WebGL renderer are themselves extending this base Renderer class.
2. to use the custom renderer, simply specify the Class for the renderer attribute.

To give a (very minimalist) example:

// create a custom renderer extending the default canvas one with one `isCustom` property
class CustomRenderer extends me.CanvasRenderer {
    constructor(options) {
        super(options);
        this.isCustom = true;
    }
}
// call video init, specifying the custom renderer
me.video.init(800, 600, {parent : "screen", scale : "auto", renderer : CustomRenderer});

to be noted that in this example I just extend the CanvasRenderer (that itself extends the base Renderer class) for convenience

this has not been heavily tested, as the current test case doest not go further than extending the Canvas Renderer, add a "custom" property to it, and verify that the property has been set once the renderer has been properly created. There might be some tweaking to be done later in terms of API, but at least there is enough here for anyone that is will to create a React Native or any other custom renderer.

I will therefore close this one, as creating an actual custom renderer should not be part of the "generic" framework.

[obiot]

also created a topic on the forum: https://melonjs.discourse.group/t/custom-renderer/46