---
sidebar_position: 4
---

# Loading Scene

This is where the actual preload asset downloading begins, accompanied by a progress bar to indicate loading status.

In addition to loading assets, Hyper Slot Game also uses this scene to showcase the game’s main features through in-game advertisements.

![Loading Roma Legacy](./img/loading-roma-legacy.png)

## Loading Hyper vs New Loading Hyper

In Hyper Slot games, there are 2 styles of loading scene:

- **loading-hyper**: The default loading setup. Displays all advertising features on a single screen, with an option to automatically launch the game once all preload assets are downloaded.
- **new-hyper-loading**: A newer loading style that presents advertising features in a paginated layout. This version does not include an option to start the game automatically.

|                  loading-hyper                        |                       new-loading-hyper                         |
|-------------------------------------------------------|-----------------------------------------------------------------|
|![loading-hyper](./img/hyper-loading-lucky-rooster.png)|![new-loading-hyper](./img/new-hyper-loading-gates-of-wealth.png)|

## Setup loading scene

To set up the loading scene, use the appropriate command from the `P4F Editor` package: `loading-hyper` or `new-loading-hyper`, depending on your requirements.

![Loading Hyper](./img/hyper-loading.png) ![New Loading Hyper](./img/new-hyper-loading.png)

Running either command will generate a complete loading scene, including both landscape and portrait layouts.

Once the scene is generated, you can customize it by positioning UI elements and assigning the appropriate assets.

![Loading Node Tree](./img/loading-node-tree.png)

One of the best features of these commands is that they can also automatically load all required assets for the loading scene.

If you run the command without setting up the assets, you’ll see an empty loading scene like this:

![Loading Raw Scene](./img/loading-raw-scene.png)

However, with a proper asset setup, the loading scene will appear fully populated, like this:

![Loading Full Assets Scene](./img/loading-full-assets-scene.png)

:::info
For detailed guidelines on how to set up loading assets, refer to the [Game Asset Structure](../category/game-asset-structure) manual.
:::

:::tip
For testing purposes, you don’t need a full asset setup. \
Just set up the ***btn-start*** node in the Node Tree and you’re good to go.

![Loading Button Setup](./img/loading-button-setup.png)
:::