Skip to content

Hugo-Dz/discord-activity-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Discord Activity Starter

Discord Activity Screenshot

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

Enable Debug Mode in Scene.svelte to see yourself as a static object

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

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.

Create a Discord Activity

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

Create a Discord Activity with Playroom

  1. Clone this project and install dependencies
    git clone https://github.com/Hugo-Dz/discord-activity-starter.git
    cd discord-activity-starter/client
    npm install
  1. 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.

  2. Launch the app locally

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

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

Cloudflare Tunnnel URL Discord Developer Portal

  1. Turn the developer mode ON in Discord

Discord Dev Mode settings

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

Cloudflare Tunnnel URL Discord Developer Portal

Resources

License

MIT License Hugo Duprez

About

A stater template for building Discord activities ⚽️

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published