Use Prowl.Paper instead of Avalania

[PaperPrototype]

For context, this was incorrectly posted to the Redot-Engine proposals. I meant to post it as a suggestion for Draconic engine: Redot-Engine/redot-proposals#121

Prowl.Paper is a 100% C# immediate mode UI library with a layout engine based on flex box (who's API was originally inspired by https://pangui.io). It also features the ability to draw within a box element using a CanvasRenderingContext2D style API, so you could technically build an entire game within your UI just using Prowl.Paper. The entire UI for the below demo can be found here ProwlEngine/Prowl.Paper#26 and was written in a few hours for fun while experimenting with the library.

500170833-05920fd9-9f7d-4693-ba91-ab556f61b6a1.mov

Note

While my username is "Paper" this library sharing the same name is only a coincidence. It is not my own library! I am a contributor though.

Here is what the code looks like for drawing a fully functional button:

// Create a simple button
Paper.Box("MyButton")
    .Size(100)
    .BackgroundColor(Color.ForestGreen)
    .Rounded(8)
    .Text(Text.Center("Click Me", myFont, Color.White))
    .OnClick((rect) => Console.WriteLine("Button clicked!"));

https://github.com/ProwlEngine/Prowl.Paper

Unlike Avalonia, Prowl.Paper is made for embedding in a game engine (and is already being used by more than one engine!).

It is by far my favorite UI library and I even made a demo UI in a few hours that featured a game engine style interface ProwlEngine/Prowl.Paper#26

Describe the problem or limitation you are having in your project

Avalonia is cumbersome to use and extremely "heavy" producing far larger binaries than I would like.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Prowl.Paper is a one-shot implementation that requires you to only implement an interface. It is significantly easier to use than Avalonia was well since you don't need to create 3 separate files for your UI. Prowl.Paper lets you define your UI logic, layout, and styling all in one place.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

In the Samples folder there is a variety of backend implementations for Paper, ft. OpenTK, Raylib, and WebGL's WasmExample, which is AOT compiled and running in the web https://github.com/ProwlEngine/Prowl.Paper/tree/main/Samples

If this enhancement will not be used often, can it be worked around with a few lines of script?

If you don't want to use Prowl.Paper you can always get access to Prowl.Quill's canvas API (which is what powers Prowl.Paper's rendering) https://github.com/ProwlEngine/Prowl.Quill

You can do this by using the AddActionElement (should probably be called something else like "DrawCanvasElement").

Gui.AddActionElement((vg, rect) =>
{
  // Draw grid lines
  for (int i = 0; i <= 5; i++)
  {
    double y = rect.y + (rect.height / 5) * i;
    vg.BeginPath();
    vg.MoveTo(rect.x, y);
    vg.LineTo(rect.x + rect.width, y);
    vg.SetStrokeColor(Themes.baseContent);
    vg.SetStrokeWidth(1);
    vg.Stroke();
   }
});

Is there a reason why this should be core and not an add-on in the asset library?

Making all of the engine and game UI with a single system like Prowl.Paper would reduce the overhead of the engine and make it very easy to iterate at a fast pace on future engine UI work.

[PaperPrototype]

This video shows the demo UI in action:

500170802-b69cd80a-7499-4b3d-b421-ec576f59ba14.mov

[AR-DEV-1]

Hey there! Thanks for the suggestion, we'll look into it.