How to build a game using Matter.js
Matter.js is an interactive physics engine environment written in Javascript that allows for creation of 2D physics in the browser. It is commonly used to create games within the app store, such as Flappy Bird and Pokemon Go. When deciding to do a mobile game using Matter.js, I was excited to get started on implementing a new technology. I had a lot of fun designing and testing the game using Matter.js. The premise of the game is to create recurring fight scenes between a hero and a monster allowing the user to level up. There was a learning curve involved when trying to correctly create a 2D mobile game, but the productive struggle was worth it. Installation is the starting point, you can install Matter.js by using a manager like Bower or NPM. Assuming you use NPM like I did, the terminal command is
Npm install matter-js
It is important to understand the modules used within Matter.js to grasp what the code is doing. Matter.Engine is essential to get the physics working correctly within the game world. Matter.Engine is a module correlating to its namesake-creating and manipulating engines. It is necessary to use create([Settings]) in order to create the engine. What are engines you might be wondering? Engines are used to update the physics and simulation of your game world. Matter.Render is a module with an HTML canvas-like renderer. Both are needed in order for your physics to work and for the game world to render. But it doesn’t stop there, there are some more fun modules that are used in Matter.js :).
Matter.World module is used in order to add more exciting functionality to your game. Beyond the encompassing name, it alters the game engine to match the desired functionality. A few of the features included with Matter.World are gravity and bounds. I used gravity in order to move both my hero and my monster. A programmer is able to set initial positions using gravity by setting the indices x and y. Once both are defined, the matter is able to move in a designated direction and speed. Bounds are used to set invisible barriers within the screen to ensure that the bodies do not leave the screen. Without borders, the bodies created will move and eventually jump off of the screen. This happened during development when I created characters within the 2D world, the creation of characters will be the next topic covered. To prevent headaches, make sure you create bounds in order to encapsulate your 2D world. In every game most of the attention is spent on the character, as it is the source of user interaction. The module that deals with creating rigid body objects is called Matter.Bodies. This allows the programmer to manipulate individual bodies (characters, monsters, etc.) within the game engine. The bodies are able to move because of gravity. There are two different types of bodies that are created using Matter.js, rectangle and circle. The syntax for implementing both is
Matter.Bodies.rectangle(x, y)
Matter.Bodies.circle(x, y)
respectively. Imagine that your game engine has several small rectangles and circles moving due to the physics of your screen. You can alter the look of each one by using React Native declarations such as <ImageBackground />. Beyond physics, there are other ways to manipulate the movement and location of your objects as they live within your engine. Module.composites contain several unique methods that alter the bodies that have been created within the bodies module. With the composite module within bodies, it is possible for the programmer to create bodies like rectangles and circles and set those bodies with common configurations. One way to visual this is the creation of a large stack of rectangles that will be rendered every time the game engine is initiated. When combining these modules, you can create a simple UI that allows for a user to move an object around the screen. Height and width are set at different parameters for the bodies and borders. Once the bodies are created and appended to the physics, you must use the add() method from the Matter.World module to add them to your world.
Matter.World.add(world, object)
After the bodies are added to the world, use run() method to run the engine and renderer, then your app is ready to go!
Engine.run(engine)
Render.run(render)
Constraint is another module that contains several unique inner modules. The one I am going to cover is MouseConstraint.
Matter.MouseConstraint.create(engine, options)
Who doesn’t love having their game interaction be constrained due to limitations initiated by the developer? All kidding aside, sometimes providing mouse constraints is essential to have an enjoyable game experience. An example of this is a feature only allowing users to tap certain parts of the screen when trying to move in a particular direction. I used this in my game, which ensures that users can become comfortable with the functionality.
I had a great time building a Matter.js game and I hope this tutorial allows you some insight and confidence to get started on a project of your own. Seeing the game come to life is a fulfilling experience. Matter.js makes developing games like Flappy Bird and Pokemon Go seem achievable. A basic example will often look like rectangles jumping around a screen, but this is really the beginning and so much more can be accomplished. Here is the GitHub link to check out my game, https://github.com/kevinforhan/GoalHero. Enjoy coding!
