Screens
Tutorial
Customize how users learn to play.
Customize how users learn to play.
The whole tutorial can be turned on or off. When on, both the text and the animated finger are fully adjustable.
Tutorial Text
| Setting | What It Does |
|---|---|
| Enable | Show or hide the text |
| Text | The instruction wording |
| Text color | Match your brand |
| Position | Where the text sits |
| Scale | Text size |
| Animation | An attention animation from the preset library |
Tutorial Finger
| Setting | What It Does |
|---|---|
| Enable | Show or hide the finger |
| Image | Upload / replace the finger PNG |
| Position | Where the finger points |
| Scale | Finger size |
| Animation | A tap/press animation from the preset library |
Animation Presets
The tutorial text and finger animate using the shared animation preset system — not a single fixed effect. Pick from the preset library and adjust its speed, delay, and loop:
- Emphasis: bounce (the "boing" bouncy attention effect), pulse, pop, wiggle, shake
- Interactive (finger): tap, press, swipe, drag
- Entrance: fade in, scale up, slide in
See the full catalog in Animation & Motion Presets.
Customizing the Tutorial
- Find tutorial settings in the dashboard
- Edit instruction text
- Adjust text styling (color, size)
- Customize the hand/pointer if available
- Preview the tutorial flow
- Save
Tutorial Text Tips
Writing Clear Instructions
| Instead Of | Write |
|---|---|
| "Tap the interactive element to proceed" | "Tap here!" |
| "Swipe in the indicated direction" | "Swipe left" |
| "Select your character" | "Choose a hero" |
Keep It Short
- 3-5 words per instruction
- Action-oriented language
- One action at a time
Use Action Words
- Tap, Swipe, Drag, Hold, Release
- Match, Collect, Destroy, Build
- Avoid technical language
Hand/Pointer Icon
The hand icon shows users where to interact:
| Option | Use Case |
|---|---|
| Tapping hand | Single tap actions |
| Swiping hand | Swipe gestures |
| Dragging hand | Drag and drop |
| Custom icon | Branded pointer |
Customizing the Hand
If available:
- Change hand color/style
- Upload custom pointer image
- Adjust animation speed
- Position for specific targets
Tutorial Flow
Good tutorials follow a pattern:
- Draw attention - Highlight what to do
- Give instruction - Short, clear text
- Show action - Hand demonstrates
- Let user try - Wait for input
- Confirm success - Acknowledge completion
Best Practices
Do
- Keep instructions brief
- Use consistent language
- Match your brand voice
- Test with real users
Don't
- Overwhelm with information
- Use jargon or game-specific terms
- Make tutorials too long
- Assume prior knowledge
Related
- Loading Screen - What comes before
- End Cards - What comes after
- Text & Headlines - Text formatting