--- sidebar_position: 18 --- # Buy Feature --- ## Overview The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement. ![Buy Feature Overview](./img/18-buy-feature/overview.png) ## Implementation ### Prepare Assets | Assets | Description | | :----: |-------------| | ![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Static sprite frame for the buy feature panel. | | ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Animation assets for the buy feature button and panel. | | ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Label for displaying the cost of the buy feature. | | ![Prepare Assets Prefabs](./img/18-buy-feature/prepare-prefabs.png) | - Search for the `template-shortcut-buy-feature-board` prefab.
- Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.| ### Setup Animations 1. **Generate Animations**: - Use the helper tool to create animations from 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. | ![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. | ![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.
- 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. | ![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. | ![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".

2. Click **Generate Attached Node**.

3. Move `node-container` to the `ATTACHED_NODE:number`.

4. Deleted **old** `anim-button-open-buy-bonus`. | ![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.
- 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. **Add Prefabs**: - Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position. 2. **Update Prefab**: - Update **Prefab** in the `shortcut-buy-feature-button`. ![Locate Prefabs](./img/18-buy-feature/setup-scene.png)