Virus vs Vaccine - p5.js based multiplayer game
About The Project
This project was done as a part of the Creation and Computation Course at OCAD University, under the guidance of Prof. Kate Hartman and Prof. Nick Puckett. It was group effort by my classmates Achal Shah, Jamie Yuan, Simran Duggal, and myself.
The project was developed to be a working, realtime, online multiplayer game, using the p5.js Javascript library and the Pubnub API.
The game was developed in November 2020, when the COVID vaccines were being developed and put under human trial at lightning speed by Pfizer and BioNtech. As humanity anxiously waited to get the golden elixir that could possibly return them to their normal lives, this game was conceptualised to bring some fun and frolic into the lives of all those in isolation, away from their friends and family. This four-player game, requires players to load the vaccines into the syringes as fast as possible. Each player can load the liquid from the bottles to the syringe, by clicking on their individual syringes. The player who manages to complete this activity first will be declared the winner of the vaccine race.
Design and Development
The Backgrounds, objects and characters were designed and animated using Adobe Illustrator and Adobe Aftereffects. The game was developed using P5.js Javascript library and the PubNub APU for the multiplayer functionality. The process behind the making is discussed in detail below.
Character and Interface Design
The Character, objects and backgrounds were designed using Adobe Illustrator.
The characters were designed as child friendly dinosaurs dressed as healthcare professionals, as a tribute to all healthcare workers, across the globe, who are tirelessly working to save our lives amidst the pandemic.
For the colour palette of our visual design, we decided to use bright primary colours, along with uniform width bold black outlines to create a very vivacious and child friendly interface. We aligned the colour of our characters with the vaccine fluid to develop a proximity based association between the characters and their syringe loading levels.
p5.js Library
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers and educators. p5 has its own web editor, on which this game was built.
The entire game was organised by keyPressed and if/else function (). While more liquid would be drawn with every keypress, more visas would be released onto the screen, making it increasingly difficult to see the progression of the player's syringe and that of others. This functionality was designed to show that the development of the vaccine was a race against time, with newer viruses getting released on every click.
PubNub API
PubNub utilizes a Publish/Subscribe model for realtime data streaming and device signaling. It supports all of the capabilities of WebSockets, Socket.io, SignalR, WebRTC Data Channel and other streaming protocols. PubNub provides SDKs for over 70 different programming languages and environments including JavaScript, iOS, and Android.
PubNub is used for collection and feedback of different users of the game. The Chat API collects real time data on the number of clicks from each participant and shows the progress of all players to everyone. The whole game is organised by keyPressed and if/else function (). By clicking different keys users can either increase the liquid in their injection or disturb other users by several effects. When a player's injection is loaded with most liquid, in the shortest duration of time, they inevitable win. The winner is greeted with a congratulatory message, while others are thanked for participating.
Project Context
Social media and multiplayer games have proved to be extremely effective in connecting people, building a shared digital space for everyone, who wish to connect from the safe space of their homes. In this context we were looking forward to build a shared interactive digital environment for people to try out as they spend their time in isolation.
While working on this experiment we came up with multiple different ideas. Some of us thought about expressing emotion through graphics to interact with other people; others thought about making an online jam room or dance party controlled by individual body tracking; we also ideated about creating an online multi-user painting platform and making a landscape design stimulator. Unfortunately, most of these ideas dwindled down because of a lack of clarity or technical feasibility.
While endlessly ideating, drawing, and configuring a workable idea, we were finally inspired by a Pubnub example on voting, where there are two areas for users to click and the numbers increase when it is clicked. This example reminds us of some website-based games. When user is clicking the certain area, the number accumulates, and this function could be transferred to other features, for example, colours.
And the accumulation of colour, similar to progress bar, reminds us of some racing games such as Road Rash and Need for Speed. Although these racing games are in 3d, we can make our project a 2d games with p5.js.
As for the background of the game, we decided to choose the COVID-19. At the beginning we thought of making an actually racing game; then we got an idea of the injection and vaccine after looking up a variety of covid-19 related news. The accumulation of colour stands for the liquid of vaccine, and this game is about filling the injection of vaccine as users press a certain key on keyboard. To make this game more fun, more actions were added to the game. For game design there should be system of rewards and penalties () to make gamers motivated. So, there would be a congratulation effect for gamers to reward the winners. To add more interactions between gamers as well as to enrich the game, some disturbing actions are added to the game.
As for the technical methods of the project, PubNub is used for collection and feedback of different users of the game. The whole game is organised by keyPressed and if/else function (). By clicking different keys users can either increase the liquid in their injection or disturb other users by several effects. In a certain period of time, when someone’s injection has the most liquid, he/she wins, and here come the “congratulation” effects.