2025-06-12 18:19:56 +07:00

4.9 KiB
Raw Blame History

sidebar_position
sidebar_position
13

Game Logo

Overview

The Game Logo is a key branding element displayed consistently across all platforms and orientations to reinforce the games identity.

Platform Orientation Preview
Desktop Standard Desktop View
Mobile Landscape Landscape View
Mobile Portrait Portrait View

Implementation

Prepare Assets

1. Core Setup

  • Location: assets/core-assets/hyper-core/packages/hyper-logo-animation
  • Script: Initialize animation states for the logo.
    // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
    onLoad: function () {
        const 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 Static
Mobile assets/game-assets/textures/mobile/preloads/main-game/custom-scale Mobile Static

Animation Assets:

Platform Location Preview
Desktop assets/game-assets/textures/desktop/postloads/main-game/animations Desktop Animation
Mobile assets/game-assets/textures/mobile/postloads/main-game/animations Mobile Animation

3. Animation Settings

  1. Configure Animation Provider:

    • Register the logo animations in the Animation Provider.
    • Provider Setup
  2. Set Up Animation States:

    • Enable a static frame for the loading state in anim-logo-play and anim-logo-idle.
    • Static Frame Setup
    • Configure continuous loop playback for animations.
    • Loop Setup

Setup

Desktop Configuration

  1. Base Settings:

    • Configure the logo node in the main scene.
    • Desktop Settings
  2. Node Setup:

    • Add the hyper-logo-animation component to the logo node.
    • Components: {
          animation: 'hyper-logo-animation',
      }
      
    • Desktop Setup

Tip: Adjust position and size according to the game design specifications.

Mobile Configuration

Landscape Mode
  1. Node Setup:
    • Configure the logo node with the following components:
      Component Description
      hyper-logo-animation Plays and manages the logo animation.
      node-position-by-jackpot Adjusts logo position based on jackpot display state.
      landscape-logo-spine-aspect-ratio-keeper Maintains consistent logo size (e.g., 1.0).
    • Landscape Setup
Portrait Mode
  1. Node Setup:

    • Configure the logo node with the following components:
      Component Description
      hyper-logo-animation Plays and manages the logo animation.
      node-position-by-jackpot Adjusts logo position based on jackpot display state.
      spine-aspect-ratio-keeper Maintains consistent logo size (e.g., 1.0).
    • Portrait Setup
  2. Position Settings:

    • Adjust logo position based on jackpot state:
      State Position Example
      Jackpot Active Upper position Jackpot Active
      Jackpot Inactive Default position Jackpot Inactive
  3. Size Settings:

    • Use the spine-aspect-ratio-keeper component to maintain logo proportions.
    • Size Configuration
    • Settings:
      Setting Description Default Value
      Default Scale Initial scale factor for the node. Configurable (e.g., 1.0)
      Default Size Base width and height for scaling. Configurable (e.g., 1050 x 1680)

Tip:

  • Test the static logo display under slow network conditions to ensure fallback works.
  • Verify animation states (play and idle) for smooth transitions.
  • See More Info