This tutorial shows how to make a simple game using Phaser P2 Physics. P2 Physics will be used to create non-rectangular collision polygons for physics collisions between elements in the game. This is significant because it makes physics collisions look more realistic and appealing. See what we will be creating here.
The Game: Triangle Catcher
The objective of our game will be to catch falling triangles. To start, you will need the source code, and you will need to be able to serve the source files using a local web server. If you do not have a web server, see how to install and use the Apache web server through XAMPP within this tutorial. Download the source code from Github here. Alternatively, you can use this command on your command line in your preferred file directory, assuming you have Git installed:
git clone https://github.com/Loonride/triangle-catcher.git
Serve the source code using your web server and ensure that the game is working by moving the catcher with your arrow keys.
Why use P2?
The P2 physics engine of Phaser gives us the capability to apply complex polygon bodies to the game's sprite bodies for collisions. But what does this mean, and why is it important? The default physics body for Phaser is a rectangle. By looking at our catcher with a rectangular physics body, you can see that this would remove all of our game's functionality:
The triangle will not go within the catcher because it will instead collide with the top edge of the rectangle. A physics polygon such as this one will work much better for catching triangles:
Phaser does not automatically create these polygon physics bodies, and with good reason. This would consume the games resources to load, and the polygons would be hard to customize. This is where Loon Physics comes in. Loon Physics is a tool that can help you create, edit, and test P2 physics bodies with ease.
Go here to start using Loon Physics. Now, navigate to the asset directory of the project source. There, you will find two image files, semicircle.png and triangle.png. Drop these images into Loon Physics. Make sure that they are within the same project. Polygons will automatically be created. You can drag the squares to adjust the polygon, and you can adjust the number of points at the top right of the editing area.
15 points works well for the semicircle, and 3 points for the triangle. Adjust points to make them fit the curvature of the semicircle as you saw above, and adjust the points of the triangle as so:
You can change your project name in Loon Physics, but do not change the names of your sprites. These names will be the keys to access particular data in your code.
You are finished creating your physics bodies. Now there are two ways to export and test them. The first is by downloading a file, and the second is by using a URL to the desired data. The URL is excellent for testing, as you do not have to download a new file each time you change a physics body. The file should replace the URL when you are ready to launch a game. These options can be utilized via the tabs JSON File and JSON URL. We provided some of these things already in the example source code, but you can try it anyway to familiarize yourself.
Now that setup is complete, we can develop our game! View game.js in your preferred text editor. To start, we initialize the game and some global variables. In the preload state, we first load our images, and then load our physics body data like so:
At this point, you could use the JSON URL tab in Loon Physics to get code that can seamlessly replace the code above, assuming you created and adjusted the physics bodies for the catcher and the triangle.
In the create state, we first start the P2 physics engine like so:
We initialize the catcher and enable P2 physics for it. Then, we remove the default rectangular body and replace it with the polygon body that we created like so:
catcher.body.clearShapes(); catcher.body.loadPolygon("physics", "semicircle");
The loadPolygon method takes the string we specified earlier for the physics data name ("physics") as its first parameter, then takes the name we placed in Loon Physics for the body, also known as the object's key, for the second parameter.
By default, P2 physics sets physics bodies to be dynamic, meaning that they respond to collisions and forces. We make the catcher kinematic, meaning that it will not be affected by triangles when they collide with it:
catcher.body.kinematic = true;
When we initialized the P2 physics body for our catcher, we placed the variable showBodies as the second parameter, which was initialized to false. Try setting the value of the variable to true where we first initialized it, and you will see the polygon bodies of the game's elements.
We then start a timer for the game duration and a timer which spawns triangles by calling the spawnTriangle function. This function initializes a triangle at a random x position near the top of the screen, and enables P2 physics for its body. Then, we add our physics polygon the same way we did with the catcher:
triangle.body.clearShapes(); triangle.body.loadPolygon("physics", "triangle");
We then send the triangle down at a constant velocity, maxTriangleSpeed, which we defined earlier:
And this is the extent to which our own code handles physics! P2 physics handles all the collision calculations, allowing you to spend more time being creative.
The update state allows keyboard arrows to move the catcher, and also handles triangle destruction if triangles move off of the screen. The remaining code simply handles game timers and checks how many triangles remain at the end of the game. You can read more about this within the comments of the code.
This concludes our tutorial on Phaser P2 Physics bodies. Remember that Loon Physics will remain available as a tool for creating physics bodies. Try using this tool with other shapes and implement them in your new game! Feel free to share with us what you create and offer suggestions for future tutorials at email@example.com.
Until next time,