UI Lottery - Card Flip Effect

(30-minutes reading)

After reading this lesson, you will learn how to realize the UI Card Flip Effect, which specifically covers the following knowledge points:

1. Understand the principle of the realization of the UI Card Flip Effect, and the UI frame animation performance realized through the trigger cycle.
2. Deepen the understanding of UI interface making and UI trigger setting.
3. The implementation and optimization of the lottery function.
4. Combine the lottery and card flip functions into a complete system.

First of all, we need to make the basic UI interface for the subsequent content.
Create the UI component content as shown in the picture below:

This component needs to be created by the player first after the background image is created. It can be any one of button, image or text. After adjusting the position, set the width and height of this components to 0:

After making the component with a size of 0,0, create a child component based on this component (note that the component here must be a “button”). At this time, the coordinates of the newly created sub-component are just (0,0).
The purpose of this is to move the position of this component to achieve the effect of flipping, and the coordinates of (0,0) are more convenient to set. Next, for the performance of the card flip, you can also create another image sub-component similar to a question mark on this component, but you need to remember the length, width and coordinates of the component:

For example, in the UI I made at this time, the coordinates of this picture are (37,51), the width is 80, and the length is 100:

The lottery button is relatively simple to make. You only need to create a new “button” sub-component at the level of the background image, and then add text to tell future players who play this map to press this button to start the lottery.

Before making triggers, we first need to create several necessary variables. After opening the variable library, create a “value” and a “props type group”. You can name them in a way that is convenient for you to understand. For example, here I named the numerical value “Number of Cycles” and named the item type group “Drawing Prizes”.

You can add various props to the prize pool that you want. Achieving a three card flip lottery will at least need three props in the variable props type group.

After the variables are created, the next step is to create trigger-related content:

First set a new trigger called “Animation Start” to run when players click the “Lottery Button”, and then set the trigger action as: run “Animation Start”.

To achieve the flip card animation effect, we need to create a frame animation that smoothly shortens and then restores the card element to its original shape.
For this purpose, the frame animation time is set to 1 second, with 0.5 seconds dedicated to the shrinking and restoration animations each.
To make the frame animation appear smooth, we need to increase the frequency of shrinking and restoration in each frame while minimizing the range. Thus, both animations are set to 10 frames, resulting in a total of 20 frames for the flip effect, with each frame lasting for 0.05 seconds.

Trigger “Animation start” does not need to set “event” and “condition”, only needs to set the action. Then add the action “loop operate trigger”, and then set it to “from 1 to 10” to make a 10-frame animation.

Next, create a new trigger “animation loop(1)” and let this action execute the “animation loop”, which is the animation of “zooming out” when the card is turned over.

• Please note: Animation Loop(1) is for card shrinking. Animation Loop(2) is for card flip back.
  

Card Shrinking
This trigger “Animation Loop(1)” also does not need to set “events” and “conditions”, only needs to set actions. First add the action “Assignment”, and set the value variable of “Number of Loops” created at the beginning to “Number of Loops” + 1.

To achieve the flipping effect of the card, we need to reduce the length of the card by one-tenth of its original size for each frame in the animation. Therefore, the next action sets the size of the card component to: 150 - (number of cycles x 15). The algorithm logic is based on the design of the card component, which has a length of 150. Therefore, each reduction is equivalent to one-tenth of 150, while the width remains unchanged. If you want to design components of different sizes, you can use this method to calculate the specific length to be changed for each frame.

However, the change in the size of the UI component will not be carried out based on the current center position, so the position of the component will be shifted, so it does not look like the effect of a flop. Show as the below gif.

So in addition to changing the length of the component every frame, we also need to keep the component in the center.
Add a new action to set the x-axis position of the component to: 0 + loop times x 7.5. The reason for multiplying by 7.5 is that we need to translate half the length of the card component to keep the card in the center at all times, while the y-axis coordinate remains unchanged at 0.

After setting the above steps, you can achieve the effect that the card component is always in the center.
But in the same way, if you add other icon sub-components to the card component for aesthetics, you need to repeat the above steps to ensure that the sub-components can be reduced together.
For example, I added a question mark sub-element at the beginning. The length is 80, then the length of each frame is: 80 - loop times x 8, and the width remains unchanged at 100. While the x-axis coordinate is 37, the position of each frame is: 37 - loop times x 4, and the y-axis coordinate is 51 and remains unchanged.

Now a ten-frame animation of shrinking is completed:

Card Flip Back
After implementing the frame animation for card shrinking, it becomes much easier to create the animation for card restoration. First, go back to the “Animation Start” trigger from the previous step, copy the two existing actions, and then duplicate the entire “Animation Loop” trigger and rename it to “Animation Loop 2”.

Then modify the length of the card in “Animation loop 2” to be: 0 + loop times x 15. The x coordinate is: 75 - loop times x 7.5.

Set the length of the question mark component to: 0 + loop times x 8, and the x-axis coordinates to: -3 + loop times x 4.
Because after the entire shrinking animation, the current x-axis coordinate of the question mark component is already -3, so the restoration should start from -3.

When the “animation loop 2” is all set, the effect of the entire card flip is ready.

If a player wants to flip over a single card, they need to copy the functions previously created to another trigger.
Firstly, a separate flipping effect for a single card needs to be created. To do this, we need to copy the triggers “Animation Start,” “Animation Loop 1,” and “Animation Loop 2” to a new trigger group named “Lottery Animation 1.”
Then, we add an event and condition to the “Animation Start” trigger that will trigger the flip animation when the card is pressed. Next, we adjust the trigger triggered by the loop action in the new trigger to also be that new trigger.
In this way, we can implement the effect of a player being able to flip over a single card.

Then copy and paste two card components into the UI.

Copy “Lottery Animation 1” twice more, and then match the components in the trigger with the newly copied components one by one.

After everything is done, you can realize the function of turning over each card individually

If you want to trigger the animation of all cards after pressing the start lottery button, you need to copy the actions of the new trigger you just created to “animation loop 1” and “animation loop 2”.

Once set, press the button to start animation of all cards.

Now that the player can turn over cards, we need to implement the following functions:
1. Players can not flip cards before pressing the start draw button.
2. A player can not reveal a card before revealing another card.
3. Players can not click on the uncovered cards.
4. After the player flips the card, provide the corresponding props to the player and change the icon of the corresponding card.
5. The player can not click the start draw button again until all three cards have been turned over.

Lottery Condition
Players can turn cards only after pressing the draw button to refresh the card display. To achieve this function, we need to add a new value type variable “start lottery”.

Then add an action to the “Start Lottery” trigger, and assign the value “start lottery” to 1.

Then add the condition [when “start lottery” equal to 1] to the “animation start” trigger of the “lottery animation” of the corresponding three cards to run the animation.

After it is all set down, it will be possible to achieve the effect that the player can not turn over the card before clicking to start.

Lottery Timer
Only one card can be turned over at a time. Therefore, we can add a Timer to the start button and the triggers of the three cards, and no lottery animation can be triggered again before the countdown ends. Note that each countdown timer action is placed at the top.

After adding Run Timer actions to the animation triggers of the lottery button and the three cards, add the condition of “Timer TimeEqual to 1” to the triggers of each button component.

After the setting is complete, before the card flip animation ends, the player can not click the card again, which can avoid problems in the process.

Lottery Limits After a player has turned over a card, the player can not turn over that card again.
To achieve such a function, it is necessary to create three new “value” variables “card judgment”

Then add a new action in the “animation start” trigger of each card: assign the corresponding variable “card judgment” to 1.
Then add a new condition: “card judgment is not equal to 1” in the current trigger. The corresponding trigger of each card needs to set the corresponding “card judgment” action and condition, and it is also necessary to pay attention to placing the action in the second place.

After the setting is complete, add three actions to the initial “Start Lottery” trigger and assign “Card Judgment” to 0 respectively.

Once set, the player can no longer turn over the card repeatedly until the “Start Lottery” button is pressed to reset the card.

Reward Distribution
When the player presses the card, the card will be turned over to show the props, and the props will be distributed to the player after the animation ends.
To achieve this effect, first we need to create three new props type variables “delivery props”.

Then add three actions to the trigger of “Start the Lottery” to randomly determine each prize. The action is [Set the distributed props to a random item type in the item type group].

After determining the props to be distributed, in the trigger of the corresponding card's “animation start”, insert the action “Modify the icon of the component” into the action after the frame animation of the component shrinks to make the card rotate and become a picture of the corresponding prop.
It should be noted that we need to add this action to the corresponding triggers of the three cards.

After setting the change of card flipping, add the action “Add Item” at the end of the same trigger to issue the corresponding item type to the player's backpack.

When the player turns over the card, the pattern of the question mark will be permanently changed into other props, and when the player needs to start a lottery again, the UI will become very messy. So to avoid this, we also need to reset the pictures on the cards after the player presses the “Start Lottery” button and flips the three cards over.

Added three actions to the “Animation Start” trigger where control all three cards are flipped at the same time to restore the three question marks to the original question mark pattern. As shown in the figure below.

After setting the above steps, you can refresh the lottery content on the card every time you refresh the button, and provide the corresponding props to the player after the player opens the card.

Reset Lock
If you want players to not be able to reset the content of the lottery by clicking the “Start Lottery” button before turning over all the cards, you can implement the specific function through the following steps.
Create a new value variable “Raffle Progress”

Then add two actions “Assign 'Raffle Progress' to 0” and a hidden component “Lottery Button” in the trigger “Start the Lottery”.

Then add an action “Assign 'Raflle Progress' to 'Raffle Progress' + 1” in the button triggers of the three cards.

Finally, create two new triggers: “Display button 1” and “Display button 2”. Set the event of “Display button 1” to “current interface any button is released”, the action to “pause 1.5 seconds, continue to perform the next action” “operate Display button 2”, and set the check condition to “true”.

Then set the condition of the trigger “Display button 2” to “the raffle progressEqual to 3”, and the action “display the lottery button”.

After setting all these triggers, the functions of the entire lottery UI are completed.