[Phaser 3 + Matter.js] Car on a curved terrain crosses a bridge


#1

Phaser 3 + Matter.js example

A car on a curved terrain crosses a bridge

Game

You can play the game here and view it source code on github. Hope you like it and can use it for your own projects :slight_smile:

myimage

About

Last week I started to read a bit about the physics engine Matter.js which is integrated in Phaser3. The only physics engine I used before was Arcade. But I wanted to know how to make a game like Hill Climb Racing, so I was forced to learn Matter. Unfortunately there where not many examples and nearly no TypeScript type definitions in Phaser.d.ts.

Reading the source code of some classes (especially Body, Bodies and Composites) of Matter and the Phaser3-docs helped me the most. And after two days of reading and try and failures, I managed to make the game work.

The mainScene takes a while to start and to restart. This is because I use Matter.Svg.pathToVertices to transform a SVG Path to an array of vectors at runtime. In a production game, I probably would only include the array of vectors in the game.