Leverage existing technologies

Shapes and Font processing is done by Skia, while input handling rendering is done by the integration (OpenGL/Vulkan thru Raylib, OpenTK or SilkNET).

Intuitive and enjoyable to use

Guinevere enables you to address real challenges with every line of code. There's no requirement to master extensive frameworks or wrestle with tedious and restrictive boilerplate; Basic C# knowledge is all that's needed.

Immediate and retained modes

Guinevere prioritizes immediate-mode functionality, complemented by an optional retained-mode layer that ultimately resolves to immediate-mode calls, delivering the advantages of both approaches.

Evolving

Guinevere is designed to evolve with your needs. Whether you're building a simple application or a complex system, Guinevere provides the flexibility and power you need to create the best possible user experience.

Straightforward

Guinevere is optimized for clarity. Everything is designed to be as simple and direct as possible; we have been ruthless in eliminating code and complexity that isn't absolutely essential.

High-performance

When you eliminate the complexity that tangles modern processors, they can truly perform! Guinevere processes and renders most interfaces in fractions of a millisecond.

Layout-enabled

Guinevere features an exceptionally powerful and expressive layout system, delivering all the capabilities you'd expect from a premium modern UI solution, and more.

Single-frame stability

Taking the straightforward approach is also the correct approach. Idiomatic Guinevere code doesn't flicker or require multiple frames to stabilize; it delivers accurate and stable results in the first frame.

Test-friendly

The input-output relationship in Guinevere is exceptionally clear and simple, with every system exposed and fully controllable through code, making it straightforward to simulate any scenario for testing purposes.

Developer-focused

Programmers are first-class citizens in Guinevere; every feature is fully accessible and controllable through code. No auxiliary resources, stylesheets or markup documents are required.

Platform-agnostic

Since Guinevere's sole responsibility is converting input into a series of basic rendering commands, it integrates seamlessly into any environment and rendering pipeline.

Hello, world

Where better to begin than with "hello world"?

These examples demonstrate how minimal the requirements are to get a basic Guinevere application running, and then to render something simple on screen. They contain the complete user application codebase; no additional code is necessary to create a Win32 window and draw a UI until the window closes.

As you can observe, it's remarkably simple to draw primitives such as rectangles, triangles and text. Guinevere provides multiple layers of API granularity, with no tools - however advanced! - hidden from the user. From basic shapes to complex layouts, Guinevere allows you to work at precisely the level of complexity you need.

using Guinevere.Vulkan.SilkNET;
public class Program
{
    public static void Main()
    {
        var gui = new Gui();
        var win = new GuiWindow(gui);

        win.RunGui(() =>
        {
            gui.DrawRect(gui.ScreenRect, 0x292929FF);
            gui.DrawText("Hello, world!");
        });
    }
}

Hello, Triangle

using Guinevere.OpenGL.Raylib;
public class Program
{
    public static void Main()
    {
        var gui = new Gui();
        var win = new GuiWindow(gui);
        win.RunGui(() =>
        {
            gui.DrawRect(gui.ScreenRect, 0x2A2929FF);
            gui.DrawWindowTitlebar();
            using (gui.Node().Expand().Gap(40).Margin(40).AlignContent(0.5f).Enter())
            {
                gui.DrawBackgroundRect(0x00000088, radius: 20);
                float time = gui.Time.Elapsed * 2;
                Vector2 center = gui.Node(200, 200).Rect.Center;
                Vector2 p1 = center + new Vector2(-100 * Cos(time), -100 + Sin(time) * 10);
                Vector2 p2 = center + new Vector2(+100 * Cos(time), -100 - Sin(time) * 10);
                Vector2 p3 = center + new Vector2(0, 100);
                gui.DrawTriangle(p1, p2, p3, Color.Red, Color.Green, Color.Blue);
                gui.DrawText("Hello, Triangle!", color: Color.White, fontSize: 50);
            }
        });
    }
}

Apply layout functionality selectively

Guinevere's layout system serves as a tool for you to utilize wherever and however you choose, not a constraint you're forced to work within. Layout functionality is decoupled from all other features. Ultimately, the layout system simply provides you with rectangles to use for other purposes. This makes it trivial to combine layout with "manual" calculations, using layout only for interface portions where it actually benefits you. Or if you prefer, you can bypass it entirely, without losing access to any of Guinevere's other capabilities.

Thousands of nodes processed in milliseconds

Guinevere's layout system is extraordinarily fast, resolving thousands of layout nodes in fractions of a millisecond. And we haven't even focused on optimization yet! We've simply avoided pessimization.

We've attempted to run comparisons against Yoga, for example, a popular C++ layout library used by React Native and the Unity game engine. In basic scenarios, Guinevere typically outperformed Yoga by a factor of 10-30, and in more complex situations, Guinevere outperformed it by a factor of 100-5000. Note that this is the C# version of Guinevere compared to a C++ library.

We understand these are approximate numbers and not a rigorous benchmark, but they provide some indication of the expected final performance. Once Guinevere approaches completion, we will provide more concrete performance comparisons with popular alternatives.

Robust size primitives

Guinevere provides a simple set of size primitives that can be specified for width and height and - crucially - can also be used as minimum and maximum constraints. This makes it easy to specify layouts that are very challenging in, for example, HTML and CSS.

Size.FitContent(percentageOfContent) // 1 by default
Size.Expand(weight) // 1 by default
Size.Ratio(ratio) // Other axis multiplied by ratio
Size.Percentage(percentage) // 1 is 100%
Size.Pixels(pixels)
10f // In C# floats and ints implicitly convert to Size.

Position and size elements relative to any other element

In Guinevere, you're not restricted to a fixed set of options like relative, absolute or fixed. You can position any element relative to any other element...

