diff --git a/docs/02-setup-main-game/05-main-scene/18-buy-feature.md b/docs/02-setup-main-game/05-main-scene/18-buy-feature.md new file mode 100644 index 0000000..e8defb8 --- /dev/null +++ b/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 | +| :----: |-------------| +| ![Prepare Assets Static](./img/18-buy-feature/prepare-assets-1.png)| Used to Setup the static sprite frame. | +| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-2.png) | Used to Setup the animations. | +| ![Prepare Assets Animation](./img/18-buy-feature/prepare-assets-3.png) | Used to Setup the label cost. | +| ![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. 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. | ![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. 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) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.gif b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.gif new file mode 100644 index 0000000..7d22f8b Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.gif differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.png new file mode 100644 index 0000000..ccbc788 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/overview.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-1.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-1.png new file mode 100644 index 0000000..487da40 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-1.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-2.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-2.png new file mode 100644 index 0000000..7509912 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-2.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-3.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-3.png new file mode 100644 index 0000000..b5ccd4a Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-assets-3.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-prefabs.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-prefabs.png new file mode 100644 index 0000000..e2f7c40 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/prepare-prefabs.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-1.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-1.png new file mode 100644 index 0000000..d445942 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-1.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-1.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-1.png new file mode 100644 index 0000000..3d009bf Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-1.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-2.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-2.png new file mode 100644 index 0000000..3f7fa43 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-anim-helper-2.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-1.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-1.png new file mode 100644 index 0000000..0a2cd64 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-1.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-2.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-2.png new file mode 100644 index 0000000..5a657ec Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-2.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-3.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-3.png new file mode 100644 index 0000000..e225a07 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-3.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-4.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-4.png new file mode 100644 index 0000000..f1e301a Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-board-4.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-1.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-1.png new file mode 100644 index 0000000..53f84da Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-1.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-2.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-2.png new file mode 100644 index 0000000..310b947 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-2.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-3.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-3.png new file mode 100644 index 0000000..478a203 Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-3.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-4.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-4.png new file mode 100644 index 0000000..234179b Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-desktop-button-4.png differ diff --git a/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-scene.png b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-scene.png new file mode 100644 index 0000000..666e9bc Binary files /dev/null and b/docs/02-setup-main-game/05-main-scene/img/18-buy-feature/setup-scene.png differ