What I found curating an Awesome Overwatch collection
The Motivation
I’m a big fan of Overwatch, for the competition, the lore, and the top-class design. I’m also a big fan of programming and development. From the web, to games, to apps, and everything in-between.
As a developer, I value the open-source community a lot. I have a lot of faith in it and love for it, but I also recognize that it isn’t completely self-sustaining. Traditionally, Blizzard has been weary of mods and the impact this outside developer community may have on their games, for good reason. This approach seems to have been applied to Overwatch’s development as well, as community tools and extensions seem to be on the team’s back-burner.
As a game developer I understand their position, I’m familiar with the Pandora’s Box that is opening up software to the community. At the same time though, I’m itching to apply my own ideas and creativity to this beloved game.
Overwatch has a worldwide playerbase of over 35 million people, so I knew I couldn’t be the only developer with creativity to share. With that goal of “project visibility”, I set out to create a list of awesome Overwatch community creations.
The Search
I dove through every page of Github, Codepen, and the Chrome Web Store search to find the largest pool of tools, projects, experiments, and demos relating to Overwatch. I avoided Reddit, because the Reddit community already has its own way of cataloging and curating their guides, map callout images, and the like. I also avoided fanart, as there are too many amazing artists to document. If you’re looking for artists, there’s all kinds of talented fans all over Twitter, ArtStation, and DeviantArt. Many of whom are excited to do commissioned pieces for reasonable prices.
At any rate, there are a lot of resources, guides, tribute pages, and sites dedicated to Overwatch all over the internet already. There’s not much point in curating everything you can find, because most services already have a way for the best content to float to the top. Sites like Reddit, Youtube, Twitch, etc, already curate and organize their content in some form.
In contrast, the Github community has been manually doing this for years using “awesome-” lists. Promoting the visibility of the projects that are valuable but won’t necessarily bubble up to popularity. At the time of this writing, there is yet to be a comprehensive “awesome-overwatch” list.
That is what I set out to create.
“The projects in an awesome list can’t just be any old project”
As I searched, I was surprised to find so many amazing projects that have few to 0 stars, forks, or likes. Projects that I know the larger community would love to get their hands on. Projects like those that communities in Discord, Twitch, and Twitter have formed entire businesses and services around. Services like StreamLabs and Rainway started with open source and proved there was a market for their use case. In this same way, there is a lot of room for the Overwatch community to grow.
The rest of this post is a summary of what you’ll find when you go searching for Overwatch community projects. There are many gems out there, but as you’d guess, there was also a lot to sift through. As the awesome-manifesto dictates, the projects in an awesome list can’t just be any old project. With that in mind, I made sure to check that each project I included was a unique or well-rounded version of what it was claiming to be.
I mention some of the best below, but I couldn’t include every great one. Check out the full list to find out what I mean.
Github
Github was by far the largest and most varied source of projects. As one would expect, there are many recreation of different UI elements found in the Overwatch interface. There’s also a variety of tools to calculate DPI, automatically pick heroes based on composition, extract game files, track gameplay stats, and the list goes on (literally). Even ignoring those topics, there are still some gems I have to share.
DVa JS
D.VaJS is a surprisingly popular Javascript framework I’ve never heard of. It seems to be a regular part of the Chinese web development toolkit. Its based on Redux and react-router, and inspired by Elm, so I’d probably use it if I could read the docs.
There is also a framework called roadhog, which is an evolution of create-react-app.
Garry’s Mod hero abilities
@javabird25 has developed some Garry’s Mod abilities sets that match some of the heroes in Overwatch. Meaning, you can import the ability sets into Garry’s Mod and play as that hero!
The sets included in this list are for Tracer and Genji, but there’s also a base set that is open-source which allows anyone to make other character sets.
McCree Hammershot
@dmadison turned a real life Nerf revolver into a custom controller for McCree in-game. As if McCree headshots weren’t satisfying enough.
All the project files are in the repo, and the build instructions are on PartsNotIncluded.
Underwatch
A super cute pixel demake of Overwatch, that plays like TowerFall. Completely underplayed. How has the streaming community not exploded over this already?
Machine Learning
This one gets me excited. As I mentioned above, Blizzard has given the outside community no legitimate way of manipulating or extending Overwatch. Still, there’s a lot we can learn about and explore within the game of Overwatch that the community has yet to even scratch.
Luckily, a few devs have started applying AI and Machine Learning (ML) principles to Overwatch in their spare time.
C0derwatch made a splash on Reddit with a post on their application of machine learning to SR and competitive play history.
@sshh12 is using Python and TensorFlow to create models for predicting SR in-game using player statistics.
@gaaliciA1990 has started a project to analyze the correlation between “maining” multiple heros and ranking higher (could one day show when one-tricking in a meta is too easy/prevalent).
APIs and Bots
To their credit, Blizzard does have APIs available for the game data from most of their popular games. That’s how most player stat sites are able to get their data.
Thanks to the developer community though, there’s now a multitude of unofficial ways to interact with Overwatch API data, all in a variety of formats and platforms like Node.js, GraphQL, Go, JSON, and REST. There are even a few projects that focus on other data sources like the Overwatch League.
Beyond APIs, there’s a few bots for Discord and Twitter that do silly (and sometimes helpful) Overwatch related tasks.
Surprisingly, I didn’t come across any repos for an aim-bot. Granted, I wasn’t looking for them, but I wasn’t looking for the Dancing Mercy Twitter bot either.
Chrome Extensions
Desktop gaming and the browser have always had a clunky relationship. Services are starting to prove that the browser has its place in a gaming setup, but there’s still a lot that can be done to extend the browser experience itself. Most of the Overwatch related content in the Chrome Web Store is wallpaper and theme extensions. The list below has some of the few extensions that really enhance the browsing experience for an Overwatch fan.
I Need Healing
Classic “I need healing” button. Simple, funny, timeless. Github README is hilarious too. Very under-starred.
Sounds of Github
Plays the sounds of iconic gaming characters when you emote on Github (Super Mario, Legend of Zelda, Warcraft, Overwatch).
The creator, @cheshire137, has done several other awesome projects on the list as well.
Overwatch League Reminders and Spoiler Toggle
Most desktop viewers would appreciate either of these at one time or another. There’s a Overwatch Contenders Reminder extension available too.
Codepen
Codepen is another large source for Overwatch developer content. As you might imagine, there were a number of recreations of the loaders and progress bars throughout the game. There were also a number of attempts at recreating different menus from the interface.
Because there is a lot of subtlety to Overwatch’s interface design, most of the demos feel “off” in one way or another. The ones I included in the list and the ones below, capture that same unique design “slant”, sparkle, and attention to detail that’s present in Overwatch’s design.
Logo in pure CSS
@SkyHolder recreated the Overwatch Logo in CSS and HTML with just 3 divs. And @stix recreated it with just 2 divs, and some gradient magic.
Snow effect in CSS
@mmolad has done a couple variations of the 3D snow effects found in Overwatch. Both from the Winter Wonderland event and from the Ecopoint: Antarctica map. No WebGL, just CSS.
Pixel sprays with CSS box-shadow
Another one that blows me away. A few years back, the technique of drawing pixel art in CSS box-shadows was debuted. This technique does not require the Canvas element or WebGL, and a lot can be done using a single div.
I’ve been excited about it ever since, and to me, its proof that the web is a valid platform for gaming. This niche in the HTML5 community has been steadily growing and this project should be a milestone in popularizing CSS pixel art.
Using this technique, @rspilhaus recreated some of the pixel sprays from Overwatch. 1:1 scale, no images, each using only a single HTML element. If you dont get why that’s beautiful, I can’t explain it to you.
Other Sources
3D Models
This is another one that excites me. There are scaled 3D recreations of several of the Overwatch maps available for download. These are part of a Reddit guide, so I didn’t want to harp on them, but the models themselves are open for download and use.
This would be a great opportunity for players to do offline training or strategy planning. And I’m sure there’s a developer or artist out there who could do some amazing things with those level models, never mind the things that an AI could teach us about the level design and layout.
Check out Sketchfab and 3dwarehouse for other top-notch 3D OW pieces.
Shameless Plug
Aside from curating the entire list, I’m also bubbling to share several of my own Overwatch web development projects. They can be found on my Github @likethemammal.
React Components
I’ve recreated 4 different elements of Overwatch’s user interface design using React and CSS. These are easily usable as Components and perfect for importing into your own projects.
The elements are modeled after the table, settings-select, settings-stepper, and side-nav.
My favorite is the side-navigation, modeled after the official Overwatch website navigation, and a great solution for both desktop and mobile navigation.
D.Va Heart Emote
Using WebGL and A-Frame, I recreating the animated heart from D.Va’s Heartbreaker emote. It cycles through several different flyin/flyout animations.
Spent a lot of time getting the animation timing down. Still makes me smile every time :)
The Take-home
The big thing I learned from this is that there’s a lot of developers out there itching to make Overwatch a game, and a universe, the whole world can enjoy.
I’m on board. The world could always use more creativity..
