Navigation

Published on 7th May 2024

This tutorial was written to go with the official Phaser Discord Multiplayer Template. It is meant to be used as a starting point for creating multiplayer games on Discord with Colyseus and Phaser, utilizing their new Embedded App SDK. It helps you seamlessly integrate custom games and activities into your Discord server, fostering community engagement, interaction, and fun.

If you haven't created a Discord activity before, we have a comprehensive tutorial that covers the process. It includes the steps required to create a Discord App and get your Phaser game running as an activity within it. It's essential you go through this first, as the rest of this tutorial is written based on the assumption that you have.

If you are new to Colyseus, you can follow their learn and docs sections for more info. Our multiplayer example is quite simple, so you'll need to spend time learning the way in which Colyseus works for more complex games.

Installation

To get started, clone the Phaser Colyseus Discord Project Template:

git clone git@github.com:phaserjs/discord-multiplayer-template.git

Set OAuth2 Credentials

Once cloned, you need to set your OAuth2 credentials in the .env file.

Rename example.env to .env.

And change VITE_DISCORD_CLIENT_ID and _DISCORD_CLIENTSECRET variables as stored in your Discord App Settings -> OAuth 2.

VITE_DISCORD_CLIENT_ID=1234567890
DISCORD_CLIENT_SECRET=ns1234567890dc

In our template, both client and server use the same .env file. For production deployment, you will need to have seperate .env files for both client and server. Place them in the relevant directories. This will aid when you release on different platforms, such as Vercel or Netlify for the client and Colyseus Cloud, AWS or DigitalOcean for the server.

Client Installation:

cd packages/client
npm i

Server Installation:

cd packages/server
npm i

Let's return to the root folder, and run both the client and server at the same time:

cd ../..
npm run dev

Note that you will need to install pnpm to run client/server commands in parallel.

It will run both client and server through http://localhost:3000, and our API calls will be made on http://localhost:3001.

Testing The Project

Firstly, we need to change NODE_ENV environment variable to production in the .env file.

NODE_ENV='production'

Now, let's change our client port from 3000 to 443 in the packages/client/vite.config.ts.

Finally, to test our game as a Discord Activity, we need to set up a public proxy. For this tutorial, we will be using cloudflared. Our command is also ready for this. Don't forget that you first need to npm run dev as described above, then run this command:

npm run tunnel

It will start channeling localhost to public.

cloudflared

Copy that generated public URL to Discord App -> URL Mappings and add it for the "/" root directory.

And voila! You are ready to test our activity!

game

Have Fun!

This completes the process of running a multiplayer Phaser game on Discord.

At the time of writing, this Discord feature is still in Developer Preview, which means there are some limitations in place with regard to how large the server can be and so on. Please refer to the official Discord documentation for the most up-to-date information.

Please see our Discord Multiplayer Project Template for further instructions on configuring and using the project template.