Recreating the Hero Select UI with React.js Overwatch 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 obsession. Overwatch Why React? ⚛️ A Blizzard game wouldn’t be a Blizzard game without it’s detailed UI’s and user experiences. ’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. Overwatch 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 which includes tools to convert ES6 code into pure JavaScript during the production build process. creat-react-app UI Components I’ve broken up the Hero Select UI into 5 components: : The top of the screen where the player sees the map name, game mode, and the name of the hero. Game Info : The heroes that all six players have selected for battle. Hero Selections Original hero selections Replicated hero selections (no real usernames were used) : the linear grid of Heroes categorized by class. PNG assets provided by Blizzard Entertainment were used. 3. Heroes Original grid of Heroes Replicated grid of Heroes Close ups of original grid of Support Heroes, and replicated grid of Support Heroes : the background screen displaying the hero intro once the player selects his or her hero 4. Hero Videos : 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 5. Select Button 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. creates the UI with the hero intro videos in the background, and the rest of the components in the container. render() Why Glamorous? 💄 is a godsend (thank you ). 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 and files. This is an amazing tool for the laz…I mean programmer 💅 Glamorous Kent css js efficient 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 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 minimalistic file with only 4 little lines of code: localhost very css Takeaways Overall this was one of my favorite projects as I leveled up my UI skills 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. tremendously. 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. is about as popular with female gamers as males. Overwatch According to a recent , women and girls make up 16% of the player base in . 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 has sold , the game’s female user base is about 5 million — who’ve given Blizzard roughly $250 million. study Overwatch Overwatch over 30 million copies Organizations like , , , , or any other organizations found 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. Any Key Girls Make Games Black Girls Code Girls Who Code here I hope this article compels you you to level up your UI skills and learn about how your favorite video games are made!
