Football game with Matter.js using Phaser.3.0 (Part 1)

There is so much fun in playing with javascript physics engine once you get hooked into it, it is difficult to stop. There is a satifying feeling when avirtual world responds to the user’s actions that one keeps on going. This is especially true for a beginners as they see their code doing more than what they expected it to do.

Matter.js is one of the most popular 2D physics engines which is easy to learn and can be used with few lines of code. With Phaser 3.0 framework support for matter.js it becomes even more easier to create 2D game, creative art or even a physics simulation. Phaser 3.0 provides helper functions and easy to use API bringing productivity and learning experience to a whole new level.

In this tutorial, we are going to lay the foundation of a game which we will build in next tutorials so it is important to understand the basic concepts before using those those concepts to build the game.

Phaser game consists of a game object and it takes an object literal as an argument to set the configuration of the game.

This is a nice clean way of setting global constants for the game e.g. width, height, background color, type of physics engine used and gravity within the physics engine. A game in phaser 3.0 can have one or multiple scenes. Each scene has it’s own properties and methods to make it come alive in the game. In our football game, the ball, players and the goal posts are the objects which need to be added to the scene.

There are few life cycle methods of the scene which make it easier to work with objects we want to appear in it and make those objects respond to user actions. These methods are:

1. Preload — to load any game assets (image, sound files). Once these files are loaded they stay in memory, ready to be used whenever needed avoiding any delays later.
2. Create — to create objects for assets loaded in pre-load and add make those objects respond to user actions. Most of the functionality in a game stays here.
3. Update — this is a loop which starts after preload and create but once started repeats until the scene executes. This is the place where all that code goes which needs to check something again and again.

Ogranizing game like this helps to make it quick to develop, easier to debug and find problems and above all makes code more understandable which is the goal of using framework so developer can focus on creating game with code which doesn’t get too complicated (spaghetti code which only person who wrote it can understand)as the complexity of game increases.

Basic structure of Scene class with pre-load loading image files

Next, we need to create physical objects in the scene. Basic properties of those objects needs to be set e.g. how big those objects should look? Which image those objects should use to appear on the scene? Should those objects be static or moving? Do we allow users to interact with moving objects? All these questions are answered by setting properties of these objects in create method of scene.

Create method in Scene class

In physics engine, there are many properties of physical objects which can be changed to see how behaviour of objects change e.g. bounce (restitutation), angular velocity etc. That is where we can have lots of fun. Changing properties within code and seeing its output is frustrating. That is where dat.gui gives these slider controls which can be changed for objects in the scene. Line 37 to 38 shows how to add it to the scene. To use it in update method of scene object and set values for physics objects, we need to do the following in update method of scene.

Hope you enjoyed this tutorial and learned that creating 2D virutal objects is not as hard as it looks.

To see what we learned in action check the following codepen.