dev-public/doc-slot-core-manual
18
0
Fork 0
Code Issues 12 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity
doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/13-game-logo.md
dungdq a64b8f8f6d update content
2025-05-13 14:38:01 +07:00

4.7 KiB
Raw Blame History

sidebar_position
sidebar_position
13

Game Logo

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
Mobile Landscape Landscape View
Mobile Portrait Portrait View

Logo Settings

1. Core Setup

Location: assets\core-assets\hyper-core\packages\hyper-logo-animation

// 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
Mobile assets\game-assets\textures\mobile\preloads\main-game\custom-scale Mobile
Animation Assets
Platform Location Preview
Desktop assets\game-assets\textures\desktop\postloads\main-game\animations Desktop Anim
Mobile assets\game-assets\textures\mobile\postloads\main-game\animations Mobile Anim

3. Animation Settings

  1. Configure Provider

    Provider Setup

  2. Setup States

    • In anim-logo-play and anim-logo-idle,Enable static frame for loading state:

    Provider Setup

    • Configure continuous loop playback:

    Provider Setup

Platform-Specific Setup

Desktop Configuration

  1. Base Settings

    Desktop Settings

    🔗 Details: Platform UI Controller

  2. Node Setup

    Components: {
  animation: 'hyper-logo-animation',
}

    Desktop Setup

:::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

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

  2. Position Settings

    State Position Example
    Jackpot Active Upper position Active
    Jackpot Inactive Default position Inactive

  3. Size Settings

    Using componet spine-aspect-ratio-keeper :

    Portrait Logo Configuration

    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. :::