Unreal User Interfaces
Working with UI widgets in UE4
I´ve been doing more UI work in UE4. Its very challenging task because UI has a very important role for welding different systems together. UI is also usually the only thing that player will see from a complex game system. Its important to keep UI minimal and easy to read but at the same time it should show important information for players. This task require a lot of iteration and also a lot of thinking what would be the best way to handle the code behind it all.
One crucial part is to keep things easy to manage. I try to split UI into small modules that do certain tasks. A generic header module that showcase window title, button that close it and some control for text and element color. This way I can spawn that sub widget in places that I need to and its fast to make it do certain things and the whole UI system will remain easy to iterate and it also allows very fast ways to create new UI elements. Its also easier to handle UI windows because then I can run different events that hide/show certain sub widgets. One of my favorite things with this approach is that I only need to animate one of these widgets and when I´m spawning them at run-time I can use a random float from range to control the animation play rate. This way UI opening/closing feels much more interesting because all of the individual elements are spawning at slightly different rate.
I don´t do separate UI mock ups that much anymore because I feel I lose time that way and its faster to do that in UE instead. This way I don´t spend time sketching something but instead I will end up with something functional that I can iterate more with. This is a personal thing and its possible to do this in a small team where I can do the whole UI from art to code instead of asking a programmer to do code for me or asking someone to approve the design.
Multiple platforms, one UI to rule them all
Because our game projects supports multiple platforms, especially ROT-8 I had to find clever ways to reuse UI modules and minimize any extra work. Our primary platform is desktop pc but we also support mobile and hopefully more platforms in the future.
Thats why it was important to get enough information about the player platform and input devices that she/he uses. We get this by checking if the player is using a mobile devices or not. I will use that information when the system is creating UI widgets. We don´t need to show certain desktop elements on mobile and vice versa.
Once we know the platform then the next part is to get information what kind of input device player wants to use. For mobile we support basic touch inputs and game pads. There is no need to show on screen elements when player wants to use game pad so the system will hide those elements. Same thing with desktop. Based on the first player input we identify the input device and UI will adapt on that situation. Of course player have the option to change that setting any time he or she wants but this way it feels very natural.
Platforms and input devices are also affecting tutorials so we are using that same information when game is creating tutorial elements. All of this information is stored in game instance so its easy to access and its available for use all the time.
Another things to keep in mind are element alignments and aspect ratios that can vary a lot in different platforms and devices. Testing is the key here and I do a lot of test builds to see how elements scales. Another thing that is good to keep in mind is the DPI scaling. That can help to balance things out. UE has a great setting for that where you can specify DPI curve that controls that. I ended up using a float value 0,8 for desktop and 1,0 for mobile. This way I can still read text when I play with a phone but elements also fit well. Desktop has a much more room because the screen is usually large and you are not hiding any part of it with fingers so there I can get away with a smaller element size.
There are a lot of things to keep in mind when you are creating UI windows but these are some basic elements that I always try to keep in mind.
Achievement System
I made an achievements system for our ROT-8 game that was very interesting task. Our player class was already calculating various values so it was trivial to just get those variables to compare against goal values that I specify.
Basically I made a struct that had few variables like the goal value, achievement level and so on. Then I made a data table where I created achievements and based on that I could create a system that generated achievements items. Then it was easy to create UI elements for that system.
I made a timer that will check those values every 5 seconds (I will need to iterate more with this value) if player values are larger than those. If they are then that means player get the achievement and then I will set “completed” boolean to true and that item will be excluded from active achievements list.
Last part was to save this data and the system was working. This is the first iteration phase and there is more to it but the overall idea is pretty simple. My future plan is to add support for different types of achievements and make it a more generic solution that we can use for future projects.
Future plans
Another thing that I´ve been looking into is Python scripting. The more I work with blueprints and “coding” the more I like to find ways to speed up certain parts of my workflow. I would also like to look more into Houdini and I hope to find time for that in the future. I´m also looking more into UE networking system so I could help on that side too. On top of all this I have some other side projects going on where I will try to test new workflows that will help us to push Planetrism and ROT-8 further in visual side of things.
Next time I might show more in depth look into a radial menu system that we made from scratch and some tips and tricks how to handle different option settings like audio, control/key bindings and graphics. I promise to focus more on graphics soon but our small team require us to do more generalist tasks.
Until next time,
Kimmo K.
You can also find me in the following places too:
UE Marketplace Artstation Twitter Facebook Youtube