RmlUi, moving onto a new Rocket

One year after the last release, a lot of water has flown under the bridges and a lot of progress has been achieved in Unvanquished. In terms of bot development, bug fixing, and so on. Let’s focus on the progress made on the UI today, to give you something to chew before the next version (0.53) comes out. With extra pictures!

A new, improved UI library: LibRocket is dead, long live RmlUi!

To draw the user interface, menus and HUD of Unvanquished, we used libRocket until now. This library was growing old and unmaintained, so in the not-yet-released 0.53, it has been replaced by RmlUi. RmlUi is a libRocket fork that includes bug fixes and new features.

RmlUi is based on the HTML and CSS standards that powers the web, but with Javascript replaced by Lua. Although the support for CSS3 isn’t exhaustive, it is still fairly comprehensive and some functionality that proves really useful for video games is supported, like built-in support for sprites. It supports animations, transitions and transforms, so you can expect some UI niceties in the following releases ๐Ÿ™‚

This button was made combining sprites, shadows, opacity, transitions and rmlui templates โ€” but this UI redesign is more ambitious and won’t come with 0.53 yet

The RmlUi migration project was started two years ago by Ishq, and was taken up again by slipher recently. To accomplish this migration, a total of 4 people contributed code, with help by others. The effort included adding C++14 support to the engine and rewriting important chunks of the user interface. In the process we also had to tweak the size of every element as some had odd sizes after upgrading the CSS engine.

Feature unlocked

Some interesting font rendering features like text-shadow and outlines are unlocked by the new library. Unlike the sprite example above that will have to wait until after 0.53, some of the things showcased below are already included in the next release ๐Ÿ˜€๏ธ

Flexbox and more CSS selectors

There are quite some tiny spacing papercuts inside the Unvanquished UI. This can be attributed to various issues, like float layout used here and there, the lack of a :last-child selector and a very specific CSS particularity on RmlUi: the lack of margin collapse with the parent element.

Any of these missing features can be used to implement consistent spacing easily enough, but libRocket was unfortunately missing all of them. RmlUi doesn’t implement everything, but it at least implements :last-child and flexbox’s display: flex which should allow redoing much of the content flow in a much cleaner, and more consistent way.

Text outlines and shadows

Readability is a known problem in many areas of the game UI

There is support for outlines in RmlUi. The feature was missing in libRocket. This will allow hunting down the places with poor font contrast. As you can see, we can improve the current situation quite a bit!

Transition, animations and transforms

CSS3 have some interesting transform properties which are also implemented in RmlUi.

Among the features that ship in 0.53.0, there is some work by Ishq that implements transformation matrices inside the Dรฆmon engine. This allows fancy UI transforms inside Unvanquished. If you are hungry for nice pictures, don’t hesitate to follow the link above ๐Ÿ˜€๏ธ

This was used to implement a new sprinting icon with transitions, that will be part of 0.53.0

A new map loading screen

This one isn’t about RmlUi features, but illwieckz added back the messages on the loading screen.

RML Inspector

One of the most visual thing is the new RmlUi debugger support. It isn’t ready yet, but it should come in some following release.

The RmlUi live inspector

That’s all folks. Rumours are that the 0.53.0 should arrive in a week ๐Ÿ‘€๏ธ Stay tuned!

5 thoughts on “RmlUi, moving onto a new Rocket”

    1. There are other changes in the pipe. ๐Ÿ™‚๏ธ Working on upgrading our libraries doesn’t mean we don’t work on gameplay. For example the 0.53.0 release will have reworked flamer gameplay to address some flamer balance issue. ๐Ÿ˜‰๏ธ

      The old libRocket library had serious bugs, for example background color of a page or paragraph was also coloring images (โ€ผ๏ธ), we really had to move to maintained RmlUi as there was no correct way to get correct results and we had to stop spending time avoiding issues or working around issues instead of working on more useful stuff like refining the gameplay. ๐Ÿ™ƒ๏ธ

      The upcoming RmlUi debugger enablement will also allows us to spend less time on UI development, giving us more time to work on other topics (like gameplay?) ๐Ÿ™‚๏ธ.

  1. Hi, as a start, this article is a spotlight on a specific thing that happened since last year. In this instance it’s about UI. The next article will likely be the next release announcement, that will talk among others of the gameplay tweaks and the quality of life changes that happened in the past year. Though I’d like to admit it doesn’t include as many gameplay things as I’d like. I’d have really wanted the Gireen builder revamp but it was stopped because it doesn’t protect about build spam.

    I would recommend you to join the chat (https://unvanquished.net/chat/) and discuss this. One of the gameplay problem is that people don’t agree on the solution โ€” or on a solution. I think what will happen after 0.53 is that several contributors will start experimenting anew on the subject matter.

Leave a Reply

Your email address will not be published. Required fields are marked *