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

Examples
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.

8 Likes
2

Just made a huge update. It’s now a PWA and uses WebGL 2, TextureAtlas and a better optimized dynamic terrain.

localhost_8080_%20(1)

Hope you :heart: it.

1 Like
3

This is quite impressive! Nicely done!

1 Like
4

cool!

Pretty hard to play on desktop. Have you thought about adding keyboard input handlers?

5

Nice graphics how did you do that? can I have a sample code? Thanks

6

I have already posted the link to the source code.