Solitaire - Blank Canvas Tutorial
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
#Content Editor #Blank Canvas #Advanced difficulty #Global Variables
Last updated
This tutorial primarily explains how to create a 2D playable ad for "Solitaire" gameplay using Blank Canvas. For best results, it’s recommended to use this tutorial alongside the !
*If you need the DEMO, please contact your AM to have it pushed to your Playturbo account.
[Difficulty]: ⭐⭐⭐
[Applicable Products]: Solitaire
[Interaction]: Drag/Press
[Freedom]: Semi free
[Core Assets]: Image
[Features]: Drag to target position-hide dragging card / show target position card；Global Variables
Scan to play
Before starting the production, we need to outline the gameplay logic for this case：
1）Upon entering the trial, and the card layout is displayed as shown. The "operation prompt" appears, guiding the player to drag the Ace of Hearts to the designated slot.
2）At this point, the player has three options, each draggable:
Dragging the Ace of Hearts to the target slot plays the "success feedback" and reveals the next card, Eight of Diamonds.
Dragging the Four of Spades to the Five of Hearts below it plays the "solitaire feedback" and reveals the next card, Two of Spades.
Dragging the Seven of Hearts to the Eight of Spades below it plays the "solitaire feedback" and reveals the next card, Ace of Clubs.
3）The player then drags the Ace of Clubs to the target slot, triggering the "success feedback" and revealing the next card, Nine of Diamonds.
4）At this point, the player has two options, each draggable:
Dragging the Nine of Diamonds below the Ten of Clubs plays the "solitaire feedback" and reveals the next card, Three of Spades.
Next, drag the Seven of Hearts and Eight of Spades under the Nine of Diamonds and Ten of Clubs, triggering the "solitaire feedback" and revealing the next card, Ace of Diamonds.
Dragging the Seven of Hearts and Eight of Spades to stack below the Nine of Diamonds plays the "solitaire feedback" and reveals the next card, Ace of Diamonds.
Next, Dragging the set of Seven, Eight, and Nine under the Ten of Clubs, triggering the "solitaire feedback" and revealing the next card, Three of Spades.
5）When the player successfully drags the Ace of Diamonds to the target slot, the "success feedback" is triggered, revealing the next card, Jack of Diamonds, and the trial is deemed complete.
6）Redirect Prompt: The "operation prompt" appears, guiding the player to drag the Ten of Clubs (maybe with Nine, Eight, and Seven below it) under the Jack of Diamonds. The player presses the screen, leading to a store redirect.
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: To keep things simple and manageable since this case only involves one card type interaction, we’ll use a single scene for production.
Visual Rendering
Scene Description
AfPlayers complete the solitaire based on game rules, and the trial ends once the Ace of Diamonds is successfully dragged to the target slot.
Core Assets
Static images: Cards of each suit, card back images, target slot images for Aces, score panel, guidance hand.
Particles: Sparkling particles.
Audio: Card flipping sound effect, error sound, success sound, placement sound.
Core Animations
Entry & exit guiding hand: Displacement Easing, Alpha Easing, Spin Easing.
Inactive guiding hand: Fadeln, Displacement Easing.
Card flip effect: UnfoldX.
Error feedback: Spin Easing.
Core Events
Trigger Object: Draggable cards
Trigger Event: Drag to target position
Response Event: Hide dragged card / show card at target position
Trigger Object: Non-draggable cards
Trigger Event: Press
Response Event: Play error feedback
Trigger Object: Scene
Trigger Event: Condition
Response Event: Hide old score / display new score
*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 background music and background image in "Global Settings."
Under "Global Scene," add persistent download buttons, logos, and other product information, adjusting their position, size, and grouping them logically.
1）In Scene 1, add core gameplay assets:
Images: Cards of each suit, card back images, target slot images for Aces, score panel, guidance hand.
Audio: Card flipping sound effect, error sound effect, success sound effect, placement sound effect.
2）Adjust each asset to the appropriate position and size, and organize by naming, grouping, and ordering based on asset type.
⚠️Please Note:
a. For this type of gameplay (where an item’s position changes after player interaction), the production logic is as follows: "Add the item to all possible positions, hide the item in its placed positions initially, then use events to display the placed item and hide the item in its original location" to achieve the desired effect.
Therefore, draggable cards should be added in all potential positions. Take the card "Spades 4" as an example. Aside from its initial position in the third column, it may also be placed under the "Hearts 5" in the first column. Thus, "Spades 4" needs to be added twice, placed in the appropriate groups accordingly.
b. In this case, we also need to ensure that "the dragged card's layer is above all other cards." Since layer order affects the stacking level, each draggable card requires an additional instance to manage layering issues.
Solution: One instance should be set as "draggable," and the other as "non-draggable/static display only," then group the former and position its layer above the latter.
3）Adjust the initial layer state: Show layers that "should display initially," and hide layers that "should only display after player interaction."
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, and then fine-tune the position and scale of each layer.
Global scenes follow the same principle.
If you want materials to perfectly adapt to various device types, you can also adjust the adaptation methods for certain layers.
In this case, we want the persistent information group in portrait mode to always be at the bottom of the screen for each device model. Therefore, we adjust its "Screen adaptation" to bottom-centered adaptation (other layers remain centered without adjustment).
The animations and particle effects used in this case are as follows. We will introduce each one in sequence:
Finger guide animation, card flip rotation animation, incorrect click rotation animation, and success placement star particle effect.
Select the entry guide hand image "gf_hand" and add animation - Universal - Spin Easing.
Select the entry guide hand group layer "gf_begin" and add animation - Universal - Displacement Easing & Alpha Easing.
These three animations together achieve the entry guide effect (if only a simple effect is needed, a single displacement animation can be used). Parameter settings are as follows:
Since the entry guide and exit guide animations are similar, simply copy the above two layer animations to the exit guide hand and make minor adjustments to the parameters.
Select the general guide hand group layer "gf_common," add animation - Universal - Displacement Easing, and Approach - FadeIn as a general guide animation when idle. Parameter settings are as follows:
Select one of the cards to be flipped, add animation - Approach - UnfoldX, as the card flip animation when the card appears. Parameter settings are as follows:
Copy this animation, hold down the Ctrl key, select all remaining card layers to be flipped, and paste it in one step.
When clicking on a non-draggable card, an error feedback of card shake is triggered.
Select one of the non-draggable cards, add animation - Universa - Spin Easing. Parameter settings are as follows:
Similarly, copy this animation, hold down the Ctrl key, select all remaining non-draggable card layers, and paste it in one step.
Open the Public Assets Library, select and add the appropriate particle effect to the "group_set" group.
In this case, since card A can appear in any of the first three slots, duplicate two additional particle layers, with each slot corresponding to a particle effect.
Remember to adjust the particle positions in landscape mode.
After adjustments are complete, hide the three particle layers, which will be activated by trigger events to play the particle effects later on.
After setting up all elements, we need to link the entire flow by configuring events. The event settings for this case can be categorized into four types:
Other Draggable Cards: Effects triggered for dragging without placing in the target position & dragging and placing in the target position.
Draggable Card A: Effects triggered for dragging without placing in the target position & dragging and placing in the target position (the event setting logic is the same as above), and additionally, use "Condition" to determine if the current target pit can accommodate Card A.
Non-draggable Cards: Play error feedback when a non-draggable card is pressed.
Redirect Event: Set up redirect events at all points where the store needs to be opened.
Next, we will explain each step in sequence.
To achieve the following:
a. When dragging Card A to the upper slot, it must be placed in order from left to right. For example, when dragging Club A, if Slot 1 is empty, Club A can be placed in Slot 1; if Slot 1 already has Heart A, Club A can only be placed in Slot 2 in the correct order.
b. Calculate the score for successful solitaire: Each time the player correctly places a card, the score increases by 10.
To implement the above effects, you need to use the Global Variables feature. First, add the variables:
Click the Global Variables icon at the top and Add variables.
Enter the variable name as "pit1". For easier understanding, you can set the variable type as "Text" and name the initial value as "empty" >>> representing the initial state of Slot 1.
Similarly, add the variables "pit2" and "pit3" >>> representing the initial states of Slot 2 and Slot 3, respectively.
Then, add a "Value" type variable named "score" and set the initial value to "0" >>> representing the initial score value.
Save the above variables and begin setting up the events.
(💡 This type of event setup is concentrated in the red area layer.)
Taking the Spades 4 as an example, select the draggable group layer for the Spades 4 [3_spade4_drag]:
1）Add Event - Drag: Set the draggable range to "Full Screen" and the drag direction to "Any Direction."
Add response events:
Show Material [spade4], which is the draggable Spades 4 in the group.
Hide Material [3_spade4], which is the initially displayed Spades 4.
Hide Materials [gf_begin] & [gf_common], which are the entry guide hand and no-operation guide hand.
Play the card drag sound effect from the beginning.
2）Add Event - Lift up
Add response events:
Hide Material [spade4], which is the draggable Spades 4 in the group.
Show Material [3_spade4], which is the initially displayed Spades 4.
Show Material [gf_common], which is the no-operation guide hand, and play the guide animation from the beginning.
The above two sets of events are for the effect of "dragged but not placed in the target position."
3）Continue to Add Event - Drag to target position, edit the drag area to the position of Hearts 5, set the draggable range to "Full Screen," and the drag direction to "Any Direction."
Add response events:
Set Tracking Event. And enter the tracking name, such as "Successfully Placed Spades 4 or Hearts 7."
Assign the value, set "score + 10" (corresponding: Correctly placing one card earns +10 points).
Disable the Lift up event for [3_spade4_drag] (since in this event, Spades 4 has been correctly placed, there’s no need to trigger the lift event again).
Disable the Press event for [1_heart5] (the non-draggable Hearts 5, which will play an error feedback event when pressed. This will be set later).
Hide Material [3_spade4_drag], which is the draggable group for Spades 4.
Show Material [1_spade4], which is the correctly placed Spades 4.
Hide Material [3_spade2_back], which is the back of the Spades 2 card.
Show Material [3_spade2], which is the revealed Spades 2 (since the initial state of Spades 2 is "hidden," and the "UnfoldX" animation for Spades 2 has been set to "AutoPlay" it will automatically play its animation upon initial display, so there’s no need to set a separate response event to play the animation).
Show Material [gf_common], which is the no-operation guide hand, and play the guide animation from the beginning.
Play the correct sound effect from the beginning.
The above events are for the effect of "dragged and placed in the target position."
4）Quickly Copy Events to All Other "Other Draggable Cards"
After setting up the above events, click to copy the layer [3_spade4_drag].
Hold down the Ctrl key to select all "Other Draggable Cards" layers, click the paste button, and choose "Paste layer events only."
This way, all "Other Draggable Cards" will have corresponding drag and lift up events.
Then, just fine-tune the drag areas and response events for each card layer accordingly.
(💡 This type of event setup is concentrated in the red area layer.)
Taking the Heart A as an example, select the draggable Heart A group layer [6_hearta_drag]:
1）You can first paste the above events and adjust the corresponding response objects.
2）Under the "Drag to target position" event, first edit the drag area to be the area of Pit 1, and then adjust the response events:
Delete the 'Play error feedback on press' disable event.
Add a response event: Display particle effect for Pit 1.
3）Under the "Drag to target position" event, add a "Condition": When pit1 = empty (corresponding: Pit 1 is empty).
And add a response event: Set pit1 = hearta (corresponding: Pit 1 is not empty, Heart A has been placed).
4）Copy and paste this "Drag to target position" event twice onto this layer, and edit the drag areas and modify the condition content and assignment events.
When pit1 ≠ empty and pit2 = empty: Set pit2 = hearta (corresponding: Pit 2 is not empty, Heart A has been placed).
When pit1 ≠ empty and pit2 ≠ empty: Set pit3 = hearta (corresponding: Pit 3 is not empty, Heart A has been placed).
5）Quickly copy events to all other "Draggable Card A."
After setting up the above events, click to copy the group layer [6_hearta_drag].
Hold down the Ctrl key and select all "Draggable Card A" layers (i.e., Clubs A and Diamonds A).
Click the paste button and choose "Paste layer events only."
Then, fine-tune each layer's corresponding drag area, condition, and response object.
⚠️ Please Note:
Since Diamonds A cannot be placed in Pit 1, only the states of Pit 2 and Pit 3 need to be considered, so you can delete the "Pit 1 is empty" condition event.
In this case, we set that "when the player successfully drags Diamonds A to the target pit, the trial is deemed complete." Therefore, under Diamonds A's "Drag to target position" event, an additional response event must be added:
Report the end of the playable ads.
Show material [gesture area] (i.e., the layer where the final redirect event of the trial is located).
6）Add Conditions.
Calculate the score for successful solitaire: Each time the player correctly places a card, the score increases by 10.
In the scene 1, Add Event - Condition.
Add Condition 1: score = 10, and check "Valid only once."
Add response events: Hide text 0; show text 10.
Continue this way to complete the setup of all Conditions.
The above events are for the effect of "Dragging Card A but not placing it in the target position" and "Dragging Card A and placing it in the corresponding pit."
(💡 This type of event setup is concentrated in the yellow area layer.)
1）Taking the Heart 5 as an example, select the non-draggable Heart 5 layer [1_heart5].
2）Add Event - Press. Add response events:
Play the error sound effect once from the beginning.
Play the shaking animation of Heart 5 from the beginning (Spin Easing).
3）Copy this event to all other "Non-draggable Cards" and make minor adjustments to the response objects.
Ending redirect: Select the layer [interactive area], Add Event - Press, and add response events - Set Tracking Event 5 "End page redirect" & Redirect to app store.
Persistent redirect: Enter the "Global Scene," select the persistent download button group [btn], Add Event - Press, and add response event - Redirect to app store.
These are all the events used in this case. With the completion of all event settings, our playable 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.
At the end of the tutorial, we have provided all the assets used in this case for you. Click on the compressed file to download it.
You can use these assets to follow the tutorial and try to make it, so that you can start using the Content Editor to make such materials as soon as possible.
Note: The first two types of events require using to achieve the complete effect. However, the event settings for this case are not very complex. Although there are multiple layers, making it a bit tedious, you can set up events for one layer first and then quickly complete the setup using the copy & paste functions for events.
