We learned the basic functions of the UI editor in the tutorial * UI Editor . \\In this tutorial, we will make a UI store together to strengthen the UI editor's use skills.
The shop interface is shown below:
Guide
In this lesson, you will learn the following points:
1. Adding UI components and adjusting their hierarchy
2. The button trigger adder method
3. The interactive logic and specific trigger settings of the store
UI module
The overall is divided into 3 modules: store entrance button, product interface, purchase prompt
As shown in the picture below, the modules can jump back and forth to form a complete transaction process.
Module 1: Store entrance
Set component
Create a new UI interface and name it “store”. Select the “button” component to make a store entrance.
Module 2: Products List
Add Page Status
Add a page status and name it “list ui”. (We will switch the store entrance, product interface, purchase prompt by switching the page status)
Hidden components of the store entrance in the page status “list ui”.
Set component
Create a product list interface through the combination of various components. (Note, be sure to be on the status page “list ui”)
1. Overall framework
Please name each component kindly for better management.
(Very important) Then we adjust the level relationship of the component. Because there are many tedious steps, we only do demonstrations here.
- The store sign and NPC are both the subset of the Store background.
The final adjustment is as shown below: All component types and levels are very clear and neat.
2. Then we make a product display list. (The way to add and modify the elements is the same)
After making a product display map, we directly copy a copy and modify the name of the corresponding component. (Note: When copying, copy the parent-level components. The parent components here are “Item1 area”)
Similarly, we need to adjust the level and name to distinguish.
Module 3: Purchase Prompts
Create a new state page, named “Prompts”
Then on this state page, add the corresponding component.
Set up page status
We have already done three page statuses. We will go back to the first page status to hide components and keep only one product entry component.
Then we choose the “list ui” page, and hide the whole components “Prompt”.
Interaction Logic(Trigger Settings)
Variables Settings
If you are unfamiliar with variables, you can refer to the following tutorials:
Variable
* Variable
* How to use the "Private Variable"
* *How to use the Global Variable*
* How to use the "IO battle gameplay - Play Variables in one game
First, we set the below variables
Global Variables
Items price (numerical group): used to store the price of goods.
Buy results (string group): The prompt text used to store the purchase results.
Lock (Boolean value): This is a process lock that makes the buying logic judgment of the trigger only judged once, and we use this for the trigger settings later.
Coin type (Item type): used to set the type of coin.
Item type (Item type group): used to store products.
Private Variables
Pay(numerical type): the amount you want to pay.
Purchased item(props type): the product type selected by the player.
Trigger Settings
→ The product list pops up and close
Use the same way to create new trigger when players click the “close button” and switch to the “Basic page” status.
→Click to buy item 1
When the player clicks to buy product 1, we need to assign the corresponding value to the player's private variable “Pay”, “Purchased item”.
So we create a new trigger named “buy item1” as the following steps show.
→Judgment of successful purchase
When the amount of currency owned by the player is greater than or equal to the price of the product, the purchase is successful, the player gets the item, and the player's currency = existing currency - price.
Create a trigger “Buy Succeed”, and set the trigger as following steps.
→Judgment of buy failure
For the trigger of buy failure, we only set one judgment condition temporary.
→Connect purchase-related triggers
The logic is this: when the player makes the purchase action, he will directly determine whether the purchase is successful. So we need to chain the actions of the triggers.
→Purchase result reminder
In order to be more interactive, we need to remind the player whether the purchase is successful.
Let's set up the “Buy succeed” prompts first.
Then we copy the actions that we just set to the trigger “buy failure” and modify the values.
Last but not least, we add a trigger to dismiss the prompt for purchase results.
Effect (not final)
So far, a store UI has basically been set up. Let's take a look at the effect first. (Currently we only set up the logic of purchasing item 1)
Application of logical lock
If we look at the gif above, you will find that when the last purchase is made, the player has 22 coins. \\Although the purchase is successful, the purchase prompt is: Not enough money!
After research, it was found that after the trigger “purchased successfully”, the player had 2 coins left, and the trigger “purchased failed” was also executed.
So we add a lock, Boolean type, the default is false (that is, the unlocked state). When the condition of the trigger “buy succeed” is determined to be successful, the state of the lock becomes true (lock=true), and the trigger “buy failure” does not need to be executed. And when the player closes the interface of the purchase result, the lock is opened again.
Complete other item purchase logic
We use the logic we learned earlier to set the purchase trigger for item 2 as well. (you can set as many items as you want)
