For this week, we were given the task to use experiment with “Matter”, which is a plugin for Phaser which enables physics. This is different from the other games we’ve been developing as we haven’t used any other physics mode besides “Arcade”.
“The Phaser Matter plugin provides the ability to use the Matter JS Physics Engine within your Phaser games. Unlike Arcade Physics, the other physics system provided with Phaser, Matter JS is a full-body physics system.”
Using “Matter” will give us a full proper physics system that is dynamic, it will also allow us to create many things such as rigid bodies and physics constraints – which is what I’ve added in for my project.
One of the first things I started to try and implement into the project, was a functional bridge that consists of many individual objects constrained to each other (See Figure 1).
This bridge was created for the first scene of the game, and is meant to assist the player in getting past the first pit.
Within the create function of the code, to create this bridge I first had to define a variable to group multiple objects together, then create another for the bridge itself – the bridge variable will be assigned to be added as a “.stack” because we plan on using multiple instances here.
Using our assigned variable from earlier, we create a chain with our bridge and then add a world constraint at our first and last instances created with at the chain – world constraints help to fix these ends of the bridge onto a specific Y and X axis without the object falling over.
“Constraints are used for specifying that a fixed distance must be maintained between two bodies (or a body and a fixed world-space position). The stiffness of constraints can be modified to create springs or elastic.”
The final constraint for the other end of the bridge is added by specifying the total length of the bridge’s bodies in an array and inputting the similar code as before, only changing the coordinates (See Figure 2).
Another addition to the first scene I’ve added was a simple ball that’d block the player’s way, players traversing the bridge will have to try and jump over the ball or try to roll it into a nearby pit to use as a small platform (See Figure 3&4).
Creating this object was fairly simple, as I just had to preload an image of a circle I had and then in the game’s create function I included a new variable called “ball” which simply added in my image.
Although, this doesn’t mean the image spawned in itself has the collision of a ball, so we have to declare that the object has circular collision by using “.setCircle”.
The second scene of the game introduces a new mechanic where the player is able to click and drag onto certain objects, they use this mechanic later on in the level to try and build a staircase to the level’s goal point.
The player’s first obstacle in this level as you can see is a whole bunch of crates blocking their way, alongside one single image one tutoring the player that these blocks can be dragged.
For this to work, I implemented special objects that have been assigned a collision group referred to as “canDrag” (See Figure 7).
I’ve also implemented an extra control using the mouse called “mouseSpring” which enables the player to pick up certain objects with the mouse, this is helped by including a collision filter which enables it to only work on certain objects such as our “canDrag” objects (See Figure 8).
An effective way this mechanic is used is for a puzzle at the end of the level where the player’s entrance to the goal point is being blocked by several crates (See Figure 9).
Using the drag mechanic, they’re able to move the boxes out of the way and can even arrange them into a staircase to help themselves climb up onto the platform easier (See Figure 10).
I found learning Matter in Phaser to be quite fun, as I enjoy a lot of physics games. We were also given some time to try and experiment with this project more, which felt like there was some creative freedom to it.
Although one issue I have is that it is hard to find documentation on Matter, some features such as the bridge had no texture or fill so they couldn’t be seen unless debug mode was enabled – I could not find anything online that could help me with this – However, this was only a small issue I had with the project, as I feel the rest of it went fine.
Photonstorm.github.io. 2021. Phaser 3 API Documentation – Class: MatterPhysics. [online] Available at: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.MatterPhysics.html [Accessed 2 February 2021].
photonstorm.com, P., 2021. Phaser – Examples – Drag Filter With Pointer. [online] Phaser.io. Available at: https://phaser.io/examples/v3/view/physics/matterjs/drag-filter-with-pointer [Accessed 2 February 2021].
photonstorm.com, P., 2021. Phaser – Examples – Bridge. [online] Phaser.io. Available at: https://phaser.io/examples/v3/view/physics/matterjs/bridge [Accessed 2 February 2021].
Brm.io. 2021. [online] Available at: https://brm.io/matter-js/docs/classes/Constraint.html [Accessed 3 February 2021].
Photonstorm.github.io. 2021. Phaser 3 API Documentation – Namespace: Collision. [online] Available at: https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.Components.Collision.html [Accessed 3 February 2021].