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

Rate this content
Bookmark
Slides
RightGui is a high-performance, stateless immediate mode CUI library designed for tools development in the video game industry. It supports multiple platforms like Windows, Linux, macOS, FreeBSD, Android, and Raspberry Pi. RightGui has a low memory footprint, requiring only about 145 kilobytes of RAM, including styles, icons, and fonts. The library offers a variety of controls such as labels, drop-down buttons, checkboxes, spinners, text boxes, combo boxes, toggle groups, color pickers, sliders, progress bars, scroll panels, and grids. Developers can use tools like style editor, icons editor, and layout creator to customize their applications. RightGui and all its support tools are free and open source, available on GitHub and can be executed online. The layout creator tool is notable for generating C code and exporting layouts as self-contained files. The video highlights RightGui's capability to configure styles live and see changes in real-time.

From Author:

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.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Roman Santamaria is an electronic engineer, professor, and entrepreneur who has been developing tools and technology for the video games industry.

RightGui is an immediate mode CUI library intended for tools development, which does not store information internally and is stateless.

RightGui is high performance, stateless, multi-platform, has a low memory footprint, and includes support tools like a styles editor, icons editor, and layout editor.

RightGui has a very low memory footprint, requiring only about 145 kilobytes of RAM, including styles, icons, and fonts.

RightGui supports multiple platforms, including web browsers, Windows, Linux, macOS, FreeBSD, Android, Raspberry Pi, and more.

RightGui offers various controls such as labels, drop-down buttons, checkboxes, spinners, text boxes, combo boxes, toggle groups, color pickers, sliders, progress bars, scroll panels, and grids.

An immediate mode UI library does not store information internally but processes inputs and draws controls in real-time through self-contained functions.

RightGui includes a styles editor, icons editor, and layout editor, all of which are free, open source, and available online.

Yes, RightGui and all its associated tools are free and open source.

RightGui and its tools are available on GitHub and can also be executed online.

Ramon Santamaria
Ramon Santamaria
19 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Transcription

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.

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
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.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
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.
Should we have business logic in the UI?
JSNation 2022JSNation 2022
148 min
Should we have business logic in the UI?
WorkshopFree
Samuel Pinto
Samuel Pinto
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.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
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.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.