Behind the Scenes: Where in Warcraft

Where in Warcraft is a location-guessing game based on the popular geoguessr that shows players a 360 panorama of a location from World of Warcraft and has them pin-point that location on a map. This weekend saw the launch of the Classic Edition of the game, which felt like the perfect time to give an insight look at how we created the game.

Creating the Panoramas

The first step in gathering all of the panoramas used was to delegate the workload. For both versions of the game, all of the screenshots used were sourced by either myself or Falerian - and it takes 5 screenshots for every location!

For the retail version, we split up the continents between us and worked through them over the course of a week; however for the Classic edition, Falerian actually sourced 90% of the screenshots by themselves.

The locations used for each zone were scouted and recorded in a spreadsheet which we used to keep track of everything. Once arriving at a location, 5 screenshots were taken with a 72 degree turn between each - we used macros specifically written for this purpose.

Since the in-game screenshot functionality produces screenshots in a compressed JPEG format, we opted not to use it. Instead, we used ShareX to both speed up taking/organizing of the screenshots as well as produce lossless PNG. Having crystal-clear raw screenshots to work with was important in making the panoramas look seamless.

Once we had all the screenshots for a single zone, they'd be zipped up and sent over to me. Each zone was around about 200-300MB in raw screenshots, which quickly adds up.

When it comes to turning the screenshots into actual panoramas, there are a lot of steps involved. To help reduce the amount of hours spent on this step, I wrote a tonne of scripts (using NodeJS) to automate a pipeline. It went something like this:

1. Raw screenshots are placed into an 'unorganized' folder along with a text file (CSV) containing the locations for that zone.
2. A 'check-failure' script is run to make sure there are 5 screenshots per entry, and all of them are spelled correctly.
3. A 'sort' script is run which takes all of the entries, assigns them a unique ID (an MD5 hash of the entry name) and separates them into unique directories. This ID, along with the zone name, location name and map co-ordinates are mapped in a JSON file for the site.

At this point, a panorama that start as:
unorganized/Ruins of Eldarath (1).png
unorganized/Ruins of Eldarath (2).png
unorganized/Ruins of Eldarath (3).png  
unorganized/Ruins of Eldarath (4).png  
unorganized/Ruins of Eldarath (5).png  

Has been turned into:
unmerged/90fabf71387ac87a892a7cc9a995f2cf/0.png
unmerged/90fabf71387ac87a892a7cc9a995f2cf/1.png
unmerged/90fabf71387ac87a892a7cc9a995f2cf/2.png
unmerged/90fabf71387ac87a892a7cc9a995f2cf/3.png
unmerged/90fabf71387ac87a892a7cc9a995f2cf/4.png

Now for every panorama, the 5 images need to be loaded into Photoshop and run through the Photomerge tool. This produces something similar to the following output:

As you can imagine, doing this for every single one of the locations would be a lot of work. Once again, we used a script to automate this entire process - which is why they were split up into separate directories in that earlier step. This step could sometimes take close to an hour per zone, but once it was done another directory called 'merged' now contained all of the compiled panoramas.

On the odd occasion (perhaps 10% of all panoramas) they would come out completely distorted or ruined. This was generally caused by some of the screenshots being too similar. Unless the location was vital, we would simply delete the panorama and move on.

At this point, some more scripts were run:

1. A 'check-merge' script is run to check which panoramas we deleted due to problems, and remove those from the JSON output made earlier ensuring they don't appear on the site.
2. A 'tile' script is run. This script takes each of the curved spherical panoramas and automatically crops them down to size. Additionally, this script also outputs JPEG compressed images fit for the web.

These cropped panoramas are now ready to go live. They're uploaded to the website along with the generated JSON data, and that's a job well done!

There are 605 locations available on the retail Where in Warcraft, and an additional 471 on the Classic Edition. With a 10% failure rate, that's almost 6,000 screenshots taken in total.

Creating the Map

The first step when creating the map was to get the raw minimap files for each continent. Using my own wow.export, this was as simple as selecting them all in the texture browser and exporting them as PNG.

To turn all of these tiles into a single map, I once again wrote a script. This one was pretty simple - it figured out the minimum and maximum edges of the map using the _XX_YY co-ordinates in the tiles, and then stitched them all together in order.

For the retail version, the map didn't need that much touch-up at all, although I still did make some tweaks such as including Eversong Woods / Ghostlands on the top of Eastern Kingdoms. Classic on the other hand, well you can see for yourself..

At this point there was no script to be written. Instead, it just took a couple of hours on Photoshop going around and cleaning up all of the mess. We wanted to stay true to the Classic map as much as possible, but in some areas where we felt it best, we brought in terrain from the Retail version to clean up zone borders which would otherwise just be blank land-mass.

The image of Eastern Kingdoms alone is 189MB. There's absolutely no way we can just throw this up on the website and call it a day. Additionally, all of the other continents needed to be included - unfortunately it was at this point which Photoshop refused to accept the insane file-sizes we were asking it to work with.

Instead of trying to stitch all of the continents together in Photoshop, I instead blocked out where the continents needed to go visually (in a simple HTML/CSS file) and stored those co-ordinates in a file.

This meant I could move everything about freely without having the actual continent images loaded onto the screen. Now comes in one the biggest scripts I wrote for this entire project - the map maker.

The map maker script takes the continent alignments and creates a virtual map. Additionally, it loads all of the actual continent images into memory (which alone takes around 30-40 seconds just to load them).

If you load up Where in Warcraft, you'll notice that there are 7 (8 in retail) zoom levels. Each of these 'levels' of zoom is processed separately. A zoom level is split up into tiles, and for each tile the map maker checks which continents (using the virtual map) intersect onto that tile. The relevant parts of that continent are then scaled down and applied to the tile.

The result of this is that through each zoom level, the tiles are correctly generated as if part of one massive image, despite never having actually stitched it together.

The above process was repeated, cascading down for every level. The end result was a 1:1 quality with the in-game minimap. Not only is this process of generating the map much easier than attempting to work with a 5GB+ single image, it also works as the perfect optimization for the game itself.

If a player is fully zoomed out on the map, there is no point having 5GB+ of tiles on the screen, that would quickly crash your browser. Instead, it simply shows the single tile generated for zoom level 0 - a neat little 256px image. Each time you zoom in, it loads the images needed for the next level. The more you zoom in, the more of the map is now outside your viewport (off the screen). These tiles simply don't need to be loaded - it only loads what you can see, which is why when you pan rapidly across the map you might see the tiles loading in as your browser downloads them.

Closing Notes

Even with all of the optimizations, the site still runs an incredible amount of bandwidth. The overall project is well over 30,000 files in size. The launch of the Classic Edition saw my server bandwidth peaking at roughly 1TB a day over 20,000,000 individual web requests - thank the heavens for caching.

Are you interested in the source code behind the game? It's open-source and available on GitHub, go take a look!