diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index aebf10c..69f5475 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 | |-------------------------------------------------------------|-------------------------------------------------------------------| @@ -472,46 +472,115 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` --- -## Setup Logo +## Game Logo Setup Guide ### Overview +The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations. -The game logo is a key visual element used to represent the game's identity. It is displayed consistently across multiple platforms and screen 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) | -| Platform | Orientation | Example Screenshot | -|---------------|---------------|-----------------------| -| Desktop | - | ![Overview Desktop](./img/05-main-scene/logo-overview-desktop.png) | -| Mobile | Landscape | ![Overview Landscape](./img/05-main-scene/logo-overview.png) | -| Mobile | Portrait | ![Overview Portrait](./img/05-main-scene/logo-overview-portrait.png) | +### Animation Configuration +#### 1. Core Setup +Location: `assets\core-assets\hyper-core\packages\logo-animation` -### Setup Logo In Game - -#### Logo Desktop -![Setting Logo](./img/05-main-scene/logo-setting-desktop.png) - -##### Platform Node Spawner Settings - -:::info -*[Click here to follow the setting](#platform-node-spawner-settings)* -::: - -##### Add Script Play Anim Logo - - -![Setting Logo](./img/05-main-scene/logo-script-desktop.png) - -in script was has function get name Animation: - -```jsx title="assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js" - onLoad: function () { - var self = this; - - self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); - self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); - }, +```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-Specific Setup + +#### Desktop Configuration +1. Base Settings + + ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png) + + *Node Setup* + ```typescript + Components: { + animation: 'hyper-logo-animation', + } + ``` + ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png) +2. Position Guidelines + - Follow design specifications + - Avoid UI element overlap + - Consider screen layout +#### 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) + +##### Portrait Mode + +1. Node Configuration + +| 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 | + + +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) | + +:::tip Best Practices +- Test on multiple device sizes +- Verify animations load properly +- Check positioning in all game states +- Ensure consistent scaling +::: \ 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-default-size.png b/docs/02-setup-main-game/img/05-main-scene/logo-default-size.png new file mode 100644 index 0000000..6b257c9 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/logo-default-size.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-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-setting-desktop.png b/docs/02-setup-main-game/img/05-main-scene/logo-setting-desktop.png index 0a2b07e..fe53a00 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/logo-setting-desktop.png 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