For a turn-based tactical RPG such as this, the game is controlled primarily by clicking on elements of the UI. As such, I would need to create at least a prototype UI in order to implement the rest of the combat system. Usually, I would just make basic UI elements to demonstrate the functionality of each feature as I implement them and then replace the UI with a more polished, final version later on. However, since the UI is so core to the experience in a game like this, I have decided to build my UI in full now and then add functionality and make changes as I progress. It is essential that the UI provides the player with easy access to everything they need without overwhelming them or cluttering up the screen. Because of this, I have taken the time to carefully plan out my UI before implementing anything.
Here is my current design for my in-combat UI:
As you can see, art is not my strong suit. Despite its lack of flashy presentation however, I do believe that this design clearly illustrates my plan for the UI. During implementation, I will, of course, style the UI to be in-keeping with the game's themes and acquire additional art assets to support this. I will be drawing inspiration from various other games with mechanics and themes.
The UI that best demonstrates the style I am looking for is that of Diablo 4, which is due to be released later this year. The character's abilities are represented as clickable icons at the bottom of the screen which display a tooltip with a full explanation of them when hovered over with the mouse. This reduces clutter and maximises visual impact by replacing text with thematic icons. The resource orbs either side of the ability bar are a nice thematic touch but they do not clearly display the exact value they are representing and so I will opt for traditional bars instead of these. I may use a similar technique for my Impulse Meter if I can find appropriate art assets however. This will work well as it is not essential that the player knows each character's exact impulse level at all times, but it is key that the player's attention is drawn to the Impulse Meter by its stylish presentation as it is the core, stand out mechanic of the game. As shown in my design, I will be adding health bars and names above the heads of the characters, similarly to Diablo. This is a great technique as it is unobtrusive but clearly tells the player the position and health of every character in the scene, allowing them to make quick, informed decisions. Although I didn't mention it in my initial ideation post, due to it differing mechanically from what I am creating, Diablo, especially the upcoming fourth game, is a great example of the kind of setting and presentation I aim to produce. The stylistic elements of the UI such as the dark colour scheme and gothic art, work well to display the game's themes, something I will attempt to replicate.
League of Legends has a similar UI although it is much more generic. The ability icons, stats to the left, resource bars and character portrait are all very close to what I envision for my game. I will not have an inventory (to the right of the abilities), minimap (bottom right), selected unit information (top left), or game statistics (top right) and so my UI will be less cluttered than this. The blue rings seen in this image are range indicators, displaying how far away the player can target their ability. I will aim to use a similar system and so will draw inspiration from LoL for this.
Divinity: Original Sin 2 is mechanically quite similar to my game and so understandably has a UI which is quite fitting. The ability bar shown at the bottom is nice but it doesn't display much information about the selected character. There is also quite a bit of wasted space on screen due to them repeatedly showing the same information. For example, the currently selected character has their health displayed just above the ability bar, and in the list of player characters to the left and in the turn order at the top of the screen. This is something I will be mindful of, and try to avoid when creating my UI. On the brighter side, this game features a clear turn order UI element at the top of the screen, which I will learn from, although I intend to place my turn order on the left of the screen. I plan to do this so that we don't have just the top and bottom of the screen obstructed by UI as it creates a narrow field of view.
The UI featured in Darkest Dungeon 2 is another good example of the type of layout I am going for and it is also thematically similar to my game. Darkest Dungeon is a very hardcore game, renowned for its difficulty and as such it displays large amounts of in-depth information to its player. I do not intend for my game to be nearly as complex as this and so I will have far fewer statistic cluttering the screen.
The original Darkest Dungeon had a slightly worse UI. The ability bar is off to the left rather than at the bottom-centre of the screen, drawing attention away from it despite the fact that it is the most important element. The character's inventory takes up the vast majority of the UI even though there are few items that can be used in combat. All of this means that despite it looking cool, it is not an especially efficient design.
Tyranny has an especially old-school style UI. This works in the game's favour as it evokes nostalgia. I am not aiming to do this and so will be avoiding certain things shown here. Most importantly, rather than showing information clearly with a few, large buttons in the bottom-centre of the screen, they have opted to cram in lots of small buttons in the screen's corner, many of which feature drop-down menus containing even more buttons. Character names and health are also not clearly displayed above them, meaning you would have to click on them to get more detail. The combat log to the right is a nice touch but it takes up as much space the that character panel to the left and does not provide very much functionality. The key issue I have with this UI and Darkest Dungeon's is the lack of separating between the combat and overworld portions of the game. This means that features needed in the overworld for navigation, dialogue and character progression take up large portions of the screen space even though they are not especially useful in combat. For my game I will make sure to create separate UI layouts for the overworld and combat portions of the game, ensuring that the screen is never cluttered with superfluous information from a different portion of the game.
Comments