What I found curating an Awesome Overwatch collection

Image by @rhealism

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.

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.

Sindre Sorhus is the creator of the original awesome list

“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.

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.

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!

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.

Underwatch

A super cute pixel demake of Overwatch, that plays like TowerFall. Completely underplayed. How has the streaming community not exploded over this already?

Go play Underwatch. It deserves the love.

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.

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.

Dancing Mercy bot by @anco1011

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).

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.

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.

“Tracer’s Gun” by Wes McDermott (Sketchfab)

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.

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.

This one models the Select (dropdown) element from the Settings Menu

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.

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.

UI Developer and VFX artist | Sites, apps, games, and experiments | Prev at Grooveshark & Plex | #creativecoding #gamedev #overwatch