code, howto, video games

Create a basic platformer game in Phaser using NetBeans and Tiled

[Update: This was last updated 3 May 2014.]

[Want to skip all this and look at finished code instead? Here’s the download link (ZIP) for this example code with all the associated assets on GitHub.]

Before I get too far into this guide, make sure you have the following things ready to go:

Requirements:

Creating the Project in NetBeans:

3May2014--1

Open NetBeans and go to File->New Project…

Jan11--2

If it isn’t already, select HTML5 and, under Projects, “HTML5 Application.”

Click “Next >”

Jan11--3

For this example, I will be naming the project “BasicPlatformer”.

Jan11--4

Make sure “No Site Template” is selected and then click “Next >”

Jan11--5

Without selecting any of the libraries, click “Finish”

3May2014--2

Once NetBeans has created the project, right-click on “Site Root” and select New and then click on Folder.

Jan11--7

Name this new folder “js” (as it will hold the JavaScript files) and then click Finish.

One more time, right-click on Site Root, choose New and then Folder.

Jan11--8

This time, name this new folder “assets” (as it will hold the image assets) and click Finish again.

Jan11--9

There should now be two folders, “js” and “assets”, under the Site Root with the “index.html” file.

Adding the Assets:

If you haven’t already, now is the time to download the “level.png” and “character.png” files.

From where you have downloaded them, either move the file themselves into the “assets” folder within the “public_html” folder of the NetBeans project, or use the next step. (The NetBeans project folder will be found wherever it was created initially. This is usually under the Documents folder for Windows users.)

One of the quickest ways to move files when using NetBeans is to copy them into the program itself. Simply select the files from some folder and copy them using the keyboard shortcut Ctrl-C or from the right-click file menu.

Jan11--10

Then, right-click on a folder within the Projects pane where you want them to go and click on Paste. This will copy the files directly into the project, creating them within the structure.

Jan11--11

Regardless of the method used, the “level.png” and “character.png” files should now be in the “assets” folder under the Site Root within NetBeans.

Creating the level with Tiled

Open Tiled.

Jan11--12

From either the File menu or the icon menu, select New.

3May2014--3

Set the width to be 15 and the height to be 8 tiles. The individual tile size should be 48 by 48 px. The orientation should remain “Orthogonal” and the Layer format should be “Base64 (zlib compressed)”.

Jan11--14

Once the empty map has been created, go to the Map from the top-level menu and select “New Tileset…”

3May2014--4

Click on “Browse..” and find the “level.png” file. Select the file, click “OK” and then, when back to the “New Tileset” window, click “OK” once more.

Jan11--16

The “level” tileset should now be loaded within the Tileset.

Jan11--17

From here, click on the first square in the set and draw a square around the outermost edge of the map. This will serve as the boundaries for the level.

Jan11--18

Using the second and then third tiles in the set, draw columns one row in on each side.

Jan11--19

Now, using the second-to-last and the last tiles in the set, replace the tiles on the top and bottom edges, stopping each time at the previously created columns. The map should now look like a black square with and inner white rim. This will be the level for the platformer.

Jan11--20

As a final step in this process, select “Save As…” from the File top-level menu.

Jan11--21

From the drop-down “Save as type” menu, pick “Json files (*.json)”.

Jan11--22

Name the file “map” and save it in the folder with the other assets.

Adding the Phaser library to the Project:

If you haven’t already downloaded, we will do that now.

Jan11--23From the Phaser project page on GitHub, locate the “Download ZIP” button on the right-hand side. Click it.

This will download the latest version of all of the code.

Extract the contents of the ZIP file and then enter the “build” folder.

3May2014--5

Select the “phaser.min.js” file and, using either the Ctrl-C keyboard shortcut or from the right-click context menu, copy the file.

Jan11--25

Within NetBeans, right-click on the “js” folder within the Projects view. Select “Paste” to move a copy of the library into the project.

Jan11--26

Writing the Code:

Now that we have added the assets and created a level, we can actually write the code finally.

Jan11--27

Highlight all of the HTML within “index.html” and press Delete on the keyboard.

Copy and paste the following code:

(The project is now complete. Click on the Run Project icon or press F6 to see it in action.)

Explaining the Code:

This section is a breakdown of the code by concepts.

Because Phaser is running in a browser environment, it needs to be loaded as part of the HEAD section of a HTML page. I am also using a META tag to tell other devices, usually mobile ones, to set the viewport to the full ‘device-width’ here too.

The BODY itself is somewhat straightforward too. There is a DIV called “phaser-example” that will be the parent element of the game and a SCRIPT tag as well.

Within the SCRIPT tag, there is a function scope created using a JavaScript closure. By using this, we can define all the variables we want without them also becoming part of the global scope and possibly interfering with another library or function with the same name.

The first step to creating a game in Phaser is to do exactly that: create a Phaser.Game object. For its instantiation, we pass its dimensions, which graphics rendering to use, the name of the parent element, and then three functions: the preload, create, and update functions.

Preload is where all loading will take place. Whatever needs to be grabbed and processed by Phaser before the game starts goes here.

Between the Preload and Create functions, we take some space to create references to the variables we will be using within the Create function itself. Because we will need to reference them in both the Create function and later in the Update function, they need to exist outside of both of them. This is also where the JavaScript closure comes into play too, keeping these variables within the larger scope of the game code, but outside of any one function so as to be available to any of them.

Create is where all the creation takes place. Whatever variables need to be created or values set go here.

Update is a function that defines the update-loop for the game. Those values that need to change as a result of pressing buttons or collisions between sprites happens here.

Jan11--28

Suggestions:

  • Within Tiled, use the Map-> “Resize Map…” option to change the length of the map. Make it much longer and use the tiles to paint the level in different patterns, remembering to ‘close’ the level at all points so the character does not fall out of the world. (Remember to save the file and then reload the web page to test the results too.)
  • Change the dimensions of the game world. Instead of 720 by 384, make the length shorter or level smaller. Test various numbers and combine this with the above suggestion to create different perspectives of levels.
  • Change the amount of gravity to a larger or smaller number. (It is set using player.body.gravity.y.)
  • Make the ‘player’ sprite bounce more by increasing the corresponding player.body.bounce.y number.
  • Add to or change the look of the tiles in “level.png”. Because Tiled checks the file itself while it is running, it will auto-update the look.
  • Consider having some tiles that the character can pass-through by setting a new collision range for the tiles after changing or adding to the original tileset. (This is an easy way to have some tiles be part of the background.)
  • Add some threats by introducing new assets, calling game.add.sprite on them, and enabling their physics bodies. Then, test if ‘player’ collides with them during the Update function.