A character select screen inspired by the hero selection in Overwatch 2. Built in Unreal Engine 5.2, UMG, and Common UI.
UI_progress.mov
Games such as Outriders, Fortnite: Save the World, and the Gears of War series (all developed by People Can Fly) feature first- and third- person shooting at the core of their gameplay.
As games within the shooter genre, they have similar UI and UX design requirements. Game UI Database provides numerous screenshots as reference.
One of those common UX flows is character selection. See the character select UI from Gears 5:
Or the hero select UI from Overwatch 2:
In both designs, the player's goal is to select their desired character before entering a multiplayer game mode.
I wanted to practice my UI engineering skills in Unreal, so I decided to create a data-driven, hero selection screen inspired by the designs above.
This project contains the full source code of such a screen, and you can read more about the technical details below.
In no particular order, as I'll be iterating heavily on the UI.
- Profiling, perf optimization
- Customizable skins
- Data-driven character animations
- Ability to rotate the character
- Character medallions, with selected, hovered, and pending states
- Data-driven character tiles
- Ability to select a tile to load the appropriate character within gameplay
- Hero details
- Lobby syncing and replication
- UI sounds
- Mouse-keyboard and controller support
- V2: Hero details
- V2: Change skin
- Throbber widget for medallion
- VFX
Jason Tu · jasont.co