Hugo-Dz / discord-activity-starter

A stater template for building Discord activities ⚽️

Discord Activity Starter

What is this?

This is a starter template for building Discord activities. It comes with all you need to create 3D activities, physics and multipayer included ⚡️

Activities are multiplayer games and social experiences in Discord. An Activity is a web application hosted in an iframe that can run within the Discord client on desktop, web, or mobile. The Embedded App SDK handles the communication between Discord and your iframed application.

Learn more about Discord activities

Built-in multiplayer with Playroom.

How it's built?

This starter is built with SvelteKit and uses the Three JS 3D library and the Rapier physics engine. The multiplayer is done using Playroom. Why SvelteKit? Because you ship fast 👇

    <script>
        let count = 0;

        function increment() {
            count += 1;
        }
    </script>

    <button on:click={increment}>
        Clicked {count}
        {count === 1 ? 'time' : 'times'}
    </button>

How to run it locally?

Prerequisites

• Node.js
• Npm
• A Cloudflare account and Cloudflared installed

Run the project

1. Create a new Discord App from your Developer Portal and click on Getting started under the Activities tab. Then, follow the instructions.

2. Create a new project on Playroom, select Discord Activity, and follow the instructions.

3. Clone this project and install dependencies

    git clone https://github.com/Hugo-Dz/discord-activity-starter.git
    cd discord-activity-starter/client
    npm install

4. In the client folder, open the .env file and add your Playroom Game ID. You can find it in your Playroom project, under the Game Overview tab.

5. Launch the app locally

    # In the client folder
    npm run dev

6. In another terminal, run cloudflared tunnel --url http://localhost:5173 to create a tunnel for the client app. You need to have Cloudflared installed.

7. Get the tunnel URL and put it in the URL Mapping in your Discord App in the Discord developer portal

8. Turn the developer mode ON in Discord

9. Launch the Activity! Note: You have to be in a voice Channel.

Resources

• 3D Asset used - Consider a donation to Kenney!
• Discord Activity Tutorial
• Discord SDK App Starter
• HDRI Skybox texture
• Add multiplayer to your activity with Playroom

License

MIT License Hugo Duprez