diff --git a/docs/01-setup-the-project/03-setup-custom-engine.md b/docs/01-setup-the-project/03-setup-custom-engine.md index 2c7ad3f..e12dabd 100644 --- a/docs/01-setup-the-project/03-setup-custom-engine.md +++ b/docs/01-setup-the-project/03-setup-custom-engine.md @@ -6,7 +6,7 @@ sidebar_position: 3 Set **Javascript Engine Path** to a **custom Cocos Engine**. -Thank to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game. +Thanks to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game. For the detail of the Custom Engine, take a look at this [**Custom Cocos Engine documentation**](../custom-cocos-engine/custom-cocos-engine.md) diff --git a/docs/01-setup-the-project/04-create-game-folder-structure.md b/docs/01-setup-the-project/04-create-game-folder-structure.md index eb74df2..6997fa7 100644 --- a/docs/01-setup-the-project/04-create-game-folder-structure.md +++ b/docs/01-setup-the-project/04-create-game-folder-structure.md @@ -28,7 +28,7 @@ Rename those scenes: ![Template Scene](./img/template-scenes.png) -Inside `assets/game-assets/scripts/`, create a folder called `custome-scaler` then add a script `custom-scale-data.js`. +Inside `assets/game-assets/scripts/`, create a folder called `custom-scaler` then add a script `custom-scale-data.js`. ![Custom Scale](./img/custom-scale.png) diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index cb592a5..a8dd666 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -24,8 +24,21 @@ Try to run the project, you'll the result as below. It doesn't look like much bu ![Run Test](./img/05-main-scene/run-test.png) ::: -## Setup Reel Slot +## Setup SpriteFrame Provider +--- + **SpriteFrameProvider** allows global access to "sprite frames" from code. + + ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png) + +## Setup Animation Provider +--- + + **Animation Provider** contains all **animations** of the game. + + ![Aniamtion Provider](./img/05-main-scene/animation-provider.png) + +## Setup Reel Slot --- 1. Prepare the asset for symbols. @@ -68,7 +81,17 @@ The setup is very straightforward by using the `Generate Panel` command in each - Landing Panel: - ![Landing Panel](./img/05-main-scene/landing-panel.png) + ![Landing Panel](./img/05-main-scene/landing-panel.png) + +To define Landing Panel, create the following script: + +:::warning + ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" + SlottySetting.prototype._registerInjection = function () { + DIContainer.Register('landingGenerator', require('landing-generator')); + }; + ``` +::: - Present Win Cell Panel: @@ -84,24 +107,301 @@ The setup is very straightforward by using the `Generate Panel` command in each If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size. - ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png) + ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png) + **check toggle General Panel** + ![Tension Size Custom](./img/05-main-scene/note-bug-tension.png) + To define Tension Panel, create the following script: + :::warning + ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" + SlottySetting.prototype._registerInjection = function () { + DIContainer.Register('tensionGenerator', require('tension-generator')); + }; + ``` + ::: + ## Setup UI Panel -> To be Added: -> - Different UI Layout on Desktop and Mobile -> - Which helper/p4f menu can be used +### UI Panel Overview + +The UI system supports both desktop and mobile layouts design. + +#### 🖥️ Desktop Layout +- Full bottom bar with all controls visible +- Horizontal layout maximizing screen width + +![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png) + +#### 📱 Mobile Layout +The mobile interface adapts to both landscape and portrait orientations: + +| Orientation | Preview | +|-------------|----------| +| Landscape | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) | +| Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) | + + +### UI Panel Desktop + +#### Step 1: Setup Prefab Editor + +| Step | Action | image | +|------|---------|--------------| +| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) | +| 2. Copy Assets | Navigate from `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) | +| 3. Place Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) | + +--- + +#### Step 2: Configure Prefabs + +##### Core Prefabs Structure +Navigate to the location where the prefabs: +![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png) + +##### Rename Prefabs +Rename the copied prefabs by removing unnecessary prefixes: +| Prefix to Remove | Original Prefab Name | Final Name | +|------------------|----------------------|------------| +| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` | +| `template-` | `template-button-auto-selection` | `button-auto-selection` | + + +```jsx title="The folder structure is as follows:" + assets\game-assets\prefabs +``` + + +![Prefab Naming Example](./img/05-main-scene/rename-prefab.png) + +#### Customize *`button-auto-selection`* Label + +**Follow Design:** +Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab. + +| Component | Description | +| -------------------- | ------------------------------------------------- | +| **Label Outline** | Add an outline to make the text stand out. | +| **Label Shadow** | Add a shadow for better contrast and readability. | +| -------------------- | ------------------------------------------------- | + +![Label Configuration Options](./img/05-main-scene/option-for-label.png) + +#### Customize *`ui-bottom-bar-panel`* Label +Use `template-label-title` to customize the `ui-bottom-bar-panel`: +:::info +*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)* +**Bottom bar labels include a localization component for multi-language support** +::: + +![component-locale](./img/05-main-scene/component-locale.png) + +The `FormatText` property controls text formatting behavior for label components: + +| Property | Description | Example | +|----------|-------------|---------| +| `default` | Initial formatting state | `false` | +| `notify` | Formatting update callback | Updates when value changes | + +--- +#### Step 3: Setup Ui In Main Scenes + +Create new node and configuration in your main scene: +![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) + +##### Platform Node Spawner Settings + +| Setting | Value | Description | +|---------|-------|-------------| +| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform | +| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform | +| Target Prefab | `ui-bottom-bar-panel` | References prefab | + +#### Step 4: Apply Textures + +##### Texture Button Bar +✅ Checklist assets completed for bottom UI and button UI text +🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure): + ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) + +##### Run the Helper Tool +- Open the UI Desktop Helper +- Select texture assignment options +![Helper Tool](./img/05-main-scene/run-ui-desktop-helper.png) + +##### Verify Results + +*Auto Selection prefab* +![Auto Selection Result](./img/05-main-scene/result-btn-auto-selection.png) + +*Bottom Bar prefab* +![Bottom Bar Result](./img/05-main-scene/result-buttom-bar.png) + +*In game* +![Auto Selection Result](./img/05-main-scene/btn-auto-selection.png) +![Bottom Bar Result](./img/05-main-scene/result-buttom-bar-in-game.png) + +--- + +### UI Panel Mobile + +#### Step 1: Setup Prefab +| Step | Action | image | +|------|---------|--------------| +| 1. Locate Prefab | Search for `mobile-ui` prefab | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png) | +| 2. Place Assets | Copy to game assets location | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png) | +| 3. Locate Prefab | Search for `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) | + +#### Step 2: Rename Prefabs + +```jsx title="The folder structure is as follows:" + assets\game-assets\prefabs\mobile +``` + +Rename the copied prefabs by removing unnecessary prefixes: +| Prefix to Remove | Final Name | +|------------------|----------------------| +| `template-` |![Prefab Naming Example](./img/05-main-scene/result-rename-mobile.png) | + +#### Step 3: Setup Ui In Main Scenes + +Create new node and configuration in your main scene: +![main scenes](./img/05-main-scene/set-positon-mobile-ui.png) + +##### Platform Node Spawner Settings + +| Setting | Value | Description | +|---------|-------|-------------| +| Mobile Toggle | ✓ Enabled | Show prefabs for mobile platform | +| Desktop Toggle | ☐ Disabled | Hide prefabs for desktop platform | +| Target Prefab | `mobile-ui` | References prefab | + +#### Step 4: Apply Textures + +##### Texture Mobile Ui +✅ Checklist assets completed for Mobile UI +🔗 [Follow is by Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure): + ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png) + +##### Run the Helper Tool +- Open the UI Mobile Helper +- Select texture assignment options +![Helper Tool](./img/05-main-scene/run-ui-mobile-helper.png) + +##### Results + +*main ui button added textures* +| ![Auto Selection Result](./img/05-main-scene/result-mobile-button.png) | + + +#### Step 4: Setup Color For Menu Mobile UI + +**Follow Design:** + +| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png) | +|---------|-------| + +##### Overview +The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface. + +![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png) + +|Ordinal number| Properties | Explaination | Example | +|--------------|------------|--------------|---------| +|0 |**paintColor** |Trigger to repaint UI components | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)| +|1 | **Main Ui Normal Color** |Default color of UI elements | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) | +|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | +|3 | **Toggle State Off Color** | Color of toggle when off | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) | +|4 | **Toggle State On Color** | Color of toggle when on | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) | +|5 | **Background Info Page Color** | Info screen background | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)| +|6 | **Background Menu Color** | Menu background color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) | +|7 | **Background Point Panel Color** | Background panel for point/balance UI | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) | +|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) | +|9 | **Button Quit Color** | Quit button color | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) | +|10 | **Button Cancel Color** | Cancel button color | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1 +|11 | **Label Balance Normal Color** | Normal balance label color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) | +|12 | **Label Balance Spin Color** | During-spin label color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) | +|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) | +|14 | **Label Start Auto Color** | Start autoplay label | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | +|15 | **Label Outline Notification** | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) | +|16 | **Total Win Medium Win Color** | Color for medium win effects | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | + +--- ## Setup Background -> To Be Added: -> - show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg. +Background overview: -## Setup Animation Provider +| | Desktop | Mobile | +|:-:|--------------|---------| +|**Background Landscape**
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)| +|**Background Portrait**
![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||
![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)| -> To Be Added: -> - How to run helper / p4f menu -> - How to setup static frame / fps +**Background landscape** use for Desktop and Mobile landscape. + +**Background portrait** only use for Mobile portrait. + +### 1. Prepare the assets +| | Assets | Description | +|:-:|--------------|---------| +|**Static**
|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game| +|**Animation**
|![Background Prepare Portrait](./img/05-main-scene/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design| + +### 2. Background Landscape + + - **background-container:** must have **orientation-ui-controller** to display on Landscape with the options below. + - **background-main-game:** we use sprite frame from prepared assets. + + Both must add component **Widget** with the options below to resize with parent node. + + ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png) + +### 3. Background Portrait + + - **moible-background-container:** + - Add **mobile-portrait-background-ui-controller** to display only on Mobile. + - Add **background-mobile-portrait-fullscreen-scaler** to resize with screen resolution. + - Add **orientation-ui-controller** to display on Portrait with the options below. + + - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node. + + ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png) + +### 4. Background Animation + +If the game have design animation for background, we will do this step. + +1. Add **animation-provider**: This component contains all **animation** of the game. + +2. Using hepler to generate animation. + + ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png) + +3. We have the result as below, and continue setup for **spine-animation**. + - **Is Loop**: is ✅ because this animation will play through the game. + - **Static Sprite Frame**: It will be displayed when the animation has not finished loading. + + ![Background Setup Animation](./img/05-main-scene/bg-setup-animation.png) + +4. Add animation background with component below: + + **Animation background landscape** + + - Add **animation-play-on-anable** with animation name in **Animation Provider**. + - Add **background-scaler** resize with screen resolution. + + ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png) + + **Animation background portrait** + + - **mobile-background-anim-portrait:** + - Add **mobile-portrait-background-ui-controller** to display only on **Mobile**. + - Add **orientation-ui-controller** to display on Portrait with the options below. + - **anim-background-main-game:** + - **animation-play-on-anable** with animation name in **Animation Provider**. + - **portrait-anim-background-scaler** resize with screen resolution. + + ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png) ## Setup Popup Panel diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png new file mode 100644 index 0000000..bc428d8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png new file mode 100644 index 0000000..1c7a557 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-bottom-bar-prefab2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png new file mode 100644 index 0000000..b452752 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-label-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-texture-mobile-ui.png b/docs/02-setup-main-game/img/05-main-scene/add-texture-mobile-ui.png new file mode 100644 index 0000000..ed1e670 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-texture-mobile-ui.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png new file mode 100644 index 0000000..085616b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png new file mode 100644 index 0000000..19c8867 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png new file mode 100644 index 0000000..596a5c8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png new file mode 100644 index 0000000..4d44bbd Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png new file mode 100644 index 0000000..70e5e9c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png new file mode 100644 index 0000000..63a9091 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png new file mode 100644 index 0000000..6854f0e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png new file mode 100644 index 0000000..5e1dde3 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png new file mode 100644 index 0000000..57e8bd8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png new file mode 100644 index 0000000..750b465 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png new file mode 100644 index 0000000..bc4aa16 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png new file mode 100644 index 0000000..000181a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png new file mode 100644 index 0000000..6a3480a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png new file mode 100644 index 0000000..74e39cd Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png b/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png new file mode 100644 index 0000000..150fda9 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bottom-ui-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png b/docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png new file mode 100644 index 0000000..e5e9e7c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/btn-auto-selection.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/btn-cancel-game.png b/docs/02-setup-main-game/img/05-main-scene/btn-cancel-game.png new file mode 100644 index 0000000..e2d9345 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/btn-cancel-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/btn-quit-game.png b/docs/02-setup-main-game/img/05-main-scene/btn-quit-game.png new file mode 100644 index 0000000..2c1d535 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/btn-quit-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/buy-feature-bonus-mobile.png b/docs/02-setup-main-game/img/05-main-scene/buy-feature-bonus-mobile.png new file mode 100644 index 0000000..79c1ede Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/buy-feature-bonus-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/component-locale.png b/docs/02-setup-main-game/img/05-main-scene/component-locale.png new file mode 100644 index 0000000..744e92a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/component-locale.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png b/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png new file mode 100644 index 0000000..6f539aa Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/editor-texture-label-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/auto.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/auto.png new file mode 100644 index 0000000..4153528 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/auto.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png new file mode 100644 index 0000000..478b1cf Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-info.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-info.png new file mode 100644 index 0000000..dd70fbc Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-info.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png new file mode 100644 index 0000000..e81f87a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-menu.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png new file mode 100644 index 0000000..717d4b6 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png new file mode 100644 index 0000000..a678e45 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png new file mode 100644 index 0000000..9446d9a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png new file mode 100644 index 0000000..dd3f267 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/balance2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png new file mode 100644 index 0000000..66c86ef Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button start.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button start.png new file mode 100644 index 0000000..1a17d54 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button start.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png new file mode 100644 index 0000000..d689841 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/button-exit.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/buy.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/buy.png new file mode 100644 index 0000000..acd77cf Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/buy.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cancel-exit.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cancel-exit.png new file mode 100644 index 0000000..86efc34 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cancel-exit.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png new file mode 100644 index 0000000..f663e92 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cheat.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/close.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/close.png new file mode 100644 index 0000000..bc2495b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/close.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png new file mode 100644 index 0000000..af9efaa Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/cong.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/exit.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/exit.png new file mode 100644 index 0000000..a300a49 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/exit.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png new file mode 100644 index 0000000..a52c19d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png new file mode 100644 index 0000000..4dd272b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png new file mode 100644 index 0000000..8e389af Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png new file mode 100644 index 0000000..7b4857e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png new file mode 100644 index 0000000..4c8827c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png new file mode 100644 index 0000000..493c51f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png new file mode 100644 index 0000000..b7065eb Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/paytable.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png new file mode 100644 index 0000000..949dbe0 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/rule.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting-helper-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting-helper-color.png new file mode 100644 index 0000000..d575fa5 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting-helper-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png new file mode 100644 index 0000000..1da365c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/setting.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png new file mode 100644 index 0000000..b21307c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png new file mode 100644 index 0000000..6e72689 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/tru.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png new file mode 100644 index 0000000..c053ae9 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png new file mode 100644 index 0000000..d6b0f6b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/in-scenes-game.png b/docs/02-setup-main-game/img/05-main-scene/in-scenes-game.png new file mode 100644 index 0000000..84b837d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/in-scenes-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/main-ui-highlight-color.png b/docs/02-setup-main-game/img/05-main-scene/main-ui-highlight-color.png new file mode 100644 index 0000000..fde61e7 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/main-ui-highlight-color.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png b/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png new file mode 100644 index 0000000..f140d82 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/menu-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png b/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png new file mode 100644 index 0000000..00b5d7f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/menu-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/mobile-ui-prefab.png b/docs/02-setup-main-game/img/05-main-scene/mobile-ui-prefab.png new file mode 100644 index 0000000..a832b2c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/mobile-ui-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/note-bug-tension.png b/docs/02-setup-main-game/img/05-main-scene/note-bug-tension.png new file mode 100644 index 0000000..853ff08 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/note-bug-tension.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png b/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png new file mode 100644 index 0000000..87008d7 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/note-rename-auto-selection.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/option-for-label.png b/docs/02-setup-main-game/img/05-main-scene/option-for-label.png new file mode 100644 index 0000000..ede9f6f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/option-for-label.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png new file mode 100644 index 0000000..7435e18 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/prepare-ui-bottom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png b/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png new file mode 100644 index 0000000..1701f15 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/rename-prefab.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png b/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png new file mode 100644 index 0000000..b1236ad Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-btn-auto-selection.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png new file mode 100644 index 0000000..c743a24 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar-in-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png new file mode 100644 index 0000000..8a36adf Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-buttom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png b/docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png new file mode 100644 index 0000000..be0a52d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-mobile-button.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/result-rename-mobile.png b/docs/02-setup-main-game/img/05-main-scene/result-rename-mobile.png new file mode 100644 index 0000000..d60ef2e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/result-rename-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png b/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png new file mode 100644 index 0000000..f8e871c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/run-ui-desktop-helper.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/run-ui-mobile-helper.png b/docs/02-setup-main-game/img/05-main-scene/run-ui-mobile-helper.png new file mode 100644 index 0000000..74238f8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/run-ui-mobile-helper.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/search-mobile-ui.png b/docs/02-setup-main-game/img/05-main-scene/search-mobile-ui.png new file mode 100644 index 0000000..4496a33 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/search-mobile-ui.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png b/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png new file mode 100644 index 0000000..f2420cb Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/set-color-menu-ui.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/set-positon-bottom-bar.png b/docs/02-setup-main-game/img/05-main-scene/set-positon-bottom-bar.png new file mode 100644 index 0000000..96e295c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/set-positon-bottom-bar.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/set-positon-mobile-ui.png b/docs/02-setup-main-game/img/05-main-scene/set-positon-mobile-ui.png new file mode 100644 index 0000000..7362e4f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/set-positon-mobile-ui.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/toggle-off.png b/docs/02-setup-main-game/img/05-main-scene/toggle-off.png new file mode 100644 index 0000000..a87a28b Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/toggle-off.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/toggle-on.png b/docs/02-setup-main-game/img/05-main-scene/toggle-on.png new file mode 100644 index 0000000..78d8234 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/toggle-on.png differ