diff --git a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md index 78057fd..619441f 100644 --- a/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md +++ b/docs/02-setup-main-game/05-main-scene/15-jackpot-panel.md @@ -36,8 +36,18 @@ sidebar_position: 15 #### Desktop -- Add the jackpot prefab to your main scene. +- Add the jackpot prefab to your main scene: + - create new node, + - add component `platform-node-spawner` - Set its position to **(0, 0)**. +- **Scene Hierarchy** + ``` + Canvas + └── [main-view] + └── [game-view] + ├── [logo] + └── [jackpot-runner-panel-desktop-spawner] + ``` ![Desktop](../img/05-main-scene/jackpot-panel/jackpot-in-desktop.png) @@ -46,7 +56,16 @@ sidebar_position: 15 #### Mobile - Configure the jackpot node for both landscape and portrait orientations. -- Use `UI Mobile Position` for a responsive layout. +- **Scene Hierarchy** + ``` + Canvas + └── [main-view] + └── [game-view] + ├── [logo] + └── [contener-mobile-jackpot-runner] + └── [jackpot-mobile-runner-panel-spawner] + ``` +- Use `UI Mobile landscape Position` and `UI Mobile portrait Position` for a responsive layout. ![Mobile](../img/05-main-scene/jackpot-panel/jackpot-in-mobile.png) @@ -62,17 +81,31 @@ sidebar_position: 15 - The jackpot panel works seamlessly across all platforms and orientations. +- **Scene Hierarchy** + ``` + Canvas + └── [main-view] + └── [game-view] + ├── [logo] + ├── [jackpot-runner-panel-desktop-spawner] + ├── [container-jackpot-runner-mobile] + │ └── [jackpot-mobile-runner-panel-spawner] + ... + ... + └── [jackpot-result-panel-spawner] + ``` + ![Result](../img/05-main-scene/jackpot-panel/jackpot-result.png) More info: [Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#node-spawner) + + :::tip -**Sibling Index Order:** -| Node Name | Sibling Index | Notes | -|----------------------------------------|---------------|---------------------------------------| -| `jackpot-runner-panel-desktop-spawner` | Lowest | Usually at the bottom | -| `container-jackpot-runner-mobile` | Middle | Between desktop and result panels | -| `jackpot-result-panel-spawner` | Highest | Always on top
![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png) | +- Follow the game design layout. +- Scene Hierarchy: + +![Result](../img/05-main-scene/jackpot-panel/jackpot-positon-result.png) ::: diff --git a/docs/02-setup-main-game/img/05-main-scene/jackpot-panel/jackpot-positon-result.png b/docs/02-setup-main-game/img/05-main-scene/jackpot-panel/jackpot-positon-result.png index 9df06f1..3ea3c09 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/jackpot-panel/jackpot-positon-result.png and b/docs/02-setup-main-game/img/05-main-scene/jackpot-panel/jackpot-positon-result.png differ