SDK
Settings and accessibility
The player frame has its own pause and sound buttons, and players bring their own system settings. Your game should follow both.
Pause and sound
const env = await OpenArcade.init();
setMuted(env.muted);
setSitePaused(env.paused);
OpenArcade.onHost(({ paused, muted }) => {
if (typeof muted === 'boolean') setMuted(muted);
if (typeof paused === 'boolean') setSitePaused(paused);
});- Muted means all sound: music, effects and voice. Keep your own volume settings, but play nothing while the site says muted.
- Paused is reported when the player presses the site's pause button, the tab is hidden, a dialog is open over the game, the phone needs rotating, or an ad is playing. Stop the simulation and timers, and do not count the time against the player.
- Keep your own pause menu as well, and resume only when neither the site nor your menu is paused.
- Games without the SDK show "Sound & pause: in-game" in the toolbar instead of the site's buttons, and the reviewer checks that the game has its own controls.
Settings
getSettings() returns the current values at once. onSettingsChange(fn) calls fn with all values when one changes.
| Setting | Values | What to do |
|---|---|---|
muted | true / false | Silence all audio |
reducedMotion | true / false | The player's system asks for less motion. Turn off screen shake, flashing, parallax and large camera moves, or offer a setting that does |
locale | e.g. 'en-GB', 'pt-BR' | Format numbers and dates. Choose a translation if you have one |
language | e.g. 'en', 'pt' | The language part of locale |
disableChat | true / false | When true, offer no free-text chat. See chat rules |
isMobile | true / false | A touch device. Show touch controls |
device | 'desktop', 'mobile', 'tablet' | For layout and control choices |
orientation | 'any', 'landscape', 'portrait' | The orientation you declared |
getSystemInfo() adds the operating system, browser, screen size and pixel ratio. Use these for layout and controls, never to refuse a browser that works.
Accessibility
Reviewers check these. Not every game can meet every point, but each one you meet makes the game playable for more people.
- Controls: describe every control in How to play. Support remapping or at least two layouts (arrow keys and WASD) on desktop.
- Text: at least 16 CSS pixels for body text at the default frame size, with strong contrast against the background.
- Colour: do not use colour alone to show important information, such as which team a player is on.
- Flashing: nothing may flash more than three times a second.
- Motion: respect
reducedMotion. - Sound: important events need a visual cue too, because many players play muted.
- Time: avoid short time limits on menus and dialogs. Let players pause at any point in single-player games.
- Focus: the game should respond to the keyboard once the player clicks into it, and keys used by the game must not scroll the page.
- Screen size: the frame can be resized at any time, including into fullscreen. Lay out again on
resize.
Language
The site is in English. If your game is in another language, write the description in that language and say which languages it supports.