dev-public/doc-slot-core-manual
18
0
Fork 0
Code Issues 12 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

update docs for portrait

Browse Source
This commit is contained in:
dungdq 2025-05-12 11:30:50 +07:00
parent 8ff39e20ab
commit 04750a2f6c
1 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
docs/02-setup-main-game/05-main-scene.md
View File

@ -483,7 +483,7 @@ The game logo is a crucial branding element that must be consistently displayed
| Mobile | Landscape | ![Landscape View](./img/05-main-scene/logo-overview.png) |
| Mobile | Portrait | ![Portrait View](./img/05-main-scene/logo-overview-portrait.png) |
### Animation Configuration
### Logo Configuration
#### 1. Core Setup
Location: `assets\core-assets\hyper-core\packages\logo-animation`
@ -527,14 +527,17 @@ onLoad: function () {
![Provider Setup](./img/05-main-scene/logo-anim-loop.png)
### Platform-Specific Setup
### Platform Setup
#### Desktop Configuration
1. Base Settings
![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png)
*Node Setup*
🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
2. Node Setup
```typescript
Components: {
animation: 'hyper-logo-animation',
@ -542,34 +545,35 @@ onLoad: function () {
```
![Desktop Setup](./img/05-main-scene/logo-script-desktop.png)
2. Position Guidelines
- Follow design specifications
- Avoid UI element overlap
- Consider screen layout
:::tip
- **Position And Size**: Follow Game Design.
:::
#### Mobile Configuration
##### Landscape Mode
1. Node Setup
```typescript
Components: {
animation: 'hyper-logo-animation',
scaling: 'landscape-logo-spine-aspect-ratio-keeper'
}
```
![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
| Component | Description |
|-------------------------------------------|--------------------------------------------------|
| `hyper-logo-animation` | Plays and manages the logo animation |
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
| `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) |
![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
##### Portrait Mode
1. Node Configuration
1. Node Setup
| Component | Description |
|----------------------------|--------------------------------------------------|
| `hyper-logo-animation` | Plays and manages the logo animation |
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens |
| Component | Description |
|----------------------------|--------------------------------------------------|
| `hyper-logo-animation` | Plays and manages the logo animation |
| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) |
![Portrait Setup](./img/05-main-scene/logo-mobile-portrait.png)
2. Position Settings
@ -578,9 +582,17 @@ onLoad: function () {
| Jackpot Active | Upper position | ![Active](./img/05-main-scene/logo-portrait-jackpot.png) |
| Jackpot Inactive | Default position | ![Inactive](./img/05-main-scene/logo-portrait-no-jackpot.png) |
:::tip Best Practices
- Test on multiple device sizes
- Verify animations load properly
- Check positioning in all game states
- Ensure consistent scaling
3. Size Settings
Using componet `spine-aspect-ratio-keeper` :
![Portrait Logo Configuration](./img/05-main-scene/logo-center-align.png)
| Setting | Description | Default Value |
| ----------------- | -------------------------------------------- | --------------------- |
| **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) |
| **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) |
:::tip
- Check Logo Static when is lowest Network
:::