Studio: Splash Screen

Studio: Splash Screen

This project demonstrates how to create a tap-to-begin system with a loading screen, using state machines to manage transitions between asset loading, onboarding, and experience readiness. It also includes a simple rotating animation triggered after onboarding.

Components

start-screen

This component manages the loading and onboarding process, displaying a progress bar during asset loading and a “Tap to Begin” message once onboarding is ready. It transitions through three states: loading, onboarding, and experience-ready.

Functionality

When the start-screen component is added to an entity:

1. Displays a loading progress indicator.
2. Monitors asset loading progress using ecs.assets.getStatistics().
3. Shows an onboarding message (“Tap to Begin”) after assets finish loading.
4. Waits for user interaction (SCREEN_TOUCH_START or click) to transition to the experience-ready state.
5. Dispatches a global experience-ready event to signal that the onboarding process is complete.

Schema

• progressText: ecs.eid - Reference to the progress text UI element.
• messageText: ecs.eid - Reference to the onboarding message UI element.
• beginMessage: ecs.string - Message displayed when onboarding is ready to begin (default: “Tap to begin”).

Code Highlight

example

This component listens for the global experience-ready event and starts a rotating animation when onboarding is complete.

Functionality

1. Responds to the experience-ready event by initiating a rotation animation.
2. Applies the animation to the associated entity with configurable parameters.

Code Highlight

Additional Features

• The loading screen dynamically updates progress as assets load.
• Onboarding is interactive, requiring user input to proceed.
• Smooth transition to the experience with a welcoming rotational effect.