Complete Football game with Matter.js using Phaser.3.0 (Part 2)
This tutorial is second and final part of the previous tutorial where basic concepts were explained and foundation was laid for this game.
The best way to deal with bigger projects is to break it into small tasks. Football game can be broken into following tasks:
Load global game object with configuration including plugin required to detect collision for matter.js objects. Basic template is created based on part-1. It defines game configuration as object literal and pass it as parameter to global game object. It loads images for ball, goal posts and players in memory so that when objects are created in the scene there is no need to wait for these images to load. Have look at it in codepen
Notice that a plug-in is added in game configuration to detect collision
For collision plug-in to work it is added to the list of javascript libraries.
Making objects appear on the screen: To make ball, goal posts and players appear on the screen, create Objects for goal posts, ball and player in load() method of SceneMain. setStatic() is chained to make goal posts static, setScale() to make images appear smaller, setBounce() to increase restitution or bounciness of ball and setFriction() to set friction between ball, palyers and ground.
Stop dynamic objects from falling: Notice that objects which are non-static object (ball and players) fall through the screen. This is because the game doesn’t have walls to stop dynamic objects from falling. By using setBounds() on the physics world walls are created which stop dynamic objects from falling.
Also notice that we used mouseSprint() method so we can pick dynamic objects with mouse and drop them anywhere we like. While game is in progress obviously that will not be allowed but is useful to see how user can interact with virtual objects using their mouse.
At this stage everything you need in the game should appear on the screen. If you get stuck look at this code pen.
Making Score Board: To make score appear on top of the goal posts, phaser’s text object is used in create() method of the scene, which takes x and y coordinates as its arguments along with font size, type and color.
Controlling Players: Keybaord keys are used in this game to control players. There are two players, one on the left (Red player) and other on the right (Green player). For left/red player, key A is used to move backwords, D to move forwards and W to jump. For right/green player, left arrow is used to move forwards, right arrow to move backwards and up arrow to jump. In Scene’s create() method scene is made aware of the fact that these keys are going to be used to interact with objects in the game. In update() method velocity of the players are changed if any of these keys is pressed.
Try moving both players and hitting the ball with players. If you are coding along and got stuck then look at this codepen for help.
Detecting Collision: To update score we need to detect collision between ball and the goal posts. This is where matter.js collision plug-in will come in action which we added in game configuration. It works by adding two addOnCollideStart() event handlers to the scene. One for collision between ball and goal post on left hand side of the screen and other for collission between ball and goal post on right hand side of the screen. As soon as collision is detected between the ball and the goal post call back function is called which increments the score. The purpose of touch variable is to stop increasing score too many times while collison is happening repeatedly in short span of time. It acts as a flag which turns on after 5 seconds of scoring a goal. This makes game looks more natural and stops players from taking unfair advantage by keep on pressing the ball against the goal to increase their score.
Here is the full game in action. Hope you have fun playing it and learned few concepts from it which can be used in your own game.
