this is a tutorial for how to use goo a C#-only UI framework

the answer is simple. not everybody likes razor and css or may not be familiar with it. that's ok, if you want to stick to razor, don't let me stop you.

goo however, does wrap a lot of behaviors in a nice bow like drag-and-drop and commandlist drawing that you can utilize in razor as well. but, that is not this tutorial.

at some point, however, you WILL need to touch C# if you want to make anything custom in s&box. goo works with you on that and sticks to the same language your code already lives in. (not to mention at any point in time there can be issues with css properties)

with all of that out of the way, let's get goo-ey shall we? make sure you have your thinking cap on and you downloaded goo from the Library Manager in the editor

everything you want in life is a goo blob on a GooPanel.

The way we express this is denoted as GooPanel<T> where <T> is a Type.

we got all kinds of Types: Container, Text, Image, TextEntry, ScenePanel, SvgPanel, WebPanel, the list goes on and on...

we're going to employ the KISS method. Keep it simple, stupid!

the classic example to get your feet wet. first, I will show you the code and explain what the hell is going on:

using Goo;
using Sandbox.UI;

namespace Sandbox;

public class HelloWorldUI : GooPanel<Container>
{
    protected override Container Build() => new Container
    {
        Height = 256,
        Width = 256,
        Padding = 24,
        BackgroundColor = Color.White,
        BorderRadius = 12,
        Children = { new Text("Hello") },
    };
}

 

it ain't much, but it'll do. and you can probably tell what it does already.

using Goo; imports the Goo namespace (GooPanel, Container, Text, and the blob types)
using Sandbox.UI; pulls in Sandbox.UI layout types (Align, Justify, Length, panels)
namespace Sandbox; declares the namespace the class lives in
public class HelloWorldUI : GooPanel<Container> a public class (file HelloWorldUI.cs) that subclasses GooPanel<Container>

In Razor terms: GooPanel<Container> is like a .razor PanelComponent and the Container it builds is like the <root> element.

---

protected override Container Build() => new Container - when you make a Goo panel, you subclass GooPanel<T> and override its Build() method, returning your root blob (here a Container).

The => is "expression-bodied" method syntax. shorthand for { return new Container {...}; }

Inside that new Container { ... } object initializer you set its style and content properties:

Width and Height are both set to 256 pixels
24 pixel padding on Top/Right/Left/Bottom
Color.White is our background color
border radius of 12 pixels
Children listed is one <T> Text blob that says Hello

the initializer holds both styling and structure!

once you got all that down, adding it to your scene is easy

just create a camera game object in the hierarchy if you do not have one already
then create a Screen Panel

click on your Screen Panel in the hierarchy and set the Target Camera to the camera object you just created

click Add Component and in UI Panels you should see your Hello World UI. Add that shizz.

want to learn more? visit the documentation:

obselate.github.io

goo

A C# UI library for s&box. No Razor required.

goo is capable of creating a lot of fun and interesting UI. Here are some samples: