Artwork, sprite sheets and sound
This page is for designers and marketers preparing artwork for a campaign. It covers the file types you can use, how to lay out a sprite sheet, and where the files come from.
Every game works with no artwork at all. Any slot you leave empty is drawn with simple built-in shapes and plain colours, so you can launch a campaign first and add art later. Each game’s page lists its slots and what is drawn in their place.
Where art comes from
Section titled “Where art comes from”Artwork comes from your organisation’s Media library. In any image or sprite
sheet field on the Config tab, pick a file from the library, or paste the
address of a file you host yourself. A pasted address must start with
https://. Anything in the library can be used by any campaign.
File types and sizes
Section titled “File types and sizes”| Kind | Formats | Largest file |
|---|---|---|
| Images | PNG, JPEG, WebP, GIF | 8 MB |
| Audio | MP3, Ogg, WAV | 16 MB |
| Lottie animations | JSON | 2 MB |
| Video | MP4, WebM | 50 MB |
Games use images, sprite sheets and audio. Lottie animations and video are not used inside the games themselves.
Sprite sheets
Section titled “Sprite sheets”A sprite sheet is one image holding every frame of an animation, laid out as a single horizontal strip, left to right, all frames the same size. Use one for anything that moves or needs a transparent shape, such as a character, a coin or a balloon.
When you turn on a sprite sheet field, you fill in:
| Field | What it means | Allowed values |
|---|---|---|
| Image | The strip itself. | An image from the media library |
| Frame width | The width of one frame, in pixels. | Above 0, up to 4,096 |
| Frame height | The height of one frame, in pixels. Usually the height of the image. | Above 0, up to 4,096 |
| Frames | How many frames the strip holds. | 1 to 64 |
| Playback rate | Frames per second. Leave it empty for a still image. | 1 to 60 |
Frames are counted from 0. Frame n starts at n × frame width from the left edge, so in a strip with a frame width of 64, frame 0 starts at 0, frame 1 at 64 and frame 2 at 128. The image’s full width is normally the frame width times the number of frames.
Example
Section titled “Example”A coin that spins in 8 frames, each 64 by 64 pixels:
- Export one PNG, 512 pixels wide and 64 pixels high, with the 8 frames side by side.
- Set Frame width to 64, Frame height to 64 and Frames to 8.
- Set Playback rate to 12 for a smooth spin.
For a still picture in a sprite sheet slot, use an image of one frame, set Frames to 1, and leave Playback rate empty.
Pop It, Teacups, Dodgem, Tile Swap and Snow Trail play sound; each lists its sound slots on its own page. Choose sounds in the Sounds section of the campaign’s Config tab, which only offers sound files from your media library and lets you play each one before you save. Players with sound on download the sounds you choose (music when the game starts), so keep music short and small. Players who have muted download none of them. Use MP3 for the widest browser support. Music loops for as long as the run lasts, so make the end of the track join cleanly to its start. Sounds start after the player’s first tap, and players can turn sound off with the mute button. A game with no sounds set plays silently.