WTF is this EvolveUI thing?

EvolveUI is a UI system for Unity3D. It draws pretty boxes, fast.

It is part UI DSL, part compiler, part runtime.

It's basically a programming language that is custom-built for a single purpose: make some dope UI for games and simulations with as little effort as possible on your end.

Buckle Up Buttercup

This is going to be quite a bit different from any other UI system you've probably used before. You might have heard the terms RetainedMode and ImmediateMode UI. Retained Mode is typically something html/css where you make 'nodes' that live in a tree, and they are alive for as long as they are still part of the UI tree. All the state changes are kept until you change them, for example in HTML you might add a class or an attribute once, and it will stay there until you remove it or our sun runs out of hydrogen.

Immediate mode is something like DearImgui which is the complete opposite: nothing is saved. You basically get a blank canvas every frame that you need to rebuild. This is pretty neat because the programming model is so damn simple. It's easy to make things quickly, and it's pretty fast despite rebuilding all the things all the time. It basically boils down just function calls you make, and you don't need other tooling/languages like html/css to build it, just use whatever your weapon-of-choice programming language is, and you're good to go.

EvolveUI is a bit of a special snowflake where it draws from both of these ideas. In an Evolve app, we keep state around between frames but the code looks and feels like an immediate mode gui. This will make more sense later, let's build something.

Drawing all the things.

Ok enough words, we want pretty boxes. Let's do that.

Open the tutorial project

template AppRoot {
    render {
        Text("Hello, Creature!"); 
    }
}

I might have lied a little bit, this just text, this is not a pretty box. Anyway, this is what an EvolveUI template looks like.

A template is kind of like a component in React, a Widget in Flutter, etc. It's a thing that is reusable that defines how to make some UI.

Let's make more of them. It's almost my birthday, I need to invite people so let's do that.

template BirthdayInvite {
    
    required string name; // who are we inviting? 
    
    render {
        Text($"{name} is invited to my birthday");
    }
    
}

template AppRoot {
    render {
        Text("People to invite");
        BirthdayInvite("Ella");
        BirthdayInvite("Lea");
        BirthdayInvite("Christian");
    }
}

I have more than 3 friends though, and I want my friends to invite the friends. Lets make this better.

template BirthdayInvite {
    
    required string name; // who are we inviting? 
    
    render {
        Text($"{name} is invited to my birthday");
    }
    
}

template AppRoot {
    render {
        Text("People to invite");
        BirthdayInvite("Ella");
        BirthdayInvite("Lea");
        BirthdayInvite("Christian");
    }
}