In today's tutorial, we are going to start with the first part of making a phenomenal game in JavaScript. This post is one of the proofs that this programming language is extremely versatile, easy to learn, and will help you simplify many aspects of your code. So, without more to say, let's get started!
Step 1: Getting started with an animated background
I really wanted to write a tutorial on a gaming technology that I like to use, so here it is. In this story, we are going to start making a little game of shoot'em up with PixiJS, a very simple and cool Javascript library.
What we are going to do exactly is make a spaceship capable of moving and shooting, enemy waves coming in and a beautiful animated background with moving clouds. The first part (this one you read now) will focus on the background.
How to start?
Let's start by launching our project: I have uploaded an already established code structure, so we are all working on the same basis. However, if you want to do it yourself, I put a photo from my folder just below:
Click here to download your folder
We will need a local server to run the game: I invite you to download WAMP if you are working with Windows, or MAMP for macOS, they are free and easy to use. We are going to put your games folder on the server (htdocs for MAMP / www for WAMP) and type the localhost link in your favorite browser (for me it would be: http://localhost:8888/Spaceship/bin/)
In index.html, we are importing the header javascript files:
… And we need to do the same for every file we make. Next comes the Pixi initialization (which is based on the WebGL rendering engine):
var renderer = PIXI.autoDetectRenderer (window.innerWidth, window.innerHeight);
For this tutorial, we tell the game to cover the entire browser window, so if you try it now you will get a totally black background.
The main.js file is where the whole game begins. It's like a manager, with the first run function of the game, and the loop where we can tell the game what to do in each frame. What we want is a blue background for the sky when the game starts, so let's update the init function:
function init () {renderer.backgroundColor = 0x22A7F0; renderer.render (stage); loop (); }
Pixi is using the hex color format, so you need to write your color code preceded by 0x. Let's save and see the result in your browser!
Clouds everywhere!
This background is very boring, let's add some floating clouds.
First, let's add a new class file CloudManager in the folder src (which will create and move the clouds).
class CloudManager {constructor () {} update () {}}
Don't forget to add it to the file index.html how did we do for main.js:
The constructor is the entry point of this class where we can add the spawn function for our clouds. What we want is basically a method capable of creating a cloud each X seconds, and it's perfect because there's a javascript thing for this:
window.setInterval (function () {}, 1000);
This piece of code, placed in the constructor, will call what is inside the game brackets every 1000 milliseconds (= 1 second).
Let's add cloud sprites in the assets folder, and as best we have 2 different images: (the clouds are white with a transparent background so they were invisible on this page, but here are the links on GitHub:
We need to load the sprites before the game starts, so add them in the function Pixi.loader.add:
PIXI.loader.add (["assets / cloud_1.png", "assets / cloud_2.png"]). Load (init);
Ok now we can show the clouds in the method setInterval of CloudManager:
window.setInterval (function () {const sprite = (Math.random ()> 0.5? "cloud_1": "cloud_2"); this.cloud = new PIXI.Sprite (PIXI.loader.resources ["assets /" + sprite + ".png"]. texture); this.cloud.anchor.set (0.5, 0.5); this.cloud.position.set (renderer.width * 1.2, renderer.height * Math.random ()); stage. addChild (this.cloud);}, 1000);
To resume this code:
- First, we are calculating a random number between 0 and 1, it is either less than 0.5, so we store the first sprite in a constant, or it is the second.
- Then, we create a new sprite object with the image we obtained in the previous line.
- The point of origin of this sprite is going to be its upper left corner, so we set its anchor point in the center.
- We have to show the cloud beyond the right edge of the screen, so that it can move to the left across the screen: renderer.width * 1.2 is the position of the left edge + the width of the screen + 20% of its width. We can be sure that we will not see it spawning. For position and, renderer.height * Math.random () is a number between 0 and the height of the window. Therefore, the vertical position of the cloud will be located between the top and bottom of the screen.
- Lastly, we add this cloud to the scene.
If you run this code, nothing should appear, and it's on purpose because they have to disappear from view. So now we have to make them move.
The update feature is the place to do it. But we need to store the clouds in a array to be able to iterate and set their positions. Let's initialize a new array in the builder of CloudManager:
this.cloudsList = [];
... and pushes the clouds in after the stage.addChild function:
this.cloudsList.push (this.cloud);
Now we can iterate the update array and set the position of each cloud:
this.cloudsList.forEach (function (element) {element.position.x - = 4;});
Now it should be working!
Oh wait, something should be bothering us: where are all those clouds going?
Yes, if we don't remove them after they left the screen, they will still exist and may cause some performance issues. Let's add a forEach declaration for each of them that clears them when their horizontal position is slightly lower than the left edge of the screen (so we can't see them exiting):
if (element.position.x <-renderer.width * 0.3) {element.destroy (); array.splice (0, 1); }
We are done with the clouds!
How about making a random variation in the size of the clouds? Add this to the cloud building block:
let minScale = 0.2; let maxScale = 1.2; let scale = Math.random () * (maxScale - minScale) + minScale; this.cloud.scale.set (scale, scale);
If you are missing something or it doesn't work in your code, you can check the result here.
Now continue to the next part to finish our first game in JavaScript. Keep going!
