twix/raylib
1
0
Fork 0
mirror of https://github.com/raysan5/raylib.git synced 2025-12-25 10:22:33 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added documentation for this https://discord.com/build/embedded-app-sdk but specific to Raylib.

Ben McAvoy
2024-03-18 21:53:33 +00:00
parent e2d6d10014
commit 20ad81280e
1 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
Discord-activities-with-Raylib.md Normal file

@ -0,0 +1,99 @@
**NOTE: this guide assumes you already have setup and built a Raylib project and assumes you have these files from emscriptem (possibly different file stems):** (NOTE: [guide here](https://github.com/raysan5/raylib/wiki/Working-for-Web-(HTML5)))
- `game.js`
- `game.wasm`
Official documentation can be found [here](https://discord.com/developers/docs/activities/building-an-activity).
## Discord setup
First create a discord application on [Discord](https://discord.com/developers/applications) and get it's Application ID and Bot token. These will be important later so put them somewhere safe.
## Template setup
You next steps are to download the template like so:
```sh
git clone git@github.com:discord/getting-started-activity.git raylib-activities
cd raylib-activities
cp example.env .env
```
You will notice some fields in your `.env` file that has been newly created. You can fill these in with your Application ID for `CLIENT_ID` and your bot token for `CLIENT_SECRET`.
You can now enter the `client` directory and set it up like so:
```sh
cd client
npm install
npm run dev
```
(Note: replace `npm` here with your preferred tool if you have manually installed an alternative)
You should now see a basic "Hello, World!" app when you go to [the server](http://localhost:5173) in your browser. Now stop your dev command.
In your `raylib-activities/client/index.html` replace with this content:
```html
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Raylib activities</title>
<style>
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: block;
border: none;
background-color: black;
</style>
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
<script>
var Module = {
canvas: document.getElementById("canvas"),
};
</script>
<script async type="text/javascript" src="game.js"></script>
</body>
</html>
```
## File management
You will need to copy `game.js` and `game.wasm` to the `raylib-activites/client` directory. You can also remove files such as `rocket.png`, `main.js` and `style.css`.
This should be your ideal file structure for `raylib-activities/client`:
```
client git:(main) ✗ tree -I node_modules
.
├── game.js
├── game.wasm
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js
1 directory, 6 files
```
You can now start your dev server with `npm run dev` and check that it is working [in your browser](http://localhost:5173/).
## Tunnelling
It's time for tunnelling (unless you port forward). We can do this with services such as:
- `cloudflared` (recommended by discord)
- `ngrok`
- `serveo` (recommended by me)
The reason I recommend Serveo for such a temporary purpose is because you don't have to install anything to use it as it uses `ssh`.
So, let's tunnel, you can either use cloudflare with `cloudflared tunnel --url http://localhost:5173` after installing their tool.
Or with serveo (my recommendation) `ssh -R 80:localhost:5173 serveo.net`.
Either way, these tunnels should give you some form of URL that you can use, e.g. `https://1588ccfc75808e5dba340d02f1624031.serveo.net` or `https://funky-jogging-bunny.trycloudflare.com`.
## Setting URL mappings
Now, go back to discord applications and go to `ACTIVITES > Getting started` and press `Get started`. Then go to `ACTIVITIES > URL Mappings` and copy paste that URL you got from the tunnel (or your alternative solution, e.g. port forwarding) and put it in `TARGET`.