---
sidebar_position: 18
---
# Buy Feature

---

## Overview

![Locate Prefabs](./img/18-buy-feature/overview.png)

## Implementation

### Prepare Assets

| Assets | Description |
| :----: |-------------|
| <img width="300"/>![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Used to Setup the static sprite frame. |
| <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Used to Setup the animations. |
| <img width="300"/>![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Used to Setup the label cost. |
| <img width="300"/>![Prepare Assets Prefabs](./img/18-buy-feature/prepare-prefabs.png) | - 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

    ![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-1.png)
    ![Background Setup Helper Anim](./img/18-buy-feature/setup-anim-helper-2.png)

2. Configure Spine Animation
    
    Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.

    ![Background Setup Animation](./img/18-buy-feature/setup-anim-1.png)

### Setup Buy Feature Board Desktop

| Step | Action | Image Reference |
| :--: | :----- | :-------------: |
| 1 | - Setup the Title **Sprite Frame** using the prepared assets. | <img width="1000"/>![Setup Desktop Board](./img/18-buy-feature/setup-desktop-board-1.png) |
| 2 | - Setup the **Sprite Frame** in the `static-board` using the prepared assets. | <img width="1000"/>![Setup Desktop Board](./img/18-buy-feature/setup-desktop-board-2.png) |
| 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.| ![Locate Prefabs](./img/18-buy-feature/setup-desktop-board-3.png) |
| 4 | - Setup the 4 Buttons **Sprite Frame** using the prepared assets. | <img width="1000"/>![Setup Desktop Board](./img/18-buy-feature/setup-desktop-board-4.png) |

### Setup Buy Feature Button Desktop

| Step | Action | Image Reference |
| :--: | :----- | :-------------: |
| 1 | - Setup the Text **Sprite Frame** using the prepared assets. | <img width="1000"/>![Setup Desktop Button](./img/18-buy-feature/setup-desktop-button-1.png) |
| 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"/>![Setup Desktop Button](./img/18-buy-feature/setup-desktop-button-2.png) |
| 3 | - Move **new** `anim-button-open-buy-bonus` into **Node Animation**.| ![Locate Prefabs](./img/18-buy-feature/setup-desktop-button-3.png) |
| 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.| ![Locate Prefabs](./img/18-buy-feature/setup-desktop-button-4.png) |


### 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`.

![Locate Prefabs](./img/18-buy-feature/setup-scene.png)