59 lines
3.4 KiB
Markdown
59 lines
3.4 KiB
Markdown
---
|
|
sidebar_position: 18
|
|
---
|
|
# Buy Feature
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
|
|
|
|
## Implementation
|
|
|
|
### Prepare Assets
|
|
|
|
| Assets | Description |
|
|
| :----: |-------------|
|
|
| <img width="300"/>| Used to Setup the static sprite frame. |
|
|
| <img width="300"/> | Used to Setup the animations. |
|
|
| <img width="300"/> | Used to Setup the label cost. |
|
|
| <img width="300"/> | - Search for the `template-shortcut-buy-feature-board` prefab.<br/> - Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.|
|
|
|
|
### Setup Animations
|
|
1. Using hepler to generate animations using the prepared assets
|
|
|
|
|
|
|
|
|
|
2. Configure Spine Animation
|
|
|
|
Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
|
|
|
|
|
|
|
|
### Setup Buy Feature Board Desktop
|
|
|
|
| Step | Action | Image Reference |
|
|
| :--: | :----- | :-------------: |
|
|
| 1 | - Setup the Title **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
|
| 2 | - Setup the **Sprite Frame** in the `static-board` using the prepared assets. | <img width="1000"/> |
|
|
| 3 | - Adjust **Font** in `lbl-cost-buy-feature` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
|
|
| 4 | - Setup the 4 Buttons **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
|
|
|
### Setup Buy Feature Button Desktop
|
|
|
|
| Step | Action | Image Reference |
|
|
| :--: | :----- | :-------------: |
|
|
| 1 | - Setup the Text **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
|
| 2 | 1. Drag the **skeketon** `anim-button-open-buy-bonus` into child of "content".<br/><br/>2. Click **Generate Attached Node**.<br/><br/>3. Move `node-container` to the `ATTACHED_NODE:number`.<br/><br/>4. Deleted **old** `anim-button-open-buy-bonus`. | <img width="1000"/> |
|
|
| 3 | - Move **new** `anim-button-open-buy-bonus` into **Node Animation**.|  |
|
|
| 4 | - Adjust **Font** in `lbl-cost-buy-feature` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
|
|
|
|
|
|
### Configure Scene
|
|
|
|
1. Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
|
|
2. Update **Prefab** in the `shortcut-buy-feature-button`.
|
|
|
|
 |