128 lines
4.7 KiB
Markdown
128 lines
4.7 KiB
Markdown
---
|
|
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 |  |
|
|
| Mobile | Landscape |  |
|
|
| Mobile | Portrait |  |
|
|
|
|
### Logo Settings
|
|
|
|
#### 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` |  |
|
|
| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
|
|
|
|
##### Animation Assets
|
|
| Platform | Location | Preview |
|
|
|----------|----------|---------|
|
|
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
|
|
| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
|
|
|
|
#### 3. Animation Settings
|
|
1. Configure Provider
|
|
|
|
|
|
|
|
2. Setup States
|
|
|
|
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
|
|
|
|
|
|
|
|
- Configure continuous loop playback:
|
|
|
|
|
|
|
|
### Platform-Specific Setup
|
|
|
|
#### Desktop Configuration
|
|
|
|
1. Base Settings
|
|
|
|
|
|
|
|
🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
|
|
|
|
2. Node Setup
|
|
```typescript
|
|
Components: {
|
|
animation: 'hyper-logo-animation',
|
|
}
|
|
```
|
|
|
|
|
|
:::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**) |
|
|
|
|
|
|
|
|
##### 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** ) |
|
|
|
|
|
|
|
|
2. Position Settings
|
|
|
|
| State | Position | Example |
|
|
|-------|----------|---------|
|
|
| Jackpot Active | Upper position |  |
|
|
| Jackpot Inactive | Default position |  |
|
|
|
|
3. Size Settings
|
|
|
|
Using componet `spine-aspect-ratio-keeper` :
|
|
|
|
|
|
|
|
| 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.
|
|
::: |