Phantom Ink Online
Projects | | Links: Source Code
Overview
This was the first time that I got experience in direct game development. The prototype was contracted by Resonym because Phantom Ink is a party word game that is best played with multiple people in the same room. But since the Covid-19 pandemic was ongoing during it’s testing phase they were having problems with testing the game due to a couple of primary factors:
- All “Mediums” on the same team share the same hand of cards.
- Each answer from the team’s “Spirit” must show up letter-by-letter as the “Spirit” is typing the answer, otherwise the “Mediums” will not be able to guess the word once they think they know it with only part of it being there.
These were the factors that made them want to get something custom, so they reached out to me to see if it was even possible to do and if I’d be interested in taking on the project. Since it seemed interesting and I enjoy board games, I decided to take it on.
Since they wanted to be able to iterate on rules quickly and without having to get me to update the site, we decided that just providing the foundational gameplay mechanics and card handling were all that was going to be required for the project.
Development
The technologies I used to make this application are:
Some neat things to note about the site are:
- The two decks of cards that are curated by the Resonym staff are stored within a Google Sheets document in the cloud, and each time a new game is created the cards are pulled from Google and parsed into the supported format in the code. The server also supports using a normal CSV file on the server itself. (Source Code Reference)
- If you have more than one “Medium” on a team, the cards in their hand will be numbered so that they can talk about them out loud without the other team getting any information about the questions.
- The player’s text boxes swap sides depending on what team they’re on to make it so that the person’s team’s boxes are always on the right hand side of the screen, this involves flipping the background graphic to make it have the correct icons in the corner or the image.
- The “Delete Game” button changes to a “Leave Game” button for the players who did not create the game lobby.
- When joining a lobby from the homepage, if you got a link from the “Copy Game Link” button in the lobby, you won’t need to enter the 6-digit gamecode and you’ll only need to enter your name.
- The system supports re-joining games in progress if you use the same name to help people with less stable internet still be able to functionally play.
Image Gallery
Even though this site was contracted to be made by Resonym, all copyright for the code remains with Oliver Akins. The copyright of the graphics for the game remain with Resonym. I have a special license to use the graphics for the purpose of showing off the website. These graphics are not usable by anyone else.
The website’s homepage, this is what users first see when they open the website. The “Create Game” button allows a user to start a brand new lobby for others to join in with. The “Join Game” button allows users to join a lobby that is already made using the 6-digit game code.
This is the game lobby that houses the players while they are deciding on teams and waiting for other players to join as well. When players do not have a team or role selected, they appear in the middle section of the lobby.
This is the game lobby once players have selected teams, their name moves from center list into the respective team list in the role that they have chosen. If the role they are attempting to join does not permit more than 1 player in it (like the “Spirit” roles), then they will receive an error and stay in whatever role they currently are.
The first step in every game of Phantom Ink is for the object that the Mediums are trying to guess to be selected, which is done by the Spirits. This is what the Spirit players see when they are choosing an object from the 6 available.
This is what the game board looks like to Mediums when they do not have any other Mediums on their team. Take note of the cards not having any labels beyond the question and the button to select the card.
This is how the game board looks to all the Mediums on a team when there are two or more total Mediums on the team. The numbers are the same for every Medium so that they can communicate vocally without giving away extra information.
