This is the fourth post in a series of blog posts about creating modular worlds with tilemaps in the Phaser 3 game engine. In this edition, we’ll get acquainted with Matter.js, so that we can set up a world with “realistic” physics:

Dropping Twemoji

This will set us up for the next post where we’ll ditch the emoji and add a player jumping around this world.

If you haven’t checked out the previous posts in the series, here are the links:

Before we dive in, all the source code and assets that go along with this post can be found in this repository. These tutorials use the latest version of Phaser (v3.16.2) and Tiled (v1.2.2) as of 02/26/19. Some pairings of older versions of Phaser and Tiled don’t get along well, so I recommend using these two version.

Intended Audience

This post will make the most sense if you have some experience with JavaScript (classes, arrow functions & modules), Phaser and the Tiled map editor. If you don’t, you might want to start at the beginning of the series, or continue reading and keep Google, the Phaser tutorial and the Phaser examples & documentation handy.

Alright, Let’s get into it!

Overview

As I was writing up this post, I realized that there were just too many new concepts to pack into one post, so I’m splitting this into two posts. This one will introduce the Matter physics engine by itself, and then we’ll bring in Phaser, tilemaps and mapping tile bodies in Tiled. In the second post, we’ll dive into Matter’s collision logic and build a platformer.

A quick sidebar: this whole tutorial series is tilemap-centric, so of course we are going to use tilemaps here. That said, the game/art/tool/etc. that you may want to create might not need a tilemap, e.g. this pinball game made with Matter. Don’t feel constrained to tilemaps just because we are using them here! You’ll learn the basics of Matter along the way here, so you’ll still get something out of following along even if you don’t use tilemaps.

Introduction to Matter

Matter is another JavaScript 2D physics engine. Whereas arcade physics (AP) in Phaser aims to be fast and simple (mainly just axis-aligned bounding boxes and circles), Matter is a more realistic physics simulation engine — complex body shapes, mass, density, constraints, etc.

AP is perfect if you have a game where you can get by with boxes & circles, but if you want to do something like create physics puzzles in your world (Angry Birds, Crayon Physics, etc.), Matter is the way to go. For example, here’s the slingshot demo from the Matter site (click and drag the blue shape on the left):