-
-
Notifications
You must be signed in to change notification settings - Fork 1
Topic ‐ Interface Styling
One major topic not really touched on in the main tutorial is the whole system for styling GUI elements. We'll go into the basics of how it works, and present some approaches you can take when looking for inspiration for your own work.
On the technical side, GUI styles are split into two: Style prototypes and runtime styling. Let's have a look at what they do and the differences between them.
First are style prototypes. They are defined in the data stage, similar to other kinds of prototypes like items and recipes. They adhere to the specification documented in the docs. There are hundreds of properties that can be used, and the game itself ships with many predefined style prototypes.
Then, there's runtime styling. This is done entirely through the LuaStyle API, which is found on every GUI element through its style attribute. You can use it to adjust the appearance of elements at any point during the control stage. It does however have some limitations that style prototypes don't.
These two ways to influence appearance are theoretically interchangeable, meaning you can use either one or the other, or more likely both in combination. There are some caveats to this though. A big one is that runtime styling can not do everything style prototypes can. Some core properties like graphical sets can only be defined using style prototypes. This is because their definition requires images to be loaded, which is something that can only be done during the initial launch of the game. So in some cases, you won't be able to avoid using style prototypes.
One disadvantage of style prototypes is that because they are loaded on game startup, you need to fully restart the game for any change you make to take effect. This makes for a slower development process. Also, it is important to note that the property names and accepted range of values are different for both systems. Many things overlap, but sometimes the name for a property differs from the prototype definition to the LuaStyle attribute. Always make sure you're looking at the right set of documentation to avoid making this mistake.
Now you know a bit about how it works, but are probably still a bit confused about where to being getting familiar with all of it. There's a few ways to approach this, but remember that with any creative decisions, there is bound to be disagreement about how exactly to do things. Just know that there are different ways of building and styling an interface in Factorio, and that many of them are valid.
The best way to learn is to copy what others have done. This sounds very uncreative, but that's how it works with any artistic process. You first need to learn how to do things conventionally before you can know how to properly deviate from it. Luckily, there's two big sources of inspiration you can draw from: The vanilla game and other mods.
If you're not sure how something should look, or how something you saw works technically, you can try to find out. To that end, there is a very useful tool built into the game: Ctrl+F5 and Ctrl+F6. These shortcuts activate a debug mode that lets you have a closer look at the layering of elements and the styles they use. This is very helpful as it allows you to directly copy how the game or another mod does things. It'll look something like this:

With these tools, you can pick apart any interface you like to see how it achieves its look. As a general principle, it's the prudent choice to try to emulate vanilla layouts and style choices as closely as possible. They have been thoroughly considered by people that know what they are doing, even if you yourself are not sure why things are the way they are. This doesn't mean you should never deviate from it, though. If you can think of a good reason to not follow convention, feel free to go for it, as even the Factorio devs misjudge things sometimes. Crazy, I know.
Some of this detective work has thankfully already been done by someone else. Raiguard's style guide describes some of the most common patterns that the game uses. He meticulously analysed how vanilla builds its interfaces, from layout over styles to layering. If you're wondering about how to get something to look native, give his style guide a read. It can't talk about everything of course, so you'll need to make your own decisions as well, but it's a good anchor to ensure you're not too far off the path.
If you're curious about the code-side of things, you'll only be able to look at other mods' code, as the game's code is not public, and uses a different system anyways. Mods are open-source, allowing you to download them from the mod portal and peek into how they do things. Do note that 'open source' does not mean the mod uses a permissive license. Take care to not infringe on people's rights by copying code from mods with licenses that disallow it. Also, choose the mods you take a look at carefully, as not every mod is written in a way that you should learn from. This caveat also applies to styling choices of course.
That's all the helpful advice I can give, you'll have to venture out on your own now. If you need a respite from the Wild West that is GUI work, feel free to join the official Factorio Discord, specifically the #mod-making channel; There's bound to be people there who are happy to answer your questions.