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