Style Editor

Our devblogs are getting crazy.  They were too long. There are too many entries. There is too much information. And the information is already old. Waiting until the end of the month means we could be talking about features that we shipped 3 weeks ago.

It's also putting our development in a weird cycle where we're working to ship the devblog, instead of working to ship the game. We really don't need to be doing that to ourselves.

So instead of those devblogs, we're going to be posting sporadically about what we've made. Taking those sections that we would have written about in the devblog and posting them whenever we want.

My hope is that this makes things more digestible, regular and findable.

Our UI system isn't  a HTML renderer. It's not using webkit.

It's a panel based system, like vgui, or panorama, or derma. It's coded in c#. It uses Yoga as a layout engine.

We style it using a css engine that we coded in c#. It takes in scss.

We have a Razor type system which allows you to mix html and c# to create easy, component based fully dynamic UI - quickly and iteratively. But you don't need to use that - you can create panels using new Panel() and create new panel classes without using any of this.

The inspector lets you view the hierarchy of the panels. This is inspired by the view source window on Chrome. I've made some improvements to this..

Hovering over a panel will highlight it in the game window, and you can use the picker to select UI elements directly (if they have pointer-events switched on).

You can right click elements..

.. and it'll open your code editor right at the source file for it.

It can be difficult to work out why your panels are doing what they're doing. Why does this panel have padding on the bottom, why does this turn red when I hover?

So for that we have the style inspector.

This shows you which styles are loaded.. and importantly, in which order they're being applied.

When I'm making a website I like to open the styles window up in Chrome and play with the colours etc at runtime. I wanted to be able to do that in game too.

Even though hotloading a stylesheet takes less than 10ms, I still find this to be perfect for iteration - especially with colours.

You might have noticed the little disk icon on the left.

Clicking that will save that setting back to the stylesheet.

You can click on the style path in the comment

And it takes you straight to where that's defined

You can view which pseudo classes are active on an element, and toggle them on and off to enable you to edit the hovered and active styles.

Transferable skills is something I always try to keep in mind when deciding how to implement things. 

By using css for styles - and sticking to the standards instead of adding a bunch of random new styles - we're allowing a bunch of people who already know css to make UI easily and intuitively. 

For those that don't know about stylesheets yet, we're giving them a skill to learn that is transferable to the web (and anywhere else that uses css).

It's the same thing with our Razor templates. Anyone that has used Blazor can intuitively use our Razor system (granted - that's probably not many). But also on the flip side, I think the people that use Razor UI in s&box would be amazed to find out that they can legit make fully interactive websites now.