Powerful interactive maps for games. Provides points, routes, and video/image guides. With a peak of over 30,000 monthly users.
The Problem
Finding your way around games is simple, though not always self-explanatory. Plenty of games, such as Escape from Tarkov, and more recently Arena Breakout: Infinite, feature vast maps with little-to-no in-game mapping or points on them if there are any. This map bridges the gap, providing as much information as the user needs.
Everything from small item locations, to quest guides and more, for multiple games is now covered, and expanding!
Features
- Fast Next.js website, with Leaflet to display the maps. Many custom modifications were made.
- Custom Python code to slice giant areas into smaller tiles at varying sizes for faster loading, following OSGeo Tile Map Service specification.
- Lightly watermarked maps, using CuPy (CUDA) to add a tiled watermark image at varying opacities, based on the relative brightness of pixels below it. This helps it not be overly obvious, and even harder to remove.
- High-quality maps: AI upscaled, and hand-created from in-game assets. Read more under Problems.
- CI/CD pipelines using Jenkins and custom Dockerfiles to spin up new versions of the website with zero-downtime deployments.
- Hand-made simple icons for in-game entities
- Detailed floor plans (SVG format) to explain the inside of areas, transitions between floors, and more
- Simple breakdowns, linked lines, and video explanations for complex tasks and quests
- Powerful suggestion system (Ctrl+Click) allowing user suggestions for new points, and changes to existing ones. Suggestions are sent with Discord webhooks.
Difficulties
The maps. While you would think this is the simple part, it’s not. Getting high-quality maps from a game is not easy. Reaching out to developers or community teams ended in empty promises, except for Gray Zone Warfare, which were happy to provide - A massive shoutout to them and their community team!
Ripping maps from the game assets and files would likely break a few laws, so all I was left with was stitching together hundreds of screenshots of different areas of the in-game maps zoomed-in. This could either be done by hand in a program like Photoshop or Affinity Photo, which I tried… It becomes a Sisyphean task.
The next best solution is letting software stitch together images. The issue is: There wasn’t anything that did it properly. I have screenshots of a flat surface scrolling across the XY axis; however, panorama stitching tools are usually based around a camera rotating, and have distortion removing settings - which flat screenshots did not need.
The only tool I was able to find is a discontinued tool from Microsoft, the Image Composite Editor. You can read about the 2008 project, but you can not download it anywhere but Archive.org. This ancient tool still has ads for the Windows Phone, Torque, and Skype’s (then) new Translator preview.
While this tool is ancient, it does apply little-to-no distortion and is almost perfect for most use cases for this project. While I could invest time into a dedicated Python project, this surpassed my expectations.
