Discord-Kaboom-Colyseus

Bare minimum template to developer Discord activity with KaboomJS and Colyseus. Largely based on the react-colyseus template from Discord

1. KaboomJS - A javascript game engine
2. Colyseus - A full-stack state-management library

Setting up your Discord Application

Video Tutorial: https://www.youtube.com/watch?v=k6A2VUbIQio.

Before we write any code, lets follow the instructions here to make sure your Discord application is set up correctly.

Setting up your environment variables

In order to run your app, you will need to create a .env file. Rename the file /example.env to .env and fill it in with the appropriate OAuth2 variables. The OAuth2 variables can be found in the OAuth2 tab on the developer portal, as described here

# Example .env file
# Rename this from example.env to .env
VITE_CLIENT_ID=PASTE_OAUTH2_CLIENT_ID_HERE
CLIENT_SECRET=PASTE_OAUTH2_CLIENT_SECRET_HERE

Running your app locally

As described here, we encourage using a tunnel solution such as cloudflared for local development. To run your app locally, run the following from this directory.

Run once only (set-up):

npm install
cd packages/client
npm install
cd ../server
npm install

Whenever you want to start the development server, run the following command from the root directory. Each command is for one terminal.

npm run dev
cloudflared tunnel --url http://localhost:3000 # from another terminal

Be sure to complete all the steps listed here to ensure your development setup is working as expected.

How to create new scene

To create new scene, you may look at how the lobby scene is structured in /packages/client/src/scenes/lobby.ts The lobby.ts is being imported to /packages/client/src/App.ts

How to add new server-side state?

For a server authoritative game, you may add new property to the player in /packages/server/src/entities/Player.ts. Please take a look at how the server authoritative movement is being implemented in /packages/server/src/rooms/StateHandlerRoom.ts.