Skip to content

Commit 081191f

Browse files
Update rich presence image examples with redesigned activity cards (#7139)
* Update rich presence image examples with redesigned activity cards * Update game sdk table * Fix typos and better badge descriptions * Update docs/rich_presence/Best_Practices.md Co-authored-by: Suspense <[email protected]> * Update assets * More asset updates * Updated actionable example * Remove references to spectate * Fix table formatting --------- Co-authored-by: Suspense <[email protected]>
1 parent 0860e4d commit 081191f

17 files changed

+26
-41
lines changed

docs/rich_presence/Best_Practices.md

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ The data in your players’ profiles is the first thing that others on Discord w
2626

2727
###### Examples
2828

29-
| Bad | Good |
30-
|:--------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------:|
31-
| ![A rich presence string that is too long and does not fit on one line](rp-long-strings.png) | ![Screenshot of a good rich presence string that is concise and easy to read](rp-short-strings.png) |
32-
| The data wraps onto multiple lines. It’s repetitive, slower to read, and messy. | The data all fits on one line per string. Clean! |
29+
![Example of a good rich presence string that is concise and easy to read compared to a bad string that is too long to fit on one line](rp-short-strings.png)
3330

3431
### Make it Actionable!
3532

@@ -39,10 +36,7 @@ The data in your players’ profiles is the first thing that others on Discord w
3936

4037
###### Examples
4138

42-
| Bad | Good |
43-
|:----------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------:|
44-
| ![Screenshot of a rich presence string reading "Rank 9999"](rp-non-actionable.png) | ![Screenshot of a good rich presence string shows a game mode of "Ranked: Control Point" and that the user is in a queue](rp-actionable.png) |
45-
| While Rank 9999 is impressive, it doesn’t present any actionable data for their friends. | This player is in queue for something I want to play. Let's ask to join that open spot! |
39+
![Examples of good rich presence strings that show a game mode of "Ranked: Control Point" and that the user is "In Queue (2 of 3)" compared to a bad string that reads "Rank 9999" ](rp-actionable.png)
4640

4741
### Use ALL of the fields (where applicable)!
4842

@@ -52,10 +46,7 @@ The data in your players’ profiles is the first thing that others on Discord w
5246

5347
###### Examples
5448

55-
| Bad | Good |
56-
|:-----------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------:|
57-
| ![Screenshot of a rich presence string that is hard to read at a glance](rp-not-all-fields.png) | ![Screenshot of a good rich presence that takes advantage of storing less important information in tooltips](rp-all-fields.png) |
58-
| The map name takes up space and makes the player's status harder to read at a glance. | Moving the name of the map to the tooltip makes the data cleaner and frees up space for the score. |
49+
![Example of a good rich presence string that takes advantage of storing less important information in tooltips compared to a bad string that is hard to read at a glance](rp-all-fields.png)
5950

6051
### Have interesting, expressive art!
6152

@@ -66,10 +57,7 @@ The data in your players’ profiles is the first thing that others on Discord w
6657

6758
###### Examples
6859

69-
| Bad | Good |
70-
|:-------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------:|
71-
| ![Screenshot of a rich presence icon that is too dark to see clearly](rp-bad-art.png) | ![Screenshot of a rich presence icon that is clear and detailed](rp-good-art.png) |
72-
| The image is dark and unfocused. Highly-detailed images can be hard to see. | This image is bright and matches the details. Let's help! |
60+
![Example of a good rich presence icon that is clear and detailed compared to a bad icon that is too dark to see clearly](rp-good-art.png)
7361

7462

7563
## Launch Checklist
@@ -97,7 +85,7 @@ Ready to launch a Rich Presence integration for your game? If so, we recommend l
9785
#### Joining
9886

9987
> info
100-
> Since all Activities presence data has a **Join Activity** button, Join Invites are only applicable when building with the [Game SDK](#DOCS_RICH_PRESENCE_USING_WITH_THE_GAME_SDK)
88+
> Since all Activities presence data has a **Ask to Join** button, Join Invites are only applicable when building with the [Game SDK](#DOCS_RICH_PRESENCE_USING_WITH_THE_GAME_SDK)
10189
10290
- Have you successfully implemented join invites for your game if applicable?
10391
- Does the state of the invite properly represent the party/group in-game with regards to:

docs/rich_presence/Using_with_the_Embedded_App_SDK.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The rest of the guide assumes you've already developed an [app](#DOCS_QUICK_STAR
1717

1818
### Default Rich Presence Data
1919

20-
By default, when a user is connected to your Activity, the app's icon will appear on their profile. If the user viewing the profile has the ability to join, a "Join Activity" button will be displayed as well.
20+
By default, when a user is connected to your Activity, the app's icon will appear on their profile. If the user viewing the profile has the ability to join, an "Ask to Join" button will be displayed as well.
2121

2222
![Example of default Rich Presence data for an Activity](default-presence-activities.png)
2323

@@ -32,7 +32,7 @@ Now let's see what custom presence data can look like when a user joins your Act
3232
A few small things to note about the above image:
3333
1. `large_image` and `small_image` are both in the `assets` object, which you can see below in the [table below](#DOCS_RICH_PRESENCE_USING_WITH_THE_EMBEDDED_APP_SDK/activity-partial-object). They're labeled with the object's keys to make it more clear how they appear in a Discord profile.
3434
2. You can't set App Name when setting presence—it's always the name configured in your [app's settings](https://discord.com/developers/applications).
35-
3. Depending on the `type` you set when updating presence, the behavior and layout for some fields (particularly `small_image` and `large_text`).
35+
3. The state `(1 of max_party)` badge will only render when a party field is provided. Otherwise, state will be shown in a line of text below details.
3636

3737
## Updating Presence
3838

@@ -108,13 +108,13 @@ To create this sort of Rich Presence, here is what the `setActivity()` code woul
108108
await discordSdk.commands.setActivity({
109109
activity: {
110110
type: 0,
111-
state: 'Traveling with a Group',
112-
details: 'in Mainframe Map',
111+
details: 'Traveling with a group',
112+
state: 'In Mainframe',
113113
assets: {
114114
large_image: 'main-game-image',
115115
large_text: 'in a group',
116116
small_image: 'map-mainframe',
117-
small_text: 'in Mainframe'
117+
small_text: 'in mainframe'
118118
},
119119
timestamps: {
120120
start: 1723137832

docs/rich_presence/Using_with_the_Game_SDK.mdx

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ Before we dig in, it's helpful to understand what Rich Presence data you can set
1818
![Graphical representation of the legend for rich presence details](rp-legend.png)
1919

2020
<Collapsible title="Table with text representation of the fields above" icon="view">
21-
| location | field name | notes |
22-
|----------------------------------------|----------------|-----------------------------------------------------------------------------|
23-
| First row below title | details | |
24-
| Second row below title | state | |
25-
| Second row below title | partySize | In parenthesis next to the `state`, first number in the format `(1 of 10)` |
26-
| Second row below title | partyMax | In parenthesis next to the `state`, second number in the format `(1 of 10)` |
27-
| Third row below title | startTimestamp | Converted to a format such as `01:33 elapsed` |
28-
| First button at the bottom | joinSecret | Button has the text "Ask to join" |
29-
| Second button at the bottom | spectateSecret | Button has the text "Spectate" |
30-
| Large image to the left of any content | largeImageKey | Four rows high, includes the title but not the bottom buttons |
31-
| Small image to the left of any content | smallImageKey | Small icon inset on the bottom right of the `largeImageKey` |
21+
| location | field name | notes |
22+
|----------------------------------------|----------------|----------------------------------------------------------------------------|
23+
| First row below title | details | |
24+
| Second row below title | state | If provided with no `partySize` or `partyMax` |
25+
| First badge in last row below title | startTimestamp | Converted to a `mm:ss` format such as `12:01` |
26+
| Second badge in last row below title | state | If provided with a `partySize` and `partyMax` |
27+
| Second badge in last row below title | partySize | In parenthesis next to the `state`, first number in the format `(1 of 4)` |
28+
| Second badge in last row below title | partyMax | In parenthesis next to the `state`, second number in the format `(1 of 4)` |
29+
| Button at the bottom | joinSecret | Button has the text **Ask to Join** |
30+
| Large image to the left of any content | largeImageKey | Four rows high, includes the title but not the bottom buttons |
31+
| Small image to the left of any content | smallImageKey | Small icon inset on the bottom right of the `largeImageKey` |
3232

3333
Note that this layout may be subject to change without warning. This information is only provided to help those with
3434
impaired eyesight to understand the potential layout of this information in a user interface.
@@ -87,10 +87,7 @@ Our code sample in this section is based on the data from the example from befor
8787

8888
![Example of presence data with buttons](game-sdk-presence-example.png)
8989

90-
This example contains two buttons—the **Ask to Join** button and the **Spectate** button. The **Ask to Join** button will be covered more in the following sections, but if you don't want it included, you can remove the `Party` and `Secret` fields.
91-
92-
> warn
93-
> While the example shows a **Spectating** button, support for spectating was removed and you can ignore references to it.
90+
The **Ask to Join** button will be covered more in the following sections, but if you don't want it included, you can remove the `Party` and `Secret` fields.
9491

9592
<Collapsible title="Example calling UpdateActivity function" icon="code" open>
9693

@@ -178,13 +175,13 @@ activityManager.OnActivityJoinRequest += user =>
178175
```
179176
</Collapsible>
180177

181-
The Ask to Join request persists for 30 seconds after the request is received. Therefore, keep these two points in mind:
178+
The **Ask to Join** request persists for 30 seconds after the request is received. Therefore, keep these two points in mind:
182179
- Ensure you call [`RunCallbacks()`](#DOCS_DEVELOPER_TOOLS_GAME_SDK/runcallbacks) as frequently as possible to ensure your game client is up to date with any data from Discord
183-
- If the player is in a state in which they cannot interact with an Ask to Join requestlike in the middle of a matchyou should not send `ActivitySecrets.Join` in the presence payload
180+
- If the player is in a state in which they cannot interact with an **Ask to Join** requestlike in the middle of a matchyou should not send `ActivitySecrets.Join` in the presence payload
184181

185182
## Secrets
186183

187-
Security is of the utmost importance to us here at Discord, and we know it is for you, too. That's why we want to make sure that you properly understand `ActivitySecrets.Join` so that your game data is safe and secure over the wire.
184+
Security is of the utmost importance to us here at Discord, and we know it is for you, too. That's why we want to make sure that you properly understand `ActivitySecrets.Join` so that your game data is safe and secure over the wire.
188185

189186
To keep security on the up and up, Discord requires that you properly hash/encode/encrypt/put-a-padlock-on-and-swallow-the-key-but-wait-then-how-would-you-open-it your secrets.
190187

@@ -207,7 +204,7 @@ Throughout development, make sure you have your `errored()` and `disconnected()`
207204

208205
The application that connected _first_ is displayed.
209206

210-
However, invite functionality across multiple connected applications now works no matter which app is display on a user's profile. For example, if you are hosting a Spotify listening party, playing Game A that allows you to send Join invites, and playing Game B that allows you to send Spectate invites, you'll be able to send invites to all three simultaneously!
207+
However, invite functionality across multiple connected applications now works no matter which app is display on a user's profile. For example, if you are hosting a Spotify listening party and playing Game A that allows you to send **Ask to Join** invites, you'll be able to send invites to both simultaneously!
211208

212209
#### Q: What if someone looking at my profile or an invite doesn't own the game?
213210

-76.4 KB
Loading
-57.3 KB
Loading
-61.9 KB
Loading

images/game-sdk-presence-example.png

5.88 KB
Loading

images/rich-presence-examples.png

-66.7 KB
Loading

images/rp-actionable.png

39.6 KB
Loading

images/rp-all-fields.png

39.5 KB
Loading

0 commit comments

Comments
 (0)