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.