Part 2: Building a Cybersecurity Game with Three.js - Inspired by Google’s Interland

#javascript #gamedev #opensource #beginners

Preview 👾

In part 1 of this series, I talked about how we were inspired by Google Interland's Reality River and decided to build a cybersecurity game similar to it with three.js called Exploit. We wanted to create a lightweight browser-based game that would be fun, engaging, and educational. As complete beginners who are learning three.js for the first time and also our first game-building experience, we are happy with our progress.

Each week we are working hard coding as a team, to meet our deadline of having a basic version of the game ready by mid-December 2022. We also wanted to publish weekly blogs as we believe it might help out others who are interested in game development to see what the process is like for beginners. We did not find many game development processes being blogged out so we believe documenting this will be of massive value to those interested in three.js, game development, open-source development, and collaborative coding!

After our initial release in mid-December, we invite all developers interested in open-source to contribute to this project!

What's new ❓🤖

Our little game character that we call threat hunter is now able to jump from one building to another as it answers questions. Last time, we did not have any buildings or environments at all. However, this time our threat hunter and its question-answering ability is fully functional.

This logic of our character jumping through buildings is very similar to Google Interland's game where the little character crosses a river successfully upon answering questions.

Disclaimer: However, the game is still buggy at the moment and we are working hard to debug them. The question display sometimes fails and sometimes the character keeps walking endlessly without stopping. But hey, it is okay, this is a work in progress and we are going through a huge learning curve working on this project.

To check out our progress so far you can always visit our GitHub repo for the game environments. Please see the GitHub issues as our project documentation.

The code for our awesome character resides here.

We have also created some user stats such as modules completed, last score, and time taken to complete those modules.

We also have a dynamic leaderboard now which shows the scores of all the users playing the game for each module. For example, if I play the ransomware module, then my scores will appear under the ransomware leaderboard dynamically.

Experimenting 🔍🌘

Until this point, we had to go through many trials and errors to figure out how the environment would come together. The three.js documentation was our main source of guidance while implementing this project. We experimented with creating clouds, different positioning of the buildings, shadowing, and sphere geometry. In our environment, we have the moon, clouds, and buildings so far and of course, the game character that interacts with its environment. Since the moon was the very first component of the environment we worked on, I want to provide some code snippets to explain it.

The moon 🌙

We started by working on the moon for a night sky. There are many things to consider while making a game environment. We find textures and think of the camera setup, renderer setup, and light directions.

As shown in the code snippet below, we first defined the moon.

// <Define Env Components

const moon = new Group(); 

moon.add(

new Mesh(new SphereGeometry(200, 1800, 1800), new MeshPhongMaterial({ map: this.textures.moonTexture, displacementMap: this.textures.moonDisplacementMap, displacementScale: 0.0, bumpMap: this.textures.moonDisplacementMap, bumpScale: 0.04, reflectivity: 0, shininess: 0, emissive: 0xffffffff, emissiveMap: this.textures.moonTexture, emissiveIntensity: 12 })),

new PointLight(0xffffff, 1, 5000),

);

moon.position.set(1200, 350, 0);

What is mesh?

A mesh is a collection of vertices, edges, and faces that describe the shape of a 3D object:

A vertex is a single point. The plural is "vertices".
An edge is a straight line segment connecting two vertices.
A face is a flat surface enclosed by edges.

We can kind of imagine it to be like the skeleton of an environment, to which we need to add texture on top to make it realistic.

What is texture?

Textures add artistic control and realism of a game. For creating our moon, we had to download some realistic moon textures and then use the textureLoader function to load them. We then read the documentation of sphere geometry and displacement maps to build the moon. Afterward, we set the moon's positions and gave it a point light. So, what is point light? As written in their documentation, "A light that gets emitted from a single point in all directions. A common use case for this is to replicate the light emitted from a bare lightbulb."

const moonDisplacementMap = textureLoader.load('displacement.jpg');

const moonTexture = textureLoader.load('moon.jpg');

const moonBody = new Mesh(new SphereGeometry(200, 1800, 1800), new MeshPhongMaterial({ map: moonTexture, displacementMap: moonDisplacementMap, displacementScale: 0.0, bumpMap: moonDisplacementMap, bumpScale: 0.04, reflectivity: 0, shininess: 0, emissive: 0xffffffff, emissiveMap: moonTexture, emissiveIntensity: 12 }));

const moon = new three.PointLight(0xffffff, 1, 5000);

moon.position.set(1200, 350, 0);

moonBody.position.set(1200, 350, 0);

What is game physics? 👀

Physics simulation is a field within computer science that aims to reproduce physical phenomena using a computer. In general, these simulations apply numerical methods to existing theories to obtain results that are as close as possible to what we observe in the real world. (Source: Toptal)

Games are getting more and more realistic and part of this realism is also ensuring that the laws of physics we see in the real world also apply to the virtual gaming world. Things such as collision detection, gravity, joint movements, inertia, acceleration, and mass are all part of game physics. As someone who loves science, thinking of the game from a physics perspective was very exciting.

Three.js usually works better with another physics engine such as Ammo.js. There are a handful of JavaScript physics engines available such as Matter.js, Planck.js, Cannon.js, Oimojs, and Ammo.js. For this project, we will be experimenting with Ammo.js. We are not entirely sure yet how that will go in our initial release of this project, given the time constraint. We will find that out in the next blog.

Thoughts 💭

This is, by far, the most challenging project I worked on in my college life. It is also occupying most of my time as learning all this amazing new JavaScript 3D library is time-consuming but also rewarding.

Moving forward...🚀

1) Better use of GitHub

As a team, we have not been keeping everything clean on GitHub. Moving forward it is going to be our focus to write cleaner code and organize the folders more to enhance professionalism.