• This repository has been archived on 22/Dec/2022
  • Stars
    star
    177
  • Rank 215,985 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Phaser 3 - Real-Time Multiplayer example with Physics (MatterJS and Arcade)


header
Phaser 3 - Real-Time Multiplayer example with Physics

A Real-Time Multiplayer example using Phaser 3 with Physics (MatterJS and Arcade) on a NodeJS server with Express and Socket.io

GitHub package.json version GitHub last commit


⚠️ Note

This example is using @geckos.io/phaser-on-nodejs which is very slow tedious. If you need to run Phaser's Arcade Physics on the Server, I recommend using arcade-physics. I will not update this example anymore.

Play It

This example is running on NodeJS on Heroku (Free Dyno in Europe) which causes the example sometimes to take about 1 minute to load.

  • Play it here - phaser3-multiplayer-example
    It works best if your latency is below 100ms, which should the case if you are located in Europe.

Key Features

  • The physics is entirely calculated on the Server
  • Automatically manages Rooms (new Phaser instances)
  • Physics debugging version
  • A nice Stats page

Geckos.io

Why does this game example not use geckos.io?
Well there are two reasons:

  • Geckos.io did not exist back then.
  • This example is deployed on heroku, which does not allow to forward UDP ports, geckos.io depends on.

Video

Watch it on YouTube

thumbnail

Matter Physics vs Arcade Physics

This example includes 2 different games. One with MatterJS and the other with Arcade. The MatterJS game has only one level. The Arcade one is a simple platformer game with 3 levels.

So in total, you can play 4 different levels. For each level, the server creates a new room, which creates a new Phaser instance, which are completely isolated from each other. There can be up to 4 players per room.

Structure

β”œβ”€β”€ src
β”‚   β”œβ”€β”€ client  # Contains all the code the client will need
β”‚   β”œβ”€β”€ physics # This is for debugging the physics (Arcade and MatterJS)
β”‚   β”œβ”€β”€ server  # Contains the code running on the NodeJS server
β”‚   └── stats   # The stats page will show useful information about the server

How To Use

To clone and run this template, you'll need Git and Node.js (which comes with npm) installed on your computer.

You also need to install some additional packages since this example uses Node-Canvas. See here.

From your command line:

# Clone this repository
$ git clone --depth 1 https://github.com/yandeu/phaser3-multiplayer-with-physics.git phaser3-example

# Go into the repository
$ cd phaser3-example

# Install dependencies
$ npm install

# Start the local development server (on port 3000)
$ npm run dev

# To publish a production build using docker use docker:publish
# This needs docker and docker-compose to be installed on your machine
$ npm run docker:publish

Other Multiplayer Examples

Looking for a simpler multiplayer example? Take a look at Phaser 3 - Multiplayer Game Example.

License

The MIT License (MIT) 2019 - Yannick Deubel. Please have a look at the LICENSE for more details.

More Repositories

1

phaser-project-template

πŸ•ΉοΈ Phaser 3 - Starter Template with TypeScript and webpack.
TypeScript
408
star
2

five-server

⚑ Development Server with Live Reload Capability. (Maintained Fork of Live Server)
TypeScript
155
star
3

phaser-project-template-es6

Phaser 3 - Starter Template with ES6 (ESNext features included) and webpack.
JavaScript
149
star
4

five-server-vscode

⚑ VSCode Extension for Five Server.
TypeScript
121
star
5

phaser3-typescript-platformer-example

Phaser 3 TypeScript Platformer Example
JavaScript
81
star
6

phaser3-matter-car-on-curved-terrain

Phaser 3 + Matter.js: Car on curved terrain crosses a bridge
TypeScript
48
star
7

arcade-physics

Use Arcade Physics without Phaser.
JavaScript
47
star
8

phaser3-react-typescript-example

Phaser 3: with React and TypeScript Example
TypeScript
39
star
9

docker-swarm-visualizer

πŸ‹ A Visualizer for Docker Swarm using the Docker Engine API and Node.js.
TypeScript
35
star
10

phaser3-spine-example

JavaScript
35
star
11

docker-swarm-visualizer-rs

πŸ‹ A Visualizer for Docker Swarm written in Rust.
TypeScript
19
star
12

phaser3-optimal-resolution

JavaScript
18
star
13

phaser3-scaling-resizing-example

Phaser 3 - Scaling/Resizing Example
TypeScript
17
star
14

html2app-template

HTML
17
star
15

express6

πŸ… Modern, fast, unopinionated, minimalist web framework.
TypeScript
16
star
16

five-server-with-php

PHP
14
star
17

node-cli

πŸ–οΈ Build a beautiful Node.js CLI with colors, pre-build elements and optional JSX support.
TypeScript
13
star
18

gitget

πŸ“¦ Clone GitHub repos fast and easy.
TypeScript
11
star
19

ammo-worker-test

JavaScript
10
star
20

three-project-template

Three.js starter template with TypeScript and webpack.
TypeScript
10
star
21

phaser-basic-template

Phaser 3: Basic Starter Template with Intellisense
JavaScript
10
star
22

keyboard

⌨️ Handling of keyboard events.
TypeScript
9
star
23

phaser3-swipeable-level-selection

A very nice swipeable level selection menu for Phaser 3 games.
TypeScript
9
star
24

postgres-browser-proxy

🐘 Query your Postgres Database directly from the Browser.
Rust
8
star
25

react-to-static-or-ssr

A react starter template for creating single page applications, static html files or a server side rendered app.
TypeScript
5
star
26

kronos2-prototype

TypeScript
4
star
27

ionic-react-typescript-starter

Ionic 5 & React - Starter Template written in TypeScript
TypeScript
4
star
28

tauri-webxr-test

Rust
4
star
29

tap

πŸ–±οΈ Handling of user interactions such as mouse, touch and pointer events.
TypeScript
4
star
30

yandeu

3
star
31

events

⚑ Simplified and TypeScripted version of [email protected]
JavaScript
3
star
32

audio

🎡 Audio library for the Web Audio API. (TypeScripted version of Three.js@r126's Audio without Object3D)
TypeScript
3
star
33

handlebars-to-static-or-ssr

Run Handlebars on the Server Side (with node.js and express) or generate Static HTML files.
JavaScript
2
star
34

parse-markdown

TypeScript
2
star
35

docker-php

πŸ‹ A simple PHP environment with Docker for local development.
JavaScript
2
star
36

phaser-phonegap-template

HTML
2
star
37

tiny-http2-server

TypeScript
2
star
38

markdown-mail

πŸ“¬ Turn your Markdown files into Responsive HTML E-Mails.
TypeScript
1
star
39

struct-serval

Rust
1
star
40

www

HTML
1
star
41

wordpress-docker-compose

A simple docker-compose file to spin up WordPress, MariaDB and phpmyadmin.
1
star
42

arcade-physics_dev

JavaScript
1
star
43

video-to-m3u8

HTML
1
star
44

ftp-upload

Rust
1
star
45

nano-jsx-simple-template

JavaScript
1
star
46

npm-template

A simple template for making npm packages.
JavaScript
1
star
47

rust-rocket-mongodb

Rust
1
star
48

nordpress_preview

Dev Repository for nordpress.org
1
star
49

old-phaser-template

JavaScript
1
star
50

tarif590-json

Tarif590 to JSON - Turns "Tarif_590.xlsx" into "tarif590.json".
JavaScript
1
star
51

md-to-book

JavaScript
1
star