Recreating the Overwatch Hero Select UI with React.js
Project Inspiration
While I was waiting for a match one day, I decided to admire the game’s hero selection UI. It’s quirky character dances and effects kept my eyes glued to the screen. It was one of those long queues that I even had time to inspect the elements carefully. Now that I’m out of school and have more time for personal projects, this could be a great opportunity to level up my UI and UX skills, and please my Overwatch obsession.
Why React? ⚛️
A Blizzard game wouldn’t be a Blizzard game without it’s detailed UI’s and user experiences. Overwatch’s Hero Select UI has quite a bit of components and can be intimidating to replicate. React definitely simplified the planning side of things since components are a very fundamental part of it.
Original hero selection UI. Courtesy of Blizzard Entertainment.
Each piece of the UI is treated like widgets and modules. When you think of a user interface you want to build (with React), it’s best to think of it in terms of the smallest possible components that you can define.
These components include code which defines how DOM elements are created and how users can interact with them. Components can be defined purely in JavaScript or they can be defined in a superset (or extended variation) of JavaScript called JSX. This project was built with creat-react-app which includes tools to convert ES6 code into pure JavaScript during the production build process.
UI Components
I’ve broken up the Hero Select UI into 5 components:
- Game Info: The top of the screen where the player sees the map name, game mode, and the name of the hero.
- Hero Selections: The heroes that all six players have selected for battle.
Original hero selections
Replicated hero selections (no real usernames were used)
3. Heroes: the linear grid of Heroes categorized by class. PNG assets provided by Blizzard Entertainment were used.
Original grid of Heroes
Replicated grid of Heroes
Close ups of original grid of Support Heroes, and replicated grid of Support Heroes
4. Hero Videos: the background screen displaying the hero intro once the player selects his or her hero
5. Select Button: The button on the bottom of the screen. It has no functionality just yet, but it’s there to show how much I leveled up my UI skills
I used “Big Noodle Too” provided by Blizzard for the UI font. Once I divided the main UI into their own separate components, I could easily define constants and properties that made up each of the five major UI components.
Code Snippets
The main app consolidates all of these components. Here’s what the main code looks like using the five main components:
Main code consolidating all React components
When the user visits the site, it selects Tracer by default (She’s one of my favs). Another fundamental part of React is its state management, meaning that it keeps track of the last interaction from the user. We then have a function changing the current state of the Hero to whomever the user selects. render() creates the UI with the hero intro videos in the background, and the rest of the components in the container.
Why Glamorous? 💄
Glamorous is a godsend (thank you Kent). It lets one style React components right in the React code. It’s a great way to consolidate your code in an elegant fashion. No more switching back and fourth between css and js files. This is an amazing tool for the laz…I mean efficient programmer 💅
Creating Glamorous Components
I defined styles for each component right in the React file thanks to Glamorous. Here’s a snippet of the Select Button Code:
There are two components for the button: The select div, and the button to fill the div. These styles and their changes will carry out through the code and build.
While there are five main components to the UI, each component needed to be broken up into even smaller pieces for easier styling as seen in the code above— I’ll use the Game Info component for a more complex example. the Game Info component was broken up into three different pieces: game type, map, and character. Going off of the original UI, it shows in the upper that the game is in Defense mode, the map name is Route 66, and the chosen hero Pharah.
Parts making up the Game Info component
Parts making up the Game Info components in the replica
The gist below demonstrates how each part of the Game info was made and stylized.
Component styles for Game Info
Glamorous made testing and debugging process easier while deploying the developer version on React’s default localhost server. I was able to update both the functionality and styles while staying in the same file and automatically deploy the app with its new changes. This resulted in a very minimalistic css file with only 4 little lines of code:
Takeaways
Overall this was one of my favorite projects as I leveled up my UI skills tremendously. I learned about the parts to one of my favorite games and became familiar with a new styling framework. I’m looking forward to applying these to future UI projects (Hopefully another replica of a game UI). I want to keep working on this until I can get it as close to the original UI as possible, such as adding hero intros for all of the new heroes, adding hero category icons, an info icon for the chosen heroes, etc.
Educational Benefits
Video games, despite popular belief, have it’s educational benefits, and I believe this could be a useful framework for students, especially women and girls aspiring to be designers or developers in the gaming industry. Overwatch is about as popular with female gamers as males.
According to a recent study, women and girls make up 16% of the player base in Overwatch. 16% percent may not seem like a lot, but for a game as popular as Overwatch, that means millions of extra players, compared to sausage-centric franchises like Call of Duty or Battlefield. And dollars: Since Overwatch has sold over 30 million copies, the game’s female user base is about 5 million — who’ve given Blizzard roughly $250 million.
Organizations like Any Key, Girls Make Games, Black Girls Code, Girls Who Code, or any other organizations found here could take advantage of this growth, and apply similar curriculums for women and girls who aspire to be video game designers and developers. While most of these organizations cater to girls 18 and under, dissecting and replicating UI’s and UX’s of popular video games for players of all ages can boost the self confidence of women of all ages who may have fallen victim to ageism on top of sexism. This can also lead to women contributing more to the video game industry.
I hope this article compels you you to level up your UI skills and learn about how your favorite video games are made!