Sivan, I don't see how this could be off topic. If I have ever seen an on topic post in my life, it's yours.

Also, let's talk about UI for a bit. A pain in the ass in Gamestudio, not much better in Unity, and in general something you don't really want to touch. Also, it hasn't come up yet and I've got a few questions about it already (Error, Pad, I'm looking at you, you fabulous creatures!)

So, first things first: Rayne doesn't use the immediate rendering approach that Unity uses, but a retained approach like Gamestudio, with the exception that it actually makes sense and doesn't make you want to hit your head repeatedly on the desk until the mental pain is relieved by the physical.

Before I start, let me tell you why Unity got it wrong: Because doing any kind of sensible layouting in Unity goes to shit. It is kind of like HTML in that regard, which is great, don't get me wrong, but loses too much control, which you probably want to have. So retained rendering it is, meaning you create objects and layout them how you want!

So, now that we've got the cleared up, here are the basics: There are three root thingy things, the first one being the ui server. The ui server drives the whole ui, it responds to resolution changes, tracks input, and dispatches input events down the responder chain. Then you've got the Widget class, which represents something similar to a Window, but without any chrome around it. A Widget contains zero, one or many Views, which take care of the actual rendering (and a few other things).
Then, there is the responder chain. The responder chain determines HOW input events are handled. Widgets and Views together build the responder chain, and the ui server passes down input events into the responder chain. I don't want to bore you with too much details, but the basics is that Rayne has a very mature ui and event system.

Then there are concrete subclasses of the View class, which provide all sorts of things. There is the generic Control class, which can be used to implement controls (and which is subclassed for example by the Button and Textfield class), there are subclasses for labels, scrollviews, image views and a fuck ton of other, very high level, stuff, and you can all mash them together to build your interface (views can have subviews, which in return can also have subviews). Even more useful, you can provide your views with layouting options, so your views get automatically resized when their parent view resizes; In a way that you decide! UI that automatically adapts to resolution changes? No problem!
The way Rayne handles the UI allows you to composite highly complex user interface elements out of the basic UI components. For example, the Button class has an ImageView and a Label as subviews, and depending on how you setup the button, it will layout them accordingly (for example, you can tell it to have the image to the left and the text to right, or the image on the top and the label on the bottom).

Here is an actual example of that, a button that displays a title and an image:


And here is the code for that example:
Code:
RN::UI::Button *button1 = RN::UI::Button::WithType(RN::UI::Button::Type::Bezel);
button1->SetImageForState(image, RN::UI::Control::Normal);
button1->SetTitleForState(RNCSTR("Image left"), RN::UI::Control::Normal);
button1->SetFrame(RN::Rect(5.0f, 5.0f, 180.0f, 30.0f));

RN::UI::Button *button2 = RN::UI::Button::WithType(RN::UI::Button::Type::Bezel);
button2->SetImageForState(image, RN::UI::Control::Normal);
button2->SetTitleForState(RNCSTR("Image right"), RN::UI::Control::Normal);
button2->SetFrame(RN::Rect(5.0f, 40.0f, 180.0f, 30.0f));
button2->SetImagePosition(RN::UI::ImagePosition::Right);

RN::UI::Button *button3 = RN::UI::Button::WithType(RN::UI::Button::Type::Bezel);
button3->SetImageForState(image, RN::UI::Control::Normal);
button3->SetTitleForState(RNCSTR("Image overlaps"), RN::UI::Control::Normal);
button3->SetFrame(RN::Rect(5.0f, 75.0f, 180.0f, 30.0f));
button3->SetImagePosition(RN::UI::ImagePosition::Overlaps);


Also note that the button is smart enough to handle the layout correctly, which, by the way, is completely customizable (as well as you can customize different images and titles for the different button states).

Speaking of customization: Raynes UI is completely customizable. There is a JSON file which describes the complete colour scheme, what the default fonts are, how the default controls look like, what textures are used, what the insets are, and so on, and so on. Seriously, it's up to you how your UI looks like (and I hope that you have better UI graphics than we do).

Shitlord by trade and passion. Graphics programmer at Laminar Research.
I write blog posts at feresignum.com