However, before we got stuck into writing our game, we needed to install something on our computers called a web server.
What is a web server and why do we need it?
A web server is a program that makes files available on the internet. Mostly, the files are made available to programs that can understand the Hyper Text Transfer Protocol – or http for short. “http” probably sounds familiar – this is because you are used to seeing it on your browser before internet links.
Up until this point, we simply opened files on our computer with explorer and if you looked at the browser link you would see something like this:
Installing our Web Server – Node.js
We installed node.js from the node website here.
Once we installed node.js, we then installed a web server which is written in node.js – we installed one called “local web server”. To install local web server – we opened a command terminal in the computer and typed the following:
npm install -g local-web-server
npm stands for “Node Package Manager” and it’s a program that makes it easy to install programs written in node on your computer. Once this was done, we have a new command in our computer – the command is “ws” and what it does is to start a web server that puts the files from the current folder on the internet!
To try it out, we started a new p5 project called “shootah” and right clicked on the folder and selected “open in terminal”. The command prompt appears directly in Visual Studio Code, which is handy. We then typed “ws”
markdav@markdav2017 MINGW64 ~/code/dojo/creators2018/Week11-shootah (master)
Serving at http://markdav2017:8000, http://192.168.71.1:8000, http://192.168.48.1:8000, http://192.168.1.20:8000, http://127.0.0.1:8000
This started a web server in the folder which serves out the files – to open we used either one of the links given, or actually we kind of preferred to type “http://localhost:8000” which was another way of putting it. When we did this, the files just showed in the browser!
All this installing took us some time, but we were ready to get stuck into developing our space shooting game. We go to the stage of getting a Spaceship which we could move left and right – but no bullets, sound or enemies, yet.
First we needed a spaceship picture, and we had a bit of fun rooting around on the internet for one. Some people created their own images. I ended up picking this picture (you can right-click this picture and save it if you like it too):
When we had the spaceship picture, we created a folder to store our pictures. I created a folder called “images” and put the picture in there and called it big-spaceship.png. Some others called their folder “assets” which is a term you often see used. To be honest my picture was a bit big – you are better off making the images just the right size, as it saves a little bit on memory for the computer when showing them.
We learned that there is another special function in p5 which is best to use when we are loading files like sounds and images into variables – it’s called “preload” and we wrote the code to load our images in there:
playerImage = loadImage("images/big-spaceship.png");
Once we had the image loaded, we could draw it using the “image” function. The show function on our player used this to paint the image:
image(this.img, this.x, height-100, 100, 100);
Aside from that, the code was pretty similar to other sketches we have done. We put some basic code in to allow the player to be moved left and right. This is as far as we’ve gotten – next week we’ll work on it some more and see if we can get some enemies, bullets, sounds, maybe stars, scores, better movement, etc. Code is on github as usual!