Merge pull request 'feature/add-buy-feature' (#67) from feature/add-buy-feature into develop

Reviewed-on: #67

docs/02-setup-main-game/05-main-scene/18-buy-feature.md

@@ -0,0 +1,59 @@
+---
+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)