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.

Install Both Client & Server:

npm i

This will install both the client and the server packages without reaching into the packages/client or packages/server folders.

Run The Client & Server:

npm run dev

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

Our client will be rendered on http://localhost:3000, and our API calls from the Discord and Colyseus multiplayer WebSockets events will be running on http://localhost:3001. And once we're going for a real test on the Discord, our 3001 port will be Express server to render our client build, too.

Testing The Project

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

NODE_ENV='production'

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.

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