PlayableLabs Docs
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:

ElementWhat You Can Change
EnableShow or hide the preloader entirely
Background colorSolid background color
Background imageA full-screen background image
LogoImage, position, scale
Game nameText, color, size
CTA textA "call to action" line of text
Progress barBar 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

PropertyTypeDescriptionExample
Color valueColorParameterSolid background#1A1A2E

Background Tips

GoalApproach
Brand alignmentUse brand primary color
Dark theme#1A1A2E, #0D0D0D, #121212
Light theme#FFFFFF, #F5F5F5, #FAFAFA
High contrastEnsure logo/text readable against it

Loading Icon

SpriteParameter Properties

PropertyTypeDescriptionExample
spriteFrameImageParameterSpinner/indicator imageUpload PNG
spriteColorColorParameterIcon color tint#FFFFFF
enableBooleanParameterShow or hidetrue
scaleCoordinatesParameterSize{x: 1.0, y: 1.0}

Loading Indicator Types

TypeDescriptionWhen to Use
SpinnerRotating circular iconStandard, always appropriate
Progress barFilling horizontal barWhen actual progress is trackable
Animated iconCustom branded animationStrong brand identity
NoneJust logo/backgroundMinimal, fast-loading ads

Game Name

LabelParameter Properties

PropertyTypeDescriptionExample
stringTextParameterGame title text"My Game"
labelColorColorParameterText color#FFFFFF
fontSizeNumberParameterText size48
isBoldBooleanParameterBold weighttrue
enableBooleanParameterShow or hidetrue

SpriteParameter Properties

PropertyTypeDescriptionExample
spriteFrameImageParameterLogo imageUpload PNG (transparent)
spriteColorColorParameterColor tint#FFFFFF (no tint)
positionCoordinatesParameterLocation{x: 0, y: 100}
scaleCoordinatesParameterSize{x: 1.0, y: 1.0}
enableBooleanParameterShow or hidetrue

Logo Tips

RequirementSpecification
FormatPNG with transparent background
Size512 x 512 pixels minimum
File sizeUnder 500KB

Best Practices

First Impressions

ElementRecommendation
BackgroundBrand color or simple solid
LogoCentered, appropriately sized
Game nameClear, readable font
Loading indicatorSubtle but visible

What to Avoid

IssueProblem
Cluttered layoutOverwhelms before gameplay
Hard-to-read textFrustrates users
Generic/default lookMisses branding opportunity
Mismatched colorsLooks 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
              opportunity

Configuration Example

ComponentValue
Background#1A1A2E (dark blue)
LogoYour brand logo (PNG, transparent)
Game Name"My Awesome Game"
Game Name Color#FFFFFF (white)
Loading IconSpinner, #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.

SettingWhat It Does
VideoThe clip to play at startup

Keep it short so users reach gameplay quickly. See File Formats for video guidance.


On this page