My role: Lead Developer
What I worked/work on: Map Generation, mini game systems, text-based dialogue system (AVI Chat)
Duration: January 2017 – September 2017
Team size: 3
Technologies and libraries used:
- Unity Engine
- Mapzen
- Mapbox for Unity
What is Hacktion?
Hacktion is a GPS based, educational, pervasive mixed reality based game funded by the National Science Foundation and made under Drexel’s Entrepreneurial Game Studio. Players learn the principles of cybersecurity as they engage in civic physical play. Similar to Niantic’s Pokemon Go, Hacktion requires players to walk around in their cities, locating “nodes” that can be hacked. Once in range to a hackable node, players can initiate the hack.
Each hack is based on a mini-game. Upon successful completion of the mini-game, the hack succeeds. During each hack, players are given vital information about the cybersecurity concept in question under the hack.
Things I worked on
Map Generation
When I joined the project, it was using Mapzen for map generation. Mapzen had announced at the same time that it was shutting down its services, and my first task was to take the existing map generation systems and translate that to a new map generation library: Mapbox. As someone without any prior map-generation experience, this meant learning both Mapzen and Mapbox – the former to understand how the system was implemented in Hacktion, and the latter to actually translate the existing implementation into Mapbox.
This is what the map looked like when I joined the project and it used Mapzen ->
Right when I started working on Hacktion, I noticed a few issues with the map.
- There were 3D buildings in the map, and while aesthetically it looked cool when you zoomed in and out on the map, it made things confusing. Sometimes, as in this image, the player might be inside a building and thus not be visible in game.
- Each node in the map had a set of concentric rings around it. These outermost ring showed the range in which the player can hack the node. The rings inside the outermost ring served no purpose aside from aesthetics.
- Each set of node and its concentric rings around it were coloured either blue or red. A red set means the player didn’t have the hackware required to hack a node, and must purchase the hackware before initiating the hack. A blue set meant the player can initiate the hack on the node if they are within its range.
The team sat down together and after a discussion and multiple iterations, decided to get rid of the 3D buildings for simplicity. I brought up the idea of getting rid of the range circles from around each node, and instead just putting it around the player, since each node has the same range. The range is now only shown by a single circle to avoid any confusion.
Also, with Mapzen, each node was placed by hand at a predefined location. This was extremely cumbersome and limiting, and as such, with Mapzen, the game only worked in the University City area of Philadelphia. With Mapbox, I updated this to use Mapbox’s Points of Interest feature, which automatically queries the Mapbox servers for geographical locations of interest and places nodes in those locations. As such, the new version of Hacktion should be playable outside of University City.
A lot of other clutter was also removed from the UI since we found through playtesting that it was unnecessary.
AVI Chat
I worked on programming AVI chat, the in game chat-like system, where the leader of the player’s chosen faction communicates with the player. The player sometimes gets the option to respond to this chat with one of three different emojis. The chat serves the purpose of introducing the game to the player, teaching the player how to play the mini-games, and also to teach the player about the cybersecurity principles related to each hack.
This is an entirely Unity UI based system that took several weeks to implement and optimize. It was especially important to optimize this system because UI in Unity can tend to affect performance massively, especially on mobile devices.
Each new “message” from the faction leader takes a specific amount of time to be received, and this time is decided by the length of the message. An S is under play – really short messages take a fraction of a second to be received, slightly longer messages take longer times, but very long messages tend to all take about 2-3 seconds. The player has the choice to simply tap on the screen to avoid waiting for each message, though.
UI
Mini-games
I worked on implementing two mini-games into hacktion.
Malware Mutate
In this mini-game, the player is given a grid with a defined “path”. The path starts with a node with a specific symbol and color. The player must fill the entire path to mutate the malware and finish the hack. To do so, the player must fill each node with a symbol that shares either the design or colour of its previous node.
I worked on a procedural path generation system for this mini-game. Each node itself is considered a new path, and the starting node is placed in the top row at random. From this point, the path is recursively filled until a specific number of nodes are placed on the path. The recursive filling algorithm can branch out the path into a maximum of 2 new branches. Here are a few examples:
Sort Phish
This is a mini-game where the player must sort messages into two different piles: phishing scams and genuine emails. To do this, the player is given a stack of 3 emails at a time, and must use a Tinder-like system to swipe each email into its specific category.
Implementing this system was a lot of fun.
Deploying to iOS and Android for playtesting
I was responsible for making builds of the game for both iOS and Hacktion, and then use XCode and Testflight, and Google Play Console to roll out the game to people for playtesting.