Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Hugo-Dz/discord-activity-starter
A stater template for building Discord activities ⚽️
https://github.com/Hugo-Dz/discord-activity-starter
discord game-development gamedev
Last synced: 3 months ago
JSON representation
A stater template for building Discord activities ⚽️
- Host: GitHub
- URL: https://github.com/Hugo-Dz/discord-activity-starter
- Owner: Hugo-Dz
- License: mit
- Created: 2024-05-15T10:30:33.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-15T10:40:38.000Z (6 months ago)
- Last Synced: 2024-05-19T01:54:40.792Z (6 months ago)
- Topics: discord, game-development, gamedev
- Language: TypeScript
- Homepage:
- Size: 5.3 MB
- Stars: 39
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://discord.com/build/embedded-app-sdk)
Built-in multiplayer with Playroom.
## How it's built?
This starter is built with [SvelteKit](https://kit.svelte.dev/) and uses the [Three JS](https://threejs.org/) 3D library and the [Rapier](https://rapier.rs/) physics engine. The multiplayer is done using [Playroom](https://joinplayroom.com/).
Why SvelteKit? Because you ship _fast_ 👇
```svelte
let count = 0;
function increment() {
count += 1;
}
Clicked {count}
{count === 1 ? 'time' : 'times'}
```
## How to run it locally?
### Prerequisites
- [Node.js](https://nodejs.org/en/)
- [Npm](https://docs.npmjs.com/getting-started)
- A Cloudflare account and [Cloudflared](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/) installed
### Run the project
1. Create a new Discord App from your [Developer Portal](https://discord.com/developers/applications) and click on `Getting started` under the `Activities` tab. Then, follow the instructions.
2. Create a new project on [Playroom](https://joinplayroom.com/), select `Discord Activity`, and follow the instructions.
3. Clone this project and install dependencies
```bash
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
```bash
# 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](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/) installed.
7. Get the tunnel URL and put it in the URL Mapping in your Discord App in the [Discord developer portal](https://discord.com/developers/applications)
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](https://kenney.nl/assets/castle-kit) - Consider a donation to Kenney!
- [Discord Activity Tutorial](https://discord.com/developers/docs/activities/building-an-activity#step-1-creating-a-new-app)
- [Discord SDK App Starter](https://github.com/discord/embedded-app-sdk/tree/main/examples/discord-activity-starter)
- [HDRI Skybox texture](https://www.youtube.com/watch?v=_l8B7RdtOsU)
- Add multiplayer to your activity with [Playroom](https://docs.joinplayroom.com/components/discord)
## License
MIT License [Hugo Duprez](https://www.hugoduprez.com/)