Learn JavaScript with Phaser
Jumping Right In
To get started let's alter the graphics of a game that has already been made and change a couple of things about it. This will help us to see some of the code involved before we have to start writing our own.Hopefully this will make the whole process seem less scary.
Have a Play: with a simple platform game
Play this game, inspired bylessmilk.com, using the cursor keys to move - https://simple-game-to-edit.glitch.me/
You may notice that the game is impossible. It is. We've clearly made mistakes when coding this game but we can fix them. To do this hit the two fishes at the top right of the screen and choose Remix on Glitch
You now have the following challenges which are available as a printed document of cards here.
Starting challenges
- find the gravity setting and to change it so that you can complete the game
- change the background colour of the game
- change the velocity settings so that your character moves faster to the left and the right and up when jumping
- change the game so that there are more hazards and coins, do this by altering
- change the platform layout of the game to make it more challenging
- make your own pixel art - see below for how to use piskel
- balance out your game using velocity and gravity and the placement your platform, hazard and coins to make a challenging game that is still possible to beat.
- add a moving animated player or hazard
How to use Glitch.com
- You can hit the Fishes in the game playing window and choose Remix on Glitch to alter the code of the game
- The JS file should show by default but click on game.js in the list of files on the left if it doesn't
- After making your changes, click on Show Live and your browser will open a new tab allowing you to play again with the updates
- Keep these two tabs open and swap between them to make more updates and see your changes live
Hands On: Create your own characters
We can use a online sprite / pixel art editor to add our own characters. There are many tools you can use but let's use an online editor called Piskel. You don't have to log in but it can be a good idea to do so you can save your work.
To get started point your browser to https://www.piskelapp.com/ and click on Create Sprite.
When you create your sprite, by default it creates one 32 pixels high and 32 pixels wide. This is perfect for our game.
Piskel is a pretty intuative tool to use so we're not going to give you full instructions for how to make your character here. But here are a few tips.
- In your tool bar on the left, you can select the different icons to draw and edit your images.
- You can change the size of your drawing tool by clicking on the different sized squares above the toolbar.
- You can change the colour of your drawing tool by clicking on the block of colour below the tool bar
- It is possible to create animated sprites by clicking on Add new frame or duplicating your existing frame
Let's start with a one frame static Sprite. When you are happy with the single frame you have created we are going to export it.
Click on the export icon on the right.
We are going to export a PNG image to a bit of code called a data URI. So click on the PNG tab and then select the To Data URI option.
A Data URI is a way of saving an image or other kind of data as a long-ish stream of code. It looks kind of scary but we don't need to understand it at all. We just need to know what to do with it.
Now copy the text that appears on the screen to your computers clip board. This is our image as data.
The quickest way to do that is to select it and press Control + C on your keyboard or you could select the menu option Edit > Copy if you prefer.
We are now ready to go back to the game code to add our own character.
Look for the piece of code that says
game.load.image("player", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAY
EAAAgDoP3/8ZKeoYFAJtPOhYjFYrFYLBaLxWKx+G+8cOTYhPAlQ2YAAAAASUVORK5CYII=";
You can replace the code between the last set of quote marks as shown below with the code you just copied.
When you refresh your code you should see your character as the player in the game.
If it doesn't work then refresh your page and try the process again. It is easy to make mistakes when copying and pasting like this. Part of our job is to get used to making these kinds of mistakes and going back and fixing them.
Extension Activity
If you have more time then you can do the same process of making your own pixel art for the following:
- replace the yellow blocks coins with your own design of a reward, a coin, star or whatever
- replace the red hazards block with an image that students have to avoid
Under the hood: how Javascript looks and reads
So that's it. We have done our first bit of Javascript coding. Ok, we didn't write the game from scratch. But a lot of coding is about adapting what someone else had done before. Any kind of web project uses a lot of code libraries written by other people as a base.
We are not going to go into detail here about Javascript but there are a few things you may to notice as a beginner. One of the good thing about using Phaser and the process of making games to learn javascript is that a lot of the code we are going to meet can be quite readable.
Take the last bit of code we met.
game.load.image("player", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA
3NoQEAAAgDoP3/8ZKeoYFAJtPOhYjFYrFYLBaLxWKx+G+8cOTYhPAlQ2YAAAAASUVORK5CYII=";
Some of the language is very similar to real English this. Here this line loads an image into the game and gives it the name player.
At the same time, somethings look quite intimidating punctuation present, 'single ' or "double quotes", normal brackets (), curly brackets{}, these do all do slightly different thing and we'll pick them up as we go along by looking and writing our code.
The important thing here is don't panic. Give yourself the time to play around with the following bits of code and it will start to become more familiar, as you make progress through trial and error.
What if I make a mistake?
If you do make a mistake and the code stops working. Say for example you paste in some code, and you delete some of the end of the code - say the "); - which is easy to do. You end up with the following
game.load.image("player", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA
EUgAAAB4AAAAeCAYAAAA7MK6iAAAAKUlEQVRIie3NoQEAAAgD
This is not going to work and will give us an error, hopefully one that we we can use to help us work out where the problem is. In this case it does give an error as shown by the red dot.
Hover over this red dot to see the full error.
This gives us an error of:
Parsing error: Unterminated string constant
Unterminated means we haven't got ended a line of code properly.
In this case, there is a similar line of code following it. So to correct our code we can see how it is different from that line and see that we need to type the missing ending code of ");
What if it's a bigger mistake
Debugging is finding and solving errors in our code.
If we have other or bigger mistakes we could try some of the following:
- reading the error message to see if it tells us where the error is (in this case it does)
- reading the error that it can tell us about what kind or error it is
- looking at the relevant line of code and comparing it to other similar ones in our program (is there anything different/ missng here)
- if that doesn't work try going back to the original project that you remixed from, remix it again to see the working code and then comparing tha working code your broken code
When we get more advanced then we can start to look up the correct usage of the code by googling it (in this case google "game.load.image + example" and see how if we can find how this code should be used)