Build GUIs in HTML/CSS/JS instead of native elements

Building a fullscreen catalog GUI that resizes all the way from desktop to mobile resolutions is a tall order in ROBLOX.

I am wasting a lot of time rescaling GUI elements with code to make things scale in certain ways and implement the equivalent of CSS float: left.

I would like to be able to build all my GUIs using modern web frameworks like Bootstrap. I would like to do all of my GUI animations using JQuery animations. I want to never have to think about what my animation timer’s current index is. I want to be able to use web fonts. I want to link images without having to upload them to ROBLOX. I want to be able to use libraries like Isotope to make sexy catalog mason layouts. I don’t want to upload a GUI slice 9 dialog box that I programmer-arted in Paint.net. with rounded corners and a gradient. I want to use border-radius: 5px; and background: linear-gradient(red, yellow);. I want to use glyphicons. I want new GUI developers to have no idea what a UDim2 is. I want to leverage 20 years of webtech instead of rolling my own. In short, I want to live.

I propose we use something like Awesomium to make GUIs in ROBLOX great.

53 Likes

This is a security concern is it not though? you could pretty much get peoples IP address through this by linking images to your website, which I definitely don’t want happening personally.

I completely agree aside from that security concern, HTML UI would ultimately allow amazing customization. Rust is a perfect example of a game using HTML for their interface, and they’re doing a damn good job with it.

5 Likes

If managing game resources were easier I wouldn’t really care about this. A good GUI probably wants to use 100 images (look at all the junk your browser downloads to properly render a random webpage). I think it is potentially a moderation issue but I don’t think it is a security issue.

3 Likes

:two_hearts: :two_hearts::two_hearts::two_hearts::two_hearts:

6 Likes

While this would be awesome, I’d rather see this be a ModuleScript library instead of a built-in thing, so that I could have more control over it.

Perhaps you should consider writing a library for it, I’m sure a lot of people would love it.

5 Likes

Disagree.

I want less control over the gritty details of rendering.

I can make a webpage look however I want without writing a patch for how Chrome renders HTML. The whole point is that there is a standard. There are probably 100 million people who already have some idea of how to make a page using HTML. If we change it even slightly now there are 0 people who know how to make a page in your slightly different system.

On top of that DOM updates are already hella expensive. Imagine what would happen if we built an HTML renderer in Lua. Gross. And then we want to update the native GUI system slightly and we break it all. Gross.

11 Likes

Just because you can work around something doesn’t mean the default behavior is good. OP entails better defaults for GUIs – better defaults that can be used by everyone without requiring every person who makes a GUI ever to develop their own, personal, independent library.

6 Likes

I can’t really argue about the GUI system being a nightmare to work with. However, I don’t think writing in a markup language is the best way to go about with handling this. Do you guys really think modern game engines use HTML to handle their UI displays?

I think they should provide better built-in functionality for snapping GUI elements to certain points and resize in certain ways, instead of completely dropping the current GUI system in favor of HTML.

If anything, I get more used to HTML/ CSS/ JS via Roblox :wink:

Oh- oh god… like… 95% of my programming experience comes from Roblox now that I think about it…

3 Likes

Yes.

https://www.unrealengine.com/blog/blui-html-meets-unreal

10 Likes

What we really need is a UI system similar to what Apple offers with Xcode. Even though HTML/CSS would be cool to work with, I don’t think it’s really meant for game UI (just like JavaScript isn’t meant to be a server sided language, but NodeJS is awesome).

3 Likes

I agree. The ROBLOX GUI system is too limited for even what I’ve wanted to create with it. Being able to use CSS would be a huge improvement.

5 Likes

There are also a lot of people using Middleware Products End Of Sale | Autodesk

What’s the deal with this Merely1 guy. We want the real Merely.

5 Likes

How dare you reveal his true identity!

2 Likes

I’ve wanted this for forever. Thanks for bringing attention to it :sparkling_heart:

2 Likes

Awesomium does not work on half of the platforms we need it to work on.

Web technologies in general are very very very very painful to implement. There’s no way we’re doing any HTML/CSS/JS implementation ourselves.

Performance implications are unclear.
Hell, they are clear - performance will be a huge issue.

In VR you have to rethink UI anyway.

So, yeah, the likelihood of this happening in the next few years is… not very high.

8 Likes

Here’s another way to think about this.

In ROBLOX - and in any other engines or games I’ve worked on really - every single technology problem is your problem.

You’re using FMOD to play sounds? FMOD is crashing on this input? There’s no version update? You have to work around this issue or fix the code yourself.
You’re using PhysX for physics simulation? It is slow on this level? You have to work around the issue or fix the code yourself.
You’re using CURL as an HTTP implementation? It does not compile for Xbox One? You have to make it compile, or stop using it.

Basically, every single dependency you have is a liability. Games are memory constrained, performance constrained and aggressively multi-platform - and making the libraries you use work in these constraints is fundamentally your responsibility.

It should go without saying that the size of the dependency (e.g. in lines of code) is inversely proportional to your ability to solve the issues as they come up.

Any web browser implementation is several times bigger than the rest of ROBLOX codebase.

This gives you an idea of the cost that we’d have to pay for “just embedding a web browser”. Studio is using a web browser (QtWebKit), runs on just two platforms on a fixed set of web pages without memory or performance constraints. And we had to solve WebKit issues many times, including patching the source.

10 Likes

Back in like 2007-2008, Roblox did actually support HTML GUIs. It was before I started learning how to script so I never used them and I can’t remember the reasoning for removing them, but they did exist.

3 Likes

Personally, I would think something like XAML would be better. It’s more suited to being played about with code, and has support for advanced features like event binding, data binding (e.g. instead of updating the Text property, you update a table entry and the UI automatically updates) and also ‘markup’ extensions so you can make your own ‘classes’. (e.g. a TextBox with autocomplete)

1 Like

do you mean something like this @zeuxcg?

http://devforum.roblox.com/t/in-relation-to-more-gui-design-power/15698