<Dress-up Combination>Blank Canvas Tutorial
#Content Editor #Blank Canvas #Basic difficulty
Last updated
#Content Editor #Blank Canvas #Basic difficulty
Last updated
Please NoteοΌThis tutorial primarily covers Blank Canvas creation for "Decoration" gameplay playables. The "" template was independently created by the designer based on this tutorial without any code and later set as a template. It is essentially equivalent to a Blank Canvas project. You can directly use this template to create a Content Creation project as a reference for Blank Canvas creation. Following this tutorial alongside the template will make learning even more effective!
π‘The original project features six decoration options, but you can adapt this logic to add or remove options as needed to create different playables!
[Difficulty]: ββ
[Applicable Products]: Decoration gameplay
[Interaction]: Pess
[Freedom]: Fully free
[Core Assets]: Image/Sequence
[Features]: Pess-Show/Hide layer
Scan to play
Before starting the production, we need to outline the gameplay logic for this caseοΌ
Enter the playable (Scene 1): Display the idle character and six decoration options.
Operation Guide appears: Guides the player to click any option to decorate the character.
Player interaction: Players can freely switch between any options. Once clicked, the character plays the corresponding decoration feedback.
Proceed to the end page: When the player clicks the OK button, they are redirected to the app store and the end page (Scene 2).
On the end page: A full-screen tap will redirect the player 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, this case can be divided into 2 scenes for production: Core Gameplay + End Page.
Visual Rendering
Scene Description
Guide players to freely click and switch any option. Upon pressing, play the character decoration feedback.
Players tap anywhere to redirect to the app store.
Core Assets
Static Images: Character image, 6 decoration options, 6 post-decoration images, 2 option placeholders, placeholder panel, confirm button, operation guide Particle Effects: Starlight particles Sound Effects: Click sound, decoration sound
Static Images: Next-level thumbnail, next-level banner, CTA button Particle Effects: Starlight particles
Core Animations
Finger Guide: Displacement Easing + Scale Easing Option Guide: Alpha Easing Character Breathing Effect: Scale Easing
Redirect Button: Scale Easing
Core Events
Trigger Object: Decoration option
Trigger Event: Press
Response Event: Hide original decoration; display new decoration.
Trigger Object: Scene
Trigger Event: Press
Response Event: Redirect to app store
*The core contents is 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 and Background image in "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).
β οΈPlease Note: The creation logic for this type of gameplay is: β Add all potential items to the same decoration slot. β‘Hide all items except the initial displayed one. β’Use events to show the selected item while hiding other unnecessary items to achieve the desired effect.
Thus, each slot for the character's hairstyle and outfit needs to include four images: one initial decoration + three selectable decorations.
Due to the impact of layer hierarchy, each hairstyle needs to consist of two images (front and back) to better integrate with the character's face.
Adjust the layer's initial state: Set all potential decoration images to the "Hidden" state. Later, use events to control the visibility of these layers.
Add the relevant assets to Scene 2.
Similarly, adjust all assets to appropriate positions and sizes. Name, group, and organize assets based on their types (details can be reviewed within the project).
Mark Scene 2 as the "Ending Scene" to ensure proper reporting for the end of the playable.
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."
Taking scene 1 as an example, 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.
Scene 2 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 product information group to always appear at the top of the screen for all device models in portrait mode, so we adjust its "Screen adaptation" to centered and pinned to the top; for landscape mode, it is pinned to the top left corner
In this example: β For the vertical screen, we want the product information group to always appear at the top of the screen across all devices. Therefore, we adjust its "Screen adaptation" to Center-to-Top. β‘For the horizontal screen, we adjust the product information group to Top-Left Adaptation. β’For the confirm button, we ensure it is always positioned at the bottom of the screen in both vertical and horizontal modes.
(other layers remain centered without adjustment).
πRelated contentοΌ Screen adaptation
The animations and particle effects used in this case are as follows, introduced in order: Finger Guide Animation, Decoration Option Guide Animation, Character Breathing Animation, Redirect Button Guide Animation, and Decoration Star Particle Effect.
Select the finger guide group layer [group_hand], and add the Displacement Easing animation under "Universal" with the following parameters.
Then, add the Scale Easing animation under "Universal" with the following parameters.
Both animations play simultaneously to achieve the two-choice guiding effect.
Note: Adjust the displacement distance for horizontal mode accordingly.
Select the outfit option 1 image [options_1], and add the Alpha Easing animation under "Universal" with the following parameters.
Copy the animation to the hairstyle option 1 image [options] and tweak the curve style slightly with the following parameters.
Both animations play simultaneously, complementing the finger guide animation to create a guiding effect.
Select the character group layer [girl] and adjust its pivot to (50, 100).
Add the Scale Easing animation under "Universal" to simulate a breathing effect for the character, with the following parameters.
Copy the previous Scale Easing animation to the redirect button group layer [group_btn] in Scene 2.
Slightly tweak the parameters to use it as a guiding animation for the button with the following settings.
Open the public particle library, select a suitable particle effect for decoration feedback.
Remember to adjust the particle positions in landscape mode.
After setting up all elements, we need to link the entire flow by configuring events.
This case's event setup is relatively simple, focusing on all clickable layers (including six decoration options, a confirm button, a persistent download button, and the end-scene redirect). Next, we will explain the setup step by step.
Take Clothing Option 1 [clothing1_icon] as an example:
Add Event - Press.
Add response events:
Display and play decoration feedback (sparkle particle effect).
Hide the initial clothing, display Decorated Clothing 1, and hide Decorated Clothing 2 & Decorated Clothing 3.
Show the highlighted Clothing Option 1, and hide Highlighted Clothing Option 2 & Highlighted Clothing Option 3.
Hide the regular Clothing Option 1 and show Regular Clothing Option 2 & Regular Clothing Option 3. (Since the regular option images are above the highlighted images in the layer hierarchy, the highlighted images will only appear when the regular images are hidden. Conversely, the highlighted images will be covered when the regular images are displayed.)
Hide the character's initial expression and display the happy expression.
Play the click sound effect and decoration feedback sound effect once from the beginning.
Hide the guiding hand group and pause the Alpha Easing animations for both guiding options.
π‘ Since the event setup logic for each decoration option is identical, you can quickly replicate the settings using the "Copy & Paste Event" function.
Copy the "Press" event to the Clothing Option 2 group layer [clothing2_icon] and Clothing Option 3 group layer [clothing3_icon].
Adjust the visibility states between Option 1 and Option 2, and between Option 1 and Option 3, according to the gameplay logic.
Similarly, copy the "Press" event to the Hairstyle Option 1 group layer [hair1_icon].
Fine-tune and add new response events (Due to the front and back hairstyle.)
After completing the event setup for Hairstyle Option 1, copy the "Press" event to the Hairstyle Option 2 group layer [hair2_icon] and Hairstyle Option 3 group layer [hair3_icon].
Similarly, adjust the visibility states between Option 1 and Option 2, and between Option 1 and Option 3.
π‘Based on this production logic, you can add or remove options as needed to create different playable materials.
Select the confirm button group layer [group_btn_ok] and Add Event - Press.
Add response events:
Redirect to app store.
Redirect to the next scene.
Set Tracking Event 1. And enter the tracking name, such as "Click OK Button."
Add a "Press - Redirect to app store" event to the persistent download button.
Copy the Press event to Scene 2.
Add one more Custom Tracking Event.
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.
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.
πRelated contentοΌ
Position the particle effect appropriately, then hide the particle layer to prevent it from playing automatically. Use events later to trigger particle playback.