gui.Node()
    .PositionRelativeTo(otherNode,
        x: 0.5f,
        y: Offset.PercentageOfSelf(0.5f))
    .SizeRelativeTo(otherNode);

...or even completely move a node to another node.
gui.Node().SetNewParent(otherNode);

Sophisticated layout blending

Layout nodes can exist in a blended state between multiple different possible configurations. This makes transitions between different computed or derived values very straightforward to create, and is extremely useful for animations. Certain concepts, such as animating from fit content to a constrained expand, are extremely difficult or even impossible to express in, for example, HTML and CSS.

gui.Node().Width(
    Size.Lerp(Size.FitContent(), Size.Expand(), t)
);

Alignment

In Guinevere, alignment is not based on left, center, right, etc., but rather is simply a float where 0 is "left", 1 is "right" and 0.5 is "center". You can even align < 0 and > 1. float align = cos(time) * 0.5f + 0.5f; gui.Node().AlignContent(x: align, y: align);

It's "pure data"

The LayoutNode struct simply contains a pointer to the layout data, which you can access and modify at will, but we've made the most common layout data easily accessible.

LayoutNode node = gui.Node();
DrawRect(node.Rect, col);        // With padding
DrawRect(node.OuterRect, col);   // With padding and margin
DrawRect(node.InnerRect, col);   // Without padding and margin
DrawRect(node.ContentRect, col); // Bounds of the content
DrawRect(node.Parent.Rect, col); // Parent rect

You can easily traverse the entire layout tree:

int i = 0;
LayoutNode someNode = gui.CurrentNode;
foreach (LayoutNode node in someNode.ChildNodes)
{
    Color color = i % 2 == 0 ? Color.Red : Color.Green;
    gui.DrawRect(node.Rect, color);
}

All of the layout specification methods such as .MaxWidth(), .AlignContent(), .Gap(), etc., are in fact just extremely small, inlinable functions updating a tiny amount of data. For example, setting the max width of a layout node to 100 pixels is just:

// Specify that we're using pixels
node.Properties.MaxWidth.Type = SizeMode.Pixels;
// Give the value in pixels
node.Properties.MaxWidth.Value = 100;
// Register that the node now has a max value
node.Properties.PropertyFlags |= PropertyFlags.MaxWidth;

Adaptable

Choose the method of using nodes that best suits your requirements. You can assign nodes to variables, use the fluent API, or use the using statement. var node = gui.Node(); node.Position(100, 100); node.Size(200, 200); SomeOtherFunction(node);

You can enter and exit nodes with the using statement.

using (gui.Node().Size(200, 200).Enter())
{
    // Do stuff
}

This is essentially equivalent to:

LayoutNodeScope scope = gui.Node().Size(200, 200).Enter();
// Do stuff
scope.Exit();

Convenient shortcuts for working with other Guinevere systems

The layout system itself is very isolated from the rest of the codebase, but because of how frequently it's used, we've created some shortcuts to make it easier to work with other Guinevere systems through the layout nodes. Note that none of the following features are part of the layout system itself, but are rather just convenient shortcuts. Entering nodes helps you manage state

gui.SetZIndex(1);
gui.SetFontSize(13);
using (gui.Node().Enter())
{
   gui.SetZIndex(30);
   gui.SetFontSize(40);
}
// Font size is back to 13, and z-index is back to 1.

Shortcuts to the interactable system

LayoutNode node = gui.CurrentNode;
if (node.OnHold(out HoldArgs args))
   node.SelfOffset(args.DeltaPosition);
if (node.OnHover())
   DrawRect(node.Rect, Color.Red);
// Same as:
if (gui.GetInteractable(node.Rect).OnHover())
   DrawRect(node.Rect, Color.Red);

And much more

Covering all the features of Guinevere's layout system would require significant space, but here are a few we look forward to demonstrating in the future:

• Tables
• Wrapping of flowing elements
• Pivoting
• Margins and Paddings
• Self Offset
• Content Offset
• Flow direction

Define a shape

Note that a shape is not bound to a specific position - it's just a shape. It can be drawn in any position, used and reused as many times as you need.

Vector2 position = gui.ScreenRect.Center;
SdShape shape = SdShape.Circle(300);

Shapes can also be used as input elements

Interactable elements are most commonly defined by a simple rectangle, but you can also define them as a shape, and then use the shape as the interactable area.

var interactable = gui.GetInteractable(position, shape);
bool isHovering = interactable.OnHover();
bool isDragging = interactable.OnHold(out HoldArgs args);

Use shapes as clipping masks

This will affect everything, including text. This is, for example, how you would ensure content in a rounded rectangle doesn't visually overflow:

gui.SetClipShape(position, shape);
``

Shapes can also be used as input elements

Interactable elements are most commonly defined by a simple rectangle, but you can also define them as a shape, and then use the shape as the interactable area.

var interactable = gui.GetInteractable(position, shape);
bool isHovering = interactable.OnHover();
bool isDragging = interactable.OnHold(out HoldArgs args);

Drawn with unlimited effects

Shapes can be drawn with various effects, such as gradients, textures and shadows. All effects are easily animatable, and gradients look excellent without the banding artifacts that are common in other systems.

Also note that all the effects will actually be drawn on top of each other in the specified order, all in a single draw call. In fact, all shapes in a given z-index are included in the same single draw call that draws the rest of the geometry.

gui.DrawShape(position, shape)
    .SolidColor(Color.HSVLerp(a, b, tHover))
    .VariousTypesOfGradients(...)
    .BackgroundTextures(...)
    .OuterShadow(...)
    .OuterShadow(...)
    .InnerShadow(...)
    .AndSoOn(...);