Phone A Friend
* best viewed on a desktop or laptop computer.The Goal
To create a short game in p5.js using basic programming concepts based on a concept or event from my own life.
The Timeline
October-November 2022.
The Process
Conceptualisation, user research, narrative & storytelling, structuring, coding, visual design, interaction design, testing.
Conceptualisation
The concept of this game is based on one of my own experiences having moved to the US from India. Since India and the east coast - EST - have an almost 9:30 hour time difference, figuring out times to talk to my friends and family back in India is a math exercise sometimes. Our schedules, between my classes and assignments, their work, and both of our social and other plans rarely sync up.
Extrapolating from this experience, the aim of this game is to ‘call a friend’ in India. Both the player and the friend have different schedules, but there are windows of time that match up. The game is structured like a maze, and the player must avoid bumping into their schedule conflicts - including subways, classes, and meals (red) - while finding a way to reach a time when their friend in India is free (green). The goal is to navigate the maze of their day and find a phone to call their friend. The phones represent times where the friend in India is free to talk, but reaching them is often difficult or impossible due to the player's own schedule conflicts. The gameplay is supposed to represent the experience and frustration of often being unable to talk to close friends due to time differences and schedules that conflict due to living on opposite sides of the world.
Storyboarding
the main gameplay is designed as one long walkthrough through the player's day. The maze is designed to reflect the places I go to on a typical day with classes. I designed the initial structure on AutoCAD along a grid, then translated primitive shapes into p5 to greybox the game.
The initial structure and the final output:
Greyboxing
For greyboxing, I was mainly focused on figuring out collisions and the speed of the game. It took me a few tries to get the collision working, as it felt like the moment I figured something out, something else would break! But the greyboxing really helped me conceptualise and execute the structure of the game.
For the final game, instead of replacing the greybox primitives with assets and re-coding the movement and collisions, I just turned the opacity of the primitives to zero while maintaining the movement and collision code. I then drew my assets on top of the shapes at appropriate positions.
Assets
Illustrations
I knew I wanted my game to have a softer aesthetic, not too realistic. I tried looking for assets online but eventually ended up drawing all of the illustrations myself. The illustrations are based on my personal day to day routine - the houses on my walk to the train station every morning, different elements of the PATH train I take to class, the pillars and lamps around D12, my desk at home.
Player
The player in the game is a GIF I made of a person walking. The player and the phones in the game are both coloured red, since the aim of the game is to unite the player with a phone.
Since the game is essentially about maintaining friendships, I wanted to add background sound that reflected that. I chose to add an instrumental version of a popular Hindi song about friendship, 'Hai Junoon', from the late 2000s.
Listen to the original song here.
Find the instrumental version I used here.
Music
MORE PROJECTS
