<Flip Card Reward>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
Please Note: This tutorial primarily explains how to create playable ads for "lottery/card draw gameplay with specified draw results" using Blank Canvas. It’s recommended to use this with the for the best results!
💡 By following the production logic in this case, you can also iterate on other similar gameplay materials!
[Difficulty]: ⭐⭐⭐
[Applicable Products]: Universal
[Interaction]: Press
[Freedom]: Fully free
[Core Assets]: Image/Sequence
[Features]: Press-Show/Hide layer；Global Variables
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
Enter the playable, showing the Initial Cards and the Six-Option Guide Animation.
Players can click to open any card. Upon clicking, the corresponding flip card feedback will play.
Creative Settings:
On the 1st, 2nd, or 4th click, the player will definitely reveal a coin.
On the 3rd click, the player will definitely reveal a pine cone.
After the player has flipped 4 cards in total (i.e., collected three coins), the reward feedback will play, unlocking the treasure chest.
When the player clicks the chest, they will be redirected to the app store.
Core Concept: Minimize the number of animations and events within each scene, maintain clear logic in scene segmentation, and keep the layer structure simple.
Scene Segmentation: Based on the gameplay logic from the previous section, we can consolidate the core gameplay into a single scene.
Visual Rendering
Scene Description
The Six-Option Guide will be displayed, and the chest will unlock after the player has flipped four cards in total.
Core Assets
Static Images: Question mark card, gray bottom card, regular coin, glowing coin, regular pine cone, glowing pine cone, treasure chest, progress bar and pit position images, operation guide.
Sequence Frame: Cards being flipped.
Sound Effects: Click sound, pit lighting sound, reward sound, chest unlock sound.
Core Animations
Finger Guide: Displacement Easing & Alpha Easing
Coin/Pine Cone Reveal Under Card: FadeInOut & Scale Easing
Coins/Pine Cones Lighting on Progress Bar: FadeInOut
Chest Pop-Up: Fadeln & Spin Easing & Scale Easing & Displacement Easin
End Circle:ZoomIn & Spin Easing
Core Events
Trigger Object: Question mark card
Trigger Event: Press & Condition
Response Event: Show/Hide layer;Assign the value
Trigger Object: Scene 1
Trigger Event: Condition
Response Event: Enable/Disable events;Show/Hide layer
*The core contents are Step1 [Scene Setup] & Step4 [Event Setting]
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
Add BGM, background color or images in the "Global Settings."
Add the relevant assets to Scene 1.
Adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project).
⚠️The production logic for this type of gameplay is "place the item at all possible locations where it could appear, then hide the items that will not appear in the initial state, and control the visibility of the corresponding items through events" to achieve the desired effect.
Due to the uncertainty of the player’s click order, any result might appear under any of the six cards, so coins and pine cones need to be added under all six cards, and set to hidden initially.
Adjust other layer initial state: Set any layers that don't need to be displayed in the initial screen to "hidden" status, and then control the visibility of these layers through events later (details can be reviewed within the project).
After completing the layout for portrait orientation, we need to adjust the "layout for landscape orientation" and the "screen adaptation for both landscape and portrait orientations."
Switch to landscape mode and select all the top-level layers.
Use the "Reuse vertical screen position configuration" function to automatically adjust the layout.
Then fine-tune the position and scale of each layer.
All layers in this case are set to center adapt by default, so there is no need to make special adjustments for screen adaptation.
The animations and sequences used in this case mainly include: six-option guide animation, coin/pine cone reveal animation under the cards, coin/pine cone lighting animation on the progress bar, treasure chest pop-up animation with zoom, end circle rotation animation, card flip sequence frames.
We will now introduce these in detail one by one.
💡 For creating non-linear guide animations, the logic is: group the finger image, then set Displacement Easing animations separately on the image and the group layer (one for horizontal movement and one for vertical movement), playing both animations together to achieve the effect. Therefore:
Select the guide hand image [gf_hand], and add animation - General - Displacement Easing (Click guide).
Select the guide hand group layer [hand_horizontal], and add animation - General - Displacement Easing (Horizontal movement animation).
Select the guide hand group layer [hand_vertical], and add animation - General - Displacement Easing (Vertical movement animation).
These animations together achieve the six-option guide effect (for smoother transitions, you can also add Alpha Easing animation). The specific parameter settings are as follows:
Each time a card is clicked, the corresponding sequence frame animation for that card will play.
Therefore, you need to copy the same sequence frames onto all six cards. Then, initially hide these layers, and later control the display and playback of the corresponding sequence frames via event settings.
After each card is clicked and flipped, the reveal animation of the item under the card will play.
For example, for the coin under card 1, select the layer [Coin exposure_2], and add the Exit animation - FadeInOut.
Then, select the group layer [coin1], and add the General animation - Scale Easing.
These two animations will play together to achieve the revealing effect. The specific parameter settings are as follows.
Next, copy these two animations to the layers [Pinecones exposure_2] and [pinecones1] under card 1, so that the reveal animations for both possible items under card 1 are complete.
Similarly, copy the animations to the corresponding coin and pinecone layers under cards 2 to 6.
After each card is clicked and flipped, the progress bar position will play the lighting animation of the corresponding item.
For example, for the first coin, select the layer [light up_2], and add the Exit animation - FadeInOut, with the specific parameter settings as follows.
Then, copy this animation to the second coin, third coin, and first pinecone layers, completing the setup quickly.
After flipping four cards and unlocking the treasure chest, a series of animations will play to pop up the treasure chest (optional; you can choose to only do a zoom-in animation).
Select the treasure chest layer [end_chest], and add the Approach animation - FadeIn, followed by General animations - Spin Easing & Scale Easing & Displacement Easing.
These multiple animations will play together to achieve the treasure chest pop-up effect. The specific parameter settings are as follows.
After the treasure chest pops up, a glowing circle effect will appear (optional).
Select the circle layer [light], and add the Approach animation - ZoomIn, followed by General animation - Spin Easing. The specific parameter settings are as follows.
After setting up all elements, we need to link the entire flow by configuring events.
The core event settings of this case focus on the "clickable card images" and "Scene 1." Next, we will explain them in sequence.
🌟To achieve the following:
a. Count Clicks: Determine the player’s click count, and play the corresponding feedback (card).
b. Interaction Toggle: Disable player clicks on the next card during the flip card feedback process, allowing clicks only after the feedback has finished (introduce a time gap).
c. Calculate Reward Quantity: Determine the number of rewards that appeared, and play the corresponding feedback (progress bar).
First, click on the [Global Variables] icon at the top and add a variable.
Enter the variable name, such as "blockchose1," and set the variable type and initial value, and save it for later use.
Follow the same steps to add other types of variables.
As the gameplay flow indicates, the event setup logic for all six cards is the same. Therefore, set up the events for one card first, and then quickly complete the remaining five cards using the copy & paste function!
Using Card 1 as an example:
1）Select the layer [yellowcard1], add event - press.
2）Add Condition 1: times ≠ 3 AND times ≤ 4 (corresponding to: when the player clicks Card 1 for the 1st/2nd/4th time).
3）Add response events:
Hide yellow card 1; display and play the sequence frames for flipping card 1; show gray base card 1; display coin 1 (by default, simultaneously play the reveal animation for the coin); play the click sound effect from the start.
Assign the value, assign times + 1 (corresponding to: the player clicked once).
Assign the value, assign tap = false (corresponding to: this prevents the player from clicking the next card).
After a delay of 0.5s, assign the value, assign reward + 1 (corresponding to: lighting up 1 reward).
After a delay of 0.5s, assign the value, assign tap = true (corresponding to: this allows the player to click the next card).
4）Copy and paste the above events, and modify Condition 2: times = 3 (corresponding to: when the player clicks Card 1 for the 3rd time).
5）Since the two conditions mainly serve to distinguish the player's click count to display the corresponding items, the response events are almost the same. Just change the displayed object from "Coin" to "Pinecone," and no other changes are needed.
1）As mentioned earlier, the logic for creating the six cards is the same. Therefore, we click the "Copy" button to copy the entire "Press" event from Card 1.
2）Hold down the Ctrl key and select all other card layers.
3）Click the "Paste" button at the top and choose [Paste layer events only]. This gives all cards a set of events and conditions with the same logic.
4）Then, adjust the corresponding response objects for each card individually.
With this, we have completed the "Press" event for all cards. Next, we will implement the subsequent effects through the Conditions on the scene.
Select Scene 1 - Add Event - Condition
4.1 Condition 1-2: Allowing Player Clicks
1）Edit Condition 1: tap = true (corresponding to: allowing the player to click the next card); sequentially add response events: enable the press events for Cards 1-6.
2）Edit Condition 2: tap = false (corresponding to: preventing the player from clicking the next card); sequentially add response events: disable the press events for Cards 1-6; and hide the finger guidance.
4.2 Condition 3-6: Assessing the Number of Rewards and Playing Corresponding Feedback
1）Edit Condition 3: reward = 1 (corresponding to: lighting up 1 reward); sequentially add response events: hide the first gray coin, show the first highlighted coin, and play the feedback sound effect from the start.
2）Similarly, edit Condition 4: reward = 2 (corresponding to: lighting up 2 rewards); sequentially add response events: hide the second gray coin, show the second highlighted coin, and play the feedback sound effect from the start.
3）Edit Condition 5: reward = 3 (corresponding to: lighting up 3 rewards); sequentially add response events: show the first highlighted pinecone and play the feedback sound effect from the start.
4）Edit Condition 6: reward = 4 (corresponding to: lighting up 4 rewards); sequentially add response events:
Hide the third gray coin, show the third highlighted coin, and play the feedback sound effect from the start.
After a delay of 0.5s: hide the black chest icon, show the chest, and play the chest pop-up animation from the start, along with the victory and correct feedback sound effect from the start.
After a delay of 0.6s: show the mask; show the glow.
After a delay of 0.6s: show the end guidance finger.
Select the chest layer [end_chest], add event - Press.
Sequentially add response events: Report the end of the playable ads; Redirect to app store; Play the click sound effect from the start.
These are all the events used in this case. With the completion of all event settings, our material is completed.
1）It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct.
2）Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.
To achieve the above effects, we need to use the feature. The following image outlines the usage of global variables in this case, which will help in understanding the process.
