Introduction

I’ve been using JavaScript for some few years to develop Web and Mobile apps, and recently i have been developing an interest in making video games. In this article I will take you through making amazing games with JavaScript. Hopefully, it will be useful to somebody out there.

We will be using Karim Maloul’s low-poly as a learning example for this project. To view some of his work visit this link.

Getting started

You don’t have to be a pro in JS. If you know some JavaScript and CSS you are good to go. Relax, we won’t be using Node.js. Just plain JavaScript like we used to back when the internet wasn’t Node.js. Let’s do this!

If you are familiar with JavaScript, then you are aware of libraries like jQuery, Bootstrap, Angular, React and alike. In this “tutorial” I will be using two libraries:

Three.js — A cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser. We will use it to make 3D objects: The Rabbit who is our hero, The Monster, the Carrots which gives our Hero the shell power, the World/Floor/Environment and much more. Easy stuff.

TweenMax — An extremely fast, lightweight, and flexible animation library. We will use it to make Running, Jumping and Rotating animations.

Below are some cool projects created with Three.js.

We will just add them in our script the same way we add jQuery. <script src></script>.

Before we dive into coding our main game, we will create a basic game to familiarize you with Three js. I will explain TweenMax as we make our main game. It’s just like using css and jQuery animation.

Creating a scene

The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube.

Before we start

Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of three.js in the js/ directory, and open it in your browser.

That’s all. All the code below goes into the empty <script> tag.

Creating the scene

To actually be able to display anything with three.js, we need three things: scene, camera and renderer, so that we can render the scene with camera.

Let’s take a moment to explain what’s going on here. We have now set up the scene, our camera and the renderer.

There are a few different cameras in three.js. For now, let’s use a PerspectiveCamera.

The first attribute is the field of view. FOV is the extent of the scene that is seen on the display at any given moment. The value is in degrees.

The second one is the aspect ratio. You almost always want to use the width of the element divided by the height, or you’ll get the same result as when you play old movies on a widescreen TV — the image looks squished.

The next two attributes are the near and far clipping plane. What that means, is that objects further away from the camera than the value of far or closer than near won’t be rendered. You don’t have to worry about this now, but you may want to use other values in your apps to get better performance.

the near and far clipping plane

Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don’t have WebGL support for some reason.

In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. It’s a good idea to use the width and height of the area we want to fill with our app — in this case, the width and height of the browser window. For performance intensive apps, you can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2, which will make the app render at half size.

If you wish to keep the size of your app but render it at a lower resolution, you can do so by calling setSize with false as updateStyle (the third argument). For example, setSize(window.innerWidth/2, window.innerHeight/2, false) will render your app at half resolution, given that your <canvas> has 100% width and height.

Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.

“That’s all good, but where’s that cube you promised?” Let’s add it now.

To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube. We’ll explore this more in the future.

In addition to the geometry, we need a material to color it. Three.js comes with several materials, but we’ll stick to the MeshBasicMaterial for now. All materials take an object of properties which will be applied to them. To keep things very simple, we only supply a color attribute of 0x00ff00, which is green. This works the same way that colors work in CSS or Photoshop (hex colors).

The third thing we need is a Mesh. A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.

By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.

Rendering the scene

If you copied the code from above into the HTML file we created earlier, you wouldn’t be able to see anything. This is because we’re not actually rendering anything yet. For that, we need what’s called a render or animate loop.

function animate() {

requestAnimationFrame( animate );

renderer.render( scene, camera );

}

animate();

This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second). If you’re new to writing games in the browser, you might say “why don’t we just create a setInterval ?” The thing is — we could, but requestAnimationFrame has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.

Animating the cube

If you insert all the code above into the file you created before we began, you should see a green box. Let’s make it all a little more interesting by rotating it.

Add the following right above the renderer.render call in your animate function:

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don’t end up with a animate function that’s hundreds of lines.

The result

Congratulations! You have now completed your first three.js application. It’s simple, you have to start somewhere.

The full code is available below. Play around with it to get a better understanding of how it works.

Final Note

Making games with JavaScript is not as complicated as it sounds. In the second part of this series I will walk you through making the environment of our game.

If you liked this article, make sure to give me some 👏 below and follow me for more articles and most importantly the second series of this article. Visit my blog DavisonPro.