Raygui: An Immediate-Mode C UI for Wasm Tools Development

Rate this content
Bookmark
Slides

raygui is a very lightweight immediate-mode UI intended for tools development, combined with raylib, it allows the creation of small high-performant wasm web tools. In this talk we will analyze this specific use case for tools development.

19 min
28 Sep, 2023

AI Generated Video Summary

Welcome to the presentation of RightGui, an immediate mode CUI library for tools development. RightGui is a high-performance library that is stateless and uses small self-contained functions to process inputs and draw controls. It provides a variety of controls, customizable styles, and support tools for live style configuration. Additionally, there are tools like the icons editor and layout creator that allow for customizations and code generation. Reiki offers a variety of tools, including a sound editor, image manipulation canvas, and resource packer.

1. Introduction to RightGui Library

Short description:

Welcome to the presentation of RightGui, an immediate mode CUI library for tools development. RightGui is a high-performance library that is stateless and uses small self-contained functions to process inputs and draw controls. It can be used across multiple platforms and has a low memory footprint. The library is compiled through mscript to web assembly, allowing it to run efficiently on web platforms. It also provides a variety of icons and customizable styles.

Welcome, everybody. My name is Roman Santamaria. I'm an electronic engineer, a professor, entrepreneur, and for the last few years I've been developing tools and technology for the video games industry.

Today I'm going to present one of those technologies that is RightGui, that is an immediate mode CUI library intended for tools development. Actually, this same presentation is a web application, as you can see. It's running on web. And the that's the tool. And the presentation itself has been created with RightGui to demonstrate the possibilities and the versatility of this tool.

Okay, so let's start. What can you do with RightGui? What is exactly RightGui? Well, RightGui actually is an immediate mode library. It means that it does not store information internally. It is stateless. So actually all the UI system is based on small functions that are self-contained that can not only process all the inputs, but also draw all the control in immediate mode. Here is an example. This piece of code in C actually defines a button at the same time that draws the button and receives back the state of the button. If the button has been pressed, it enables a variable that is on the user side. And if that variable is enabled, it actually shows another immediate mode UI control that is a message box with some information. You can see that that code generate the button and when you press the button, you see it generates a key message box. That's all the code needed for the button and the message box, including in itself all the logic. That's an immediate mode library.

Also, the library is really high performance. At the back end, it uses another of my technologies that is Riley, that it's a popular C library, a very high performance in itself. It's code in C. And that code is compiled through mscript to web assembly, allowing to run in a very performant web, in a very performant way, all that code on, on a web platform, on a browser. Also, thanks to being a C library, it is multi platform. As I said, you can see it can run on web, but, on a browser, but it can also run the same, exactly the same code can be compiled for Windows, Linux, MacOS, FreeBSD, and even embedded systems, Android, Raspberry Pi, more esoteric operating systems like haiku, or even other operating systems that are supported by, by Riley, by the backend. In that regards the library, RI-D, being animated mode library, has a very, very low memory footprint. Actually the library only requires about 145 kilobytes of memory, of RAM memory, that's the total requirement for the library, and that considers the styles provided. It's a global variable containing 348 properties for the styles that actually you can change. The icons, the library provides, as you can see here, those icons are provided by the library, there are up to 250 icons defined but you can add more if you want.

2. Font, Support Tools, and Controls

Short description:

The font is the most memory expensive element in the library, with a total memory footprint of 145 kilobytes. ReiG includes a set of support tools for editing styles, creating icons, and defining layouts. The library, tools, and support tools are all free and open source. You can find them in this link. ReiG provides a wide range of controls, including labels, drop-down buttons, checkboxes, spinners, text boxes, combo boxes, color pickers, sliders, progress bars, scroll panels, grids, and rich text boxes.

And also the font, the font actually is the most memory expensive element because it includes several fonts for multiple languages. But on all the styles defined, actually you can see here several styles that can be changing in real time. You see all those styles are up to 136 kilobytes including the font texture atlas and all the properties of the atlas for proper rendering of the font. So total memory for Footprint is 145 kilobytes.

Also the library includes a set of support tools that allows to edit styles as you have seen right now. There is a styles editor. All the styles you have seen have been created with that styles editor. The styles editor also runs online and it has been also created using ReiG. We will see more about that. There is also another tool that is an icons editor that has been used to create all the icons that you can see in the buttons and all around. And finally, there is a third tool that is a layout editor. I have to mention that ReiG has not an auto layout mechanism. It's only the layout must be defined by the user. So the user has full control over all the layout or how everything is placed around. We'll see a bit more about those tools later on.

And finally, everything you have seen, ReiLib, ReiG and all the tools that interact with ReiG and all the support tools, everything is free and open source. And you can find it here in this link. That's about the features. What about the controls? Okay, here you have a live example of some or most of the controls available in ReiG. You got labels. Actually those things are labels. You got drop-down buttons, checkboxes. You also have spinners. You got a text box. Actually, you can place the quotes or everything. You have got a text box. You got combo boxes, different states, a guillies view, a toggle groups. Also you've got a color picker selector with alpha bars and a few bars, a sliders, progress bar, scroll panels, grids. You even have a bit more rich text box. Those are the controls available.

3. Controls, Styles, and Support Tools

Short description:

In the immediate mode UI system, controls are just function calls, and they return variables like the selected item or scroll bar position. Styles in RightGui are highly customizable, with options for different fonts, sizes, and spacing. The support tools, Geo Styler, Geo Icons, and Geo Layout, allow you to configure RightGui applications and see style changes in real-time.

Actually, an interesting point about the controls is that all the controls are just function calls. That's what immediate mode UI gives you. And all the controls have these functions, which define the rectangle of the control, the text contained in the control, and finally, some control state variable that should be returned to the user. For example, in the case of ListView, the selected item. The same goes for the toggle group. In the case of the panel, it returns the scroll bar position for scrolling. These are the variables returned. There are usually one or two variables for every control. And finally, we have a return variable that is some internal state for the control, returned as required as an integer. So, as you see, the usage of this immediate mode UI system is pretty simple. That's regarding the controls available. You can scale them, move them, and interact with them on the screen.

About the styles, I've already shown you what's available, but by default, I created a set of styles as a showcase, demonstrating how everything can be changed in the style. For example, there's a label with a specific size, a label with a specific color, and different styles with different fonts, font sizes, spacing, and line spacing for multiple lines. You can configure almost every style aspect you can imagine for the UI. These are some of the styles I created. Personally, I really like the pixel art UI style, retro UI style for my tools, and all the styles I created that follow those guidelines. But you can also load any standard form and customize the style to suit your needs.

Regarding the support tools, there are three support tools that allow you to configure any RightGui application developed for your needs. These tools are the Geo Styler, the Geo Icons, and the Geo Layout. They are all free and open source, and they are available online. You can find the tools on GitHub, and you can also use them online. One interesting point is that you can configure the style live in the tool and see the changes in real-time. For example, you can change the border color or the base color of the controls' text color.

4. Tools and Style Configuration

Short description:

The three tools are free and open source. You can configure the style live and see the changes in real-time. You have full control over the default style and every specific control.

The three tools are free and open source. Actually, they are available online. They are not only available on GitHub. Actually, here you can see the tool on GitHub, but also you got the tool published online that can be executed. And one interesting point is that you can configure the style live and in the same tool, you are seeing live how the tool style is changed. For example, if I change the border color, if I change the base color of the controls text color for example. Now, like that, you can change some specific control that affects all the controls but you can change some specific control. For example, the button, if I want the button a bit different now. I border color. I can change only the buttons now and well, you can change all the properties. You can also change the phone. Well, you have a full control, not only over all the controls as a default style, but also over every specific control, okay?

5. Gear Styler, Icons Editor, and Layout Creator

Short description:

The gear styler and icons editor are two useful tools in RaiGui. The icons editor allows you to edit the default icons included in RaiGui, with 256 slots available. The layout creator tool is particularly interesting because it allows you to create custom layouts by placing controls and generating C code for the layout. You can export the layout as a self-contained file to be added to any project. In addition to these tools, there is a set of tools created by the speaker, most of which are published and can be used online for free.

That's the gear styler but, oh yeah, you also have the icons editor. It's a simple icons editor. That's it so, here you can edit the icons. Those are the icons that are by default included in RaiGui. There are 256 slots for icons actually. At the moment there are still some slots not filled. Some contributors add new icons. Actually all those icons have been added by contributors lately and well at the moment there are 256 but yeah that can be incremented to whatever number.

Yeah and that's an icon editor you see. Yeah so and finally probably the most useful and the most interesting tool considering that Reigi has no automatic layout system. That the layout must be created by the user. It's a layout creator tool. For example we can place here controls We have actually it can be edited We can place textbox for example and make it bigger. You can create the layout and actually it's interesting that all the layouts are referenced by an anchor point and you can ask how if it's an immediate mode library that is actually only functions called how can I export that layout. Actually that's the interesting thing when you hit the export current layout. Actually it generates code, it generates automatically the C code for that layout. You can configure if it's C code, if it's containing a header only file, if you want to export anchors, rectangles, you have several configuration options to export the code in the way you want it to be added to your project. That's the layout actually. With that tool you can create auto contained layouts. For example, file browser, importer, exporter, window. You can create auto contained windows that can be exported as a self-contained file to be added to any project. That's one thing that I do with my projects. Beside the support Reiki tools we also have all those tools. Actually, as I said for the last few years I've been working not only on those technologies, Reiki and some other technologies, but I've also been for the last five years, I've been focused on tools development using my technologies. Here, there is a set of tools that I have created. Most of them are published and can be used online for free, and some are just internal. For me, for example, that's a tool to create tools in a visual way, etc. That's a text editor that has not been published yet. Some tools have not been... are not ready, but are not published, but most of them are published and actually can be used online.

6. Reiki Tools and Capabilities

Short description:

Reiki offers a variety of tools, including a sound editor, a canvas for image manipulation, a texture packer, a stereography tool, a resource packer, and an installer creator. These tools are available online and can be downloaded as standalone applications. They have been used in production for about five years, demonstrating their effectiveness on the web. If you have any questions, please feel free to ask.

Some of the tools created using Reiki are not ready, but are not published, but most of them are published and actually can be used online. For example, that's a sound editor that has been created also with Reiki. It's also free and open source, but then you have more complex tools like text tools. Actually, this tool is like a canvas to view images, apply shaders, apply transformations to the images and organize them in a kind of a board. Here you have some example images, because I got no images loaded, but you can see what can be done with that tool.

It runs online, but it's also available to download as a standalone tool. That's the multiplatform capabilities of Reiki. A texture packer, a stereography tool, a resource packer, for example. That tool is intended to package for video games, to package resources, images, text, shaders, models, audios, to pack tools into a self-contained package, with different compressions, encryptions, for every file. And you also have a installer creator, and et cetera. Actually, the set of tools available, it's quite wide. And actually, it proves that, well, those technologies work and they work on web, and they have been used in, in production for about five years now. And, yeah, that's it.

Okay. Wait, wait, wait, wait. Let's go full screen. And well, that would be my presentation of Rite Geek. I hope you enjoy it, you like it. And now if there is any question, feel free to ask. Thank you very much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JSNation 2022JSNation 2022
148 min
Should we have business logic in the UI?
WorkshopFree
How many times did you say or hear “this is business logic, it should not be here”?In this workshop, we will create a modern frontend application using old patterns and you will learn how to build apps that have decoupled UI and services.We will start with a React application that has its whole logic in the UI. Then step by step we will extract the rules and operations to hit that sweet spot of independence.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.