diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 4d7cd18..4272934 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/docs/02-setup-main-game/05-main-scene.md @@ -41,15 +41,20 @@ Try to run the project, you'll the result as below. It doesn't look like much bu ## Setup Reel Slot --- -1. Prepare the asset for symbols. +1. Prepare the asset for symbols and reel frame. ![Add Symbol Texture](./img/05-main-scene/add-symbol-texture.png) + ![Add Symbol Texture](./img/05-main-scene/add-reel-frame.png) 2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code. ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png) -3. Config reel slot using `reel-scroller-helper`. +3. Add reel frame. + + ![Sprite Frame Provider](./img/05-main-scene/add-reel-frame-2.png) ![Sprite Frame Provider](./img/05-main-scene/reel-frame.png) + +4. Config reel slot using `reel-scroller-helper`. ![Reel Scroller Helper](./img/05-main-scene/reel-scroller-helper.png) @@ -63,7 +68,7 @@ Try to run the project, you'll the result as below. It doesn't look like much bu |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.|![dim-cell-color](./img/05-main-scene/dim-cell-color.png)| |**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.|![cell-top-bottom](./img/05-main-scene/cell-top-bottom.png)| -4. Generate panel using `reel-scroller-helper`. +5. Generate panel using `reel-scroller-helper`. ![Generate Panel](./img/05-main-scene/generate-panel.png) @@ -81,23 +86,13 @@ The setup is very straightforward by using the `Generate Panel` command in each - Landing Panel: - ![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')); - }; - ``` -::: + ![Landing Panel](./img/05-main-scene/landing-panel.png) - Present Win Cell Panel: ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png) -- Present Win Border Panel: +- Present Win Cell Panel: ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png) @@ -107,18 +102,7 @@ To define Landing Panel, create the following script: 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) - **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')); - }; - ``` - ::: - + ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png) ## Setup UI Panel @@ -211,7 +195,7 @@ The `FormatText` property controls text formatting behavior for label components #### Step 3: Setup UI In Main Scenes Create new node and configuration in your main scene: -![main scenes](./img/05-main-scene/set-positon-bottom-bar.png) +![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) ##### Platform Node Spawner Settings @@ -351,52 +335,45 @@ Background overview: **Background portrait** only use for Mobile portrait. -### 1. Prepare the assets +### 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 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. + We use sprite frame background for landscape from prepared assets. ![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. +### Background Portrait - - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node. + We use sprite frame background for mobile from prepared assets. ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png) -### 4. Background Animation +### 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. +1. Using hepler to generate animation from prepared assets ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png) + ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-anim-provider.png) -3. We have the result as below, and continue setup for **spine-animation**. +2. 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) + ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-1.png) + ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-2.png) -4. Add animation background with component below: +3. Add animation background with component below: **Animation background landscape** - + + - Create **Empty Node** with name **anim-background-main-game**. - Add **animation-play-on-anable** with animation name in **Animation Provider**. - Add **background-scaler** resize with screen resolution. @@ -404,20 +381,23 @@ If the game have design animation for background, we will do this step. **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. + - Create **Empty Node** with name **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. - ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png) + ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-1.png) + + - Create **Empty Node** with name **anim-background-main-game**. + - Add **animation-play-on-anable** with animation name in **Animation Provider**. + - Add **portrait-anim-background-scaler** resize with screen resolution. + + ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-2.png) ## Setup Popup Panel ### Overview -A popup is a temporary UI element that provides additional information or options to the user. +A popup is a temporary UI element that overlays the main content to provide additional information or options to the user. |![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](./img/05-main-scene/popup-credit-game.png)| |---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------| diff --git a/docs/02-setup-main-game/img/05-main-scene/add-reel-frame-2.png b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame-2.png new file mode 100644 index 0000000..515ae65 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame-2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png index 6954e6d..4dcb0a9 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png and b/docs/02-setup-main-game/img/05-main-scene/add-reel-frame.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 index 085616b..6977e6f 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png 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-prepare-assets-anim.png b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png index 6854f0e..9c35b1d 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png 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 index 5e1dde3..a2b4230 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png 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-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-1.png new file mode 100644 index 0000000..af2c237 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-2.png new file mode 100644 index 0000000..f223191 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-2.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 index 57e8bd8..1553570 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png 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-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait-1.png new file mode 100644 index 0000000..67a51e4 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait-2.png new file mode 100644 index 0000000..ce20dfb Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait-2.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 deleted file mode 100644 index 750b465..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-provider.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-provider.png new file mode 100644 index 0000000..d3cb782 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-provider.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 deleted file mode 100644 index bc4aa16..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png and /dev/null 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 index 000181a..3d009bf 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png 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 index 6a3480a..34498af 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png 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 index 74e39cd..301ec2a 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png 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/note-bug-tension.png b/docs/02-setup-main-game/img/05-main-scene/note-bug-tension.png deleted file mode 100644 index 853ff08..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/note-bug-tension.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/reel-frame.png b/docs/02-setup-main-game/img/05-main-scene/reel-frame.png new file mode 100644 index 0000000..18dbc37 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/reel-frame.png differ