diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 01e8d31..bce0d55 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -199,7 +199,7 @@ Use the `template-label-auto-selection` to customize the appearance of the label #### Customize *`ui-bottom-bar-panel`* Label Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`: :::info -*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)* +🔗*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)* **Bottom bar labels include a localization component for multi-language support** ::: @@ -231,7 +231,7 @@ Create new node and configuration in your main scene: ##### Texture Button Bar Checklist assets completed for bottom UI and button UI text :::info -🔗 [](http://localhost:3000/docs/category/game-asset-structure) +🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure) ::: ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) @@ -457,7 +457,7 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` - *Prepare asset to pack*. -🔗 Click here to follow the setup pack assets: [Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure) +🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure) | Path | Example | |-------------------------------------------------------------|-------------------------------------------------------------------| @@ -470,6 +470,129 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` **Preview Result**: ![Popup overview exit](./img/05-main-scene/popup-exit-game.png) +--- +## Game Logo Setup Guide +### Overview +The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations. +| Platform | Orientation | Preview | +|----------|------------|----------| +| Desktop | Standard | ![Desktop View](./img/05-main-scene/logo-overview-desktop.png) | +| Mobile | Landscape | ![Landscape View](./img/05-main-scene/logo-overview.png) | +| Mobile | Portrait | ![Portrait View](./img/05-main-scene/logo-overview-portrait.png) | + +### Logo Configuration + +#### 1. Core Setup +Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation` + +```typescript +// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js +onLoad: function () { + var self = this; + // Initialize animation states + self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); + self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); +} +``` + +#### 2. Required Assets + +##### Static Assets +| Platform | Location | Preview | +|----------|----------|---------| +| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` | ![Desktop](./img/05-main-scene/logo-static-desktop.png) | +| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` | ![Mobile](./img/05-main-scene/logo-static-mobile.png) | + +##### Animation Assets +| Platform | Location | Preview | +|----------|----------|---------| +| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](./img/05-main-scene/logo-anim-desktop.png) | +| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` | ![Mobile Anim](./img/05-main-scene/logo-anim-mobile.png) | + +#### 3. Animation Settings +1. Configure Provider + + ![Provider Setup](./img/05-main-scene/logo-anim-provider.png) + +2. Setup States + + - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state: + + ![Provider Setup](./img/05-main-scene/logo-static-in-anim.png) + + - Configure continuous loop playback: + + ![Provider Setup](./img/05-main-scene/logo-anim-loop.png) + +### Platform Setup + +#### Desktop Configuration + +1. Base Settings + + ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png) + +🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller` + +2. Node Setup + ```typescript + Components: { + animation: 'hyper-logo-animation', + } + ``` + ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png) + +:::tip + - **Position And Size**: Follow Game Design. +::: + +#### Mobile Configuration + +##### Landscape Mode + +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 | + | `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 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 (**Exp: 1.0** ) | + + ![Portrait Setup](./img/05-main-scene/logo-mobile-portrait.png) + +2. Position Settings + + | State | Position | Example | + |-------|----------|---------| + | 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) | + +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 static logo display under slow network conditions. +::: \ No newline at end of file diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-anim-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-anim-desktop.png new file mode 100644 index 0000000..987980f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-anim-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-anim-loop.png b/docs/02-setup-main-game/img/05-main-scene/logo-anim-loop.png new file mode 100644 index 0000000..7165609 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-anim-loop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-anim-mobile.png b/docs/02-setup-main-game/img/05-main-scene/logo-anim-mobile.png new file mode 100644 index 0000000..e6f8359 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-anim-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-anim-provider.png b/docs/02-setup-main-game/img/05-main-scene/logo-anim-provider.png new file mode 100644 index 0000000..041439c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-anim-provider.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-center-align.png b/docs/02-setup-main-game/img/05-main-scene/logo-center-align.png new file mode 100644 index 0000000..e31df65 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-center-align.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-mobile-landcape.png b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-landcape.png new file mode 100644 index 0000000..c376daf Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-landcape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-mobile-portrait.png b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-portrait.png new file mode 100644 index 0000000..90818ce Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-mobile-position-landcape.png b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-position-landcape.png new file mode 100644 index 0000000..883764b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-mobile-position-landcape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-overview-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-overview-desktop.png new file mode 100644 index 0000000..56c25a5 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-overview-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-overview-portrait.png b/docs/02-setup-main-game/img/05-main-scene/logo-overview-portrait.png new file mode 100644 index 0000000..45a6e9d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-overview-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-overview.png b/docs/02-setup-main-game/img/05-main-scene/logo-overview.png new file mode 100644 index 0000000..c546180 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-overview.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-portrait-jackpot.png b/docs/02-setup-main-game/img/05-main-scene/logo-portrait-jackpot.png new file mode 100644 index 0000000..ba45d24 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-portrait-jackpot.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-portrait-no-jackpot.png b/docs/02-setup-main-game/img/05-main-scene/logo-portrait-no-jackpot.png new file mode 100644 index 0000000..b043997 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-portrait-no-jackpot.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-script-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-script-desktop.png new file mode 100644 index 0000000..a6b9f22 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-script-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-setting-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-setting-desktop.png new file mode 100644 index 0000000..fe53a00 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-setting-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-static-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-static-desktop.png new file mode 100644 index 0000000..a4db3ad Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-static-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-static-in-anim.png b/docs/02-setup-main-game/img/05-main-scene/logo-static-in-anim.png new file mode 100644 index 0000000..78657ab Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-static-in-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/logo-static-mobile.png b/docs/02-setup-main-game/img/05-main-scene/logo-static-mobile.png new file mode 100644 index 0000000..4f41a84 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-static-mobile.png differ