HyperPickle is an ETC academic project. The team is working with our client, the Carnegie Mellon University CyLab team, to create a web game that is going to be used during PicoCTF 2021. PicoCTF is an online cybersecurity contest targeting at middle and high school students. If you are interested in learning more, you can visit their official website.
I am working as one of the co-producers of this team, while taking the role of a programmer, a concept artist as well as a technical artist.
Since we are making a web game, we started by researching on game engines that either is based on JavaScript, or supports building into WebGL. Since most of the team members have familiarity in Unity, we finally chose Unity and planning to build in WebGL. Below is our pipeline:
We are fetching data from as well as storing data into our client's backend server. To be specific, we want to store the player's game status on the server, so that when the player leaves the game temporarily, they will be able to restore the game status when they come back. Luckily, Unity has provided wrapped functions in performing HTTP requests, and also ways to pass information between browser document by customizing JavaScript plugins.
We used JSON format for passing data between server and our game client. Also, as PicoCTF is a cybersecurity contest, we are expecting our players as people who are interested and abled to hack. Thus, we want to have some level of ability of anti-cheating. We hashed the data to prevent the player to simply intercept the HTTP request and modify JSON data to hack the game.
I took the responsibility of the team logo design and the character designs.
The team came up with the team name of HyperPickle, taking the pronunciation of "pico" from PicoCTF and the cyber feeling from the contest topic. For the team logo, I was aiming for delivering the idea of a slice of cyber infused pickle:
Our client is expecting the game to deliver a positive content towards its audience, as well as avoiding a stereotypical depictions such as "dark" and "male dominant" for cybersecurity. Thus, the team comes up with a space theming with extraterrestrial inhabitants. We are using space theming to avoid sensitive topics such as politics. Also, having characters being extraterrestrial inhabitants avoids the impression of linking the characters to a specific gender.
When designing the characters, I used a lot of pastel colors and round shapes, aiming for joyful and huggable characters.
Since our game would be a web game, the performance could be a great element we want to optimize. After doing some research, we switched our render pipeline to Unity's Universal Render Pipeline (URP), which eliminates some performance heavy effects for low-end platforms. URP also comes with shader graph, so I can develop shaders while being able to see its effect visually during prototyping.
We used a customized shader to fake the shadow of planets when they orbit around the sun. Since our scene is inside a solar system, the main light source would be a point light. However, compared to the size of each single planets, our scene is too large for a single point light to illuminate all planets properly. If we want to illuminate the furthest planet, we need to drastically raise the intensity of the point light, which casts too much light on inner planets. Also, dynamic shadow for point lights is still in experiment for URP, so we cannot have the dynamic shadows casted by other planets.
To calculate the shadow on the surface, I took the vector from the position of the sun to the position of each vertex, faking the lighting direction from a point light. Then, I simply took the dot product of the fake lighting direction and the vertex normal. Then, I soften the edges of the shadows, which gives a convincing shadow casted by the fake middle point light.
I also used the shader graph combined with Unity particle system to create some dynamic materials applied on planets, making them more interesting too look at.
