UI tips for game updates


Creating UI can be difficult, as it doesn't fit with the workflow from the rest of the game. You spend all this time programming and creating design documents, but at the end of the day, the UI is the only way players can interact with your game. If you mess up there, it can leave a sour taste for the rest of your project.

I have been updating the UI in my game, and wanted to do a quick write-up for anyone going through the same thing. Here are three quick updates I made and tips on how you can accomplish them yourself.


Replace UI Sprites

This one is not a surprise, but standard UI packages look boring and need updates. 

Which button looks more interesting to you? This is a sprite that took only a few minutes to make, but it makes a significant difference. Obviously, this is a rough example, but it really made an impact when I started replacing sprites with cleaner, more stylish ones.


Drop Shadows

Drop shadows are a bit tricky to get right, but they can make a big impact when done well. Here is an example of with/without a shadow.

I think it goes a long way to making the UI feel weightier and more impactful. You'll have to play with the specific values yourself. More professional, minimalistic UI might have softer shadows, while more dramatic scenes might have even darker shadows. 

I'm considering softening the shadows in my project, but for now, I like the look of this.


Motion

I don't have an example to show for this one but play with motion and interactivity. 

Here's a quick tip to remember: EVERY interaction should have an effect.

Imagine the mouse cursor didn't exist. You still want the player to be able to identify what they are interacting with based on how your game reacts to their navigation and clicks. This is another case where you'll want to update the built-in packages. For Unity in particular, buttons already come with a color-shift effect, but this is pretty drab and not very noticeable; buttons just shift to a greyer color on mouseover.

I replaced these interactions with motion and scale shifting, among other things. There are a lot of examples on YouTube, and most larger games have these types of interactions, as well. In Fortnite, for example, navigating to a different game mode will highlight it in orange and play a shine effect. Some other games use particles, shaders, rotation, or lighting to accentuate interactions and make player activities more readable.


Those are some of the steps I've gone through so far! There are definitely some other things you want to focus on, like arranging elements in a logical way, creating readable UI, picking colors, and adding shaders to your UI elements, but I'm still working through those, so I'll cover them in a later post.

Hope these tips helped! Let me know if there are any specific topics you'd like me to cover, and I'll add them to the list for the next update.

Leave a comment

Log in with itch.io to leave a comment.