Lost City

Summary

Role: Programmer
Duration: 48 hours
Tools & Technologies: Unreal, Supabase, Git
Concepts & Techniques: Asynchronous Multiplayer, Shaders & Graphics
Team Size: 4
Awards: 2nd place at FIEA Collegiate Game Jam

A cooperative multiplayer map-making game. Players must draw maps to help their partner find a hidden treasure chest in the flooded city of Atlantis. Players must effectively use structures, terrain, and their compass to make maps and find the treasure.

Sections

Overview

Lost City is an asynchronous, cooperative multiplayer game. The game has two phases. In the first phase, players first spawn on top of a treasure chest in Atlantis before it floods. The player can easily see far into the distance and walk around freely. During this phase, players are able to draw on a map. Players must use nearby structures, unique terrain, and their compass to create a map that marks the treasure's location.

In the second phase, the players swap worlds, except the city becomes flooded with murky water, greatly reducing visibility. The players also swap drawn maps with their partner. Players start out in a boat for fast movement around the map, but must dive out of the boat to go deeper. Players must rely on their partner's map to find the treasure, since the player moves too slow underwater to exhaustively search within the time limit. Both players must find their treasure to achieve victory.

This game was made for the FIEA Collegiate Game Jam, a 44-hour hackathon hosted at the University of Central Florida's Florida Interactive Entertainment Academy. This project won the 2nd place in the Undergraduate division.

Networking

This project used Supabase's Realtime and Matchmaking services. This allows two game clients to connect to a shared "lobby" and broadcast arbitrary events with payload. I designed and implemented the following approach to ensure host and client synchronization.

The host needs to handle two scenarios: the case where the host finishes BEFORE the client payload is received, and the case where the host finishes AFTER the client payload is received. The host just waits and starts the game as soon as client data is received in the former case. In the latter case, the host caches the received client payload and starts the next round as soon as the host is done.

Map Drawing

One of the core features of Lost City is the ability to draw on a texture. The main shader is a fragment shader that takes in parameters like start position, end position, and thickness to draw a line. This shader is drawn every frame based on the mouse's last and current position to draw a line based on mouse movement.

The shader is drawn onto a render texture, which accumulates lines. This render texture then undergoes some addiitonal color mapping to allow for different ink color and the map image background before it reaches the screen.

Earlier designs used a point shader instead of a line shader. A point shader was much easier to implement, as it essentially just used the formula for a circle rather than the more complicated point projection used for the line. However, this had some issues. Moving the mouse quickly resulted in gaps in the lines, as there were not enough points to fill the distance covered by the mouse. The naive solution was to just draw more and more points, but this still didn't fix the issue for the fastest mouse movements and caused immense hitches.

The line shader was the best solution to this issue. Any mouse movement could be completely captured with just one draw call, no matter how fast the mouse is moving. This creates a smooth, consistent, and performant drawing experience.