Screens
Loading Screen
The first thing users see while your playable ad loads.
The first thing users see while your playable ad loads.
Preloader
The preloader can be turned on or off. When on, it bundles everything below:
| Element | What You Can Change |
|---|---|
| Enable | Show or hide the preloader entirely |
| Background color | Solid background color |
| Background image | A full-screen background image |
| Logo | Image, position, scale |
| Game name | Text, color, size |
| CTA text | A "call to action" line of text |
| Progress bar | Bar and background colors |
Background-image-only option: set a background image and turn off the logo, game name, and progress bar to show just the image while loading.
Background
ColorParameter
| Property | Type | Description | Example |
|---|---|---|---|
| Color value | ColorParameter | Solid background | #1A1A2E |
Background Tips
| Goal | Approach |
|---|---|
| Brand alignment | Use brand primary color |
| Dark theme | #1A1A2E, #0D0D0D, #121212 |
| Light theme | #FFFFFF, #F5F5F5, #FAFAFA |
| High contrast | Ensure logo/text readable against it |
Loading Icon
SpriteParameter Properties
| Property | Type | Description | Example |
|---|---|---|---|
spriteFrame | ImageParameter | Spinner/indicator image | Upload PNG |
spriteColor | ColorParameter | Icon color tint | #FFFFFF |
enable | BooleanParameter | Show or hide | true |
scale | CoordinatesParameter | Size | {x: 1.0, y: 1.0} |
Loading Indicator Types
| Type | Description | When to Use |
|---|---|---|
| Spinner | Rotating circular icon | Standard, always appropriate |
| Progress bar | Filling horizontal bar | When actual progress is trackable |
| Animated icon | Custom branded animation | Strong brand identity |
| None | Just logo/background | Minimal, fast-loading ads |
Game Name
LabelParameter Properties
| Property | Type | Description | Example |
|---|---|---|---|
string | TextParameter | Game title text | "My Game" |
labelColor | ColorParameter | Text color | #FFFFFF |
fontSize | NumberParameter | Text size | 48 |
isBold | BooleanParameter | Bold weight | true |
enable | BooleanParameter | Show or hide | true |
Logo
SpriteParameter Properties
| Property | Type | Description | Example |
|---|---|---|---|
spriteFrame | ImageParameter | Logo image | Upload PNG (transparent) |
spriteColor | ColorParameter | Color tint | #FFFFFF (no tint) |
position | CoordinatesParameter | Location | {x: 0, y: 100} |
scale | CoordinatesParameter | Size | {x: 1.0, y: 1.0} |
enable | BooleanParameter | Show or hide | true |
Logo Tips
| Requirement | Specification |
|---|---|
| Format | PNG with transparent background |
| Size | 512 x 512 pixels minimum |
| File size | Under 500KB |
Best Practices
First Impressions
| Element | Recommendation |
|---|---|
| Background | Brand color or simple solid |
| Logo | Centered, appropriately sized |
| Game name | Clear, readable font |
| Loading indicator | Subtle but visible |
What to Avoid
| Issue | Problem |
|---|---|
| Cluttered layout | Overwhelms before gameplay |
| Hard-to-read text | Frustrates users |
| Generic/default look | Misses branding opportunity |
| Mismatched colors | Looks unprofessional |
Visual Hierarchy
┌─────────────────────────────────┐
│ │
│ [ LOGO ] │ ← Primary focus
│ │
│ Game Name │ ← Secondary
│ │
│ ◌ │ ← Loading indicator
│ │
└─────────────────────────────────┘Loading Screen Flow
User taps ad → Loading screen appears → Assets load → Gameplay starts
↑
Your branding
opportunityConfiguration Example
| Component | Value |
|---|---|
| Background | #1A1A2E (dark blue) |
| Logo | Your brand logo (PNG, transparent) |
| Game Name | "My Awesome Game" |
| Game Name Color | #FFFFFF (white) |
| Loading Icon | Spinner, #FFFFFF tint |
Entrance Video
You can play a video at the very beginning of the playable, before gameplay starts — a cinematic hook or brand intro.
| Setting | What It Does |
|---|---|
| Video | The clip to play at startup |
Keep it short so users reach gameplay quickly. See File Formats for video guidance.
Related
- Tutorial — What users see next
- End Cards — Final screens
- Camera & Intro — The zoom-in intro sequence
- Logos & Icons — Logo specifications
- Colors — Color consistency