Draw Lines Component - Blank Canvas Tutorial
#Content editor #Blank Canvas #Draw Lines Component #Simple difficulty
Please NoteοΌThis tutorial mainly explains how to create interactive materials with the "draw lines gameplay" through Draw Lines Component in Blank Canvas. It is recommended to use it together with the demo and feature introduction document for a better understanding!
1. Basic Info
[Difficulty]: ββ
[Applicable Products]: Draw lines gameplay
[Interaction]: Begin Drawing/Finish Drawing
[Freedom]: Fixed process
[Core Assets]: Image
[Features]: Begin Drawing - Hide the guideοΌFinish Drawing - Redirect to the next scene
2.Effect Preview
| Best experience for playable on mobile devices | Vertical screen | Horizontal screen |
|---|---|---|
Scan to play |
3. Gameplay Overview
Before starting the production, we need to outline the gameplay logic for this caseοΌ
Upon entering the trial, displaying "A girl with a pimple on her forehead" and "Operation guiding" to guide player to draw a line on the forehead to squeeze the pimple.
When the player draws any line on the forehead, play the "Success feedback" and then redirect to the end page.
On the end page, when the player presses anywhere, redirect him to app store.
4.Production Approach
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 overview from the previous section, we can divide this case into 3 scenes for production.
| Scene Name | Scene 1 - Core Gameplay | Scene 2 - Result Feedback | Scene 3 - End Page |
|---|---|---|---|
Visual Rendering | |||
Scene Description | Guide player to draw a line on the forehead to squeeze the pimple. | Play success feedback after the player completes drawing the line. | Product information + Redirect button |
Core Assets | Static Images: Pimple Girl, Guiding Halo, Acne Needle Audio-visual packaging: Click Sound Effect | Static Images: Clear Skin Girl, Feedback Text Audio-visual packaging: Success Sound Effect, Ribbon Particles, Star Particles | Static Images: Product informationγRedirect button Audio-visual packaging: Star Particles |
Core Animations | Acne Needle:Displacement Easing Guiding Text:Displacement Easing Guiding Halo:Alpha Easing | Feedback Text:ZoomIn2 | Redirect Button:PulseFront |
Core Events | Trigger Object: Draw Lines Component Trigger Event: Finish Drawing Response Event: Redirect to the next scene | Trigger Object: Scene2 Trigger Event: Timing trigger Response Event: Redirect to the next scene | Trigger Object: Scene3 Trigger Event: Press Response Event: Redirect to app store |
5. Production Guidelines
*The core content consists of Step4 "Event Setting."
Step 1 - Scene Setup
It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
I. Global Scene
1οΌAdd BGM and Background Image in the "Global Settings" section.
2οΌAdd permanent download button, logo and other product information under "Global Scene", and adjust their position size.
II. General Scene
II-IοΌScene 1
1οΌAdd core gameplay assets to scene 1.
2οΌAdjust the position and size of each asset accordingly and group, arrange, and name the assets based on their types.
3οΌAdd component: Click "Gameplay Template" and add the "Draw Lines" component from the "Component".
4οΌAdjust component parameters: Directly drag/stretch the green rectangle on the canvas to adjust the position and size of the component to fit the forehead. Then set the color and thickness of the drawn line.
II-IIοΌScene 2
1οΌAdd result feedback assets to scene 2.
2οΌAdjust the assets to the appropriate positions and sizes.
II-IIIοΌScene 3
1οΌCreate a new scene 3 and add product information assets.
2οΌCheck scene 3 as the "Ending Scene" for reporting the end of the playable ads.
3οΌDisable the "Global scene" option for scene 3.
Step 2 - Landscape & Portrait Orientation Adaptation
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."
I. Adjust the layout for landscape orientation.
1οΌIn scene 1, switch to landscape mode and select all the top-level layers (including the Draw Lines Component layer).
2οΌUse the "Reuse vertical screen position configuration" function to automatically adjust the layout, and then fine-tune the position and scale of each layer appropriately to display the complete core gameplay content.
3οΌSimilarly, switch to scene 2, scene 3, and the "Global Scene" one by one, use the "Reuse vertical screen position configuration" feature to automatically adjust the layout, and then fine-tune the positions and sizes.
II. Adjust the screen adaptation.
In this case, we want the persistent information group in portrait mode to always be at the top of the screen for each device model. Therefore, we adjust its "Screen adaptation" to "Top-Fit" (other layers remain centered without adjustment).
Step 3 - Animation Setting
In this case, the animations and particle effects used are as follows. Let's introduce them one by one:
Scene 1: Acne Needle movement animation, Guiding Text movement animation, Guiding Halo blinking animation.
Scene 2: Feedback Text entrance animation, Ribbon particles, Star particles.
Scene 3: Redirect Button scaling animation, Star particles.
I. Acne Needle: Displacement Easing
1οΌSelect the acne needle image [prop] , Add Animation - Universal - Displacement Easing,to achieve horizontal movement as a guiding animation.
2οΌCopy the animation to the acne needle group layer [group_prop], adjust the animation parameters for vertical movement as a guiding animation.
3οΌCombine the two animations to create a looping guiding animation for the acne needle. Set the parameters as follows:
II. Guiding Text: Displacement Easing
Select the guiding text [text_guidelines] , Add Animation - Universal - Displacement Easing. Set the parameters as follows:
III. Guiding Halo: Alpha Easing
Select the guiding halo image [flash], Add Animation - Universal - Alpha Easing, to create a twinkling effect. Set the parameters as follows:
IV. Feedback Text: ZoomIn2
Select the feedback text [text_welldone], Add Animation - Approach - ZoomIn2. Set the parameters as follows:
V. Redirect Button: PulseFront
Select the redirect button group [group_download] in scene 3, Add Animation - Emphasize - PulseFront, to create a looping guiding animation for the button. Set the parameters as follows:
β
₯. Particle Effects: Ribbon particles&Star particles.
1οΌClick on [Asset Library] - [Particle], choose and add star particles to enhance the visual ambiance of the end page.
2οΌAdjust the particles to the appropriate position.
3οΌSimilarly, in scene 2, add ribbon particles and starburst particles to enhance the visual effect of the success feedback.
4οΌAdjust the particle positions for portrait orientation, and also switch to landscape mode for adjustments.
Step 4 - Event Setting
The contents related to events and setups in this case are as follows: hiding the operation guiding when beginning drawing, redirecting to the next scene when finishing drawing,redirecting to the end page after playing the success feedback, and redirecting to app store when the button is pressed on the end page.
Next, we will explain them in order.
I. Layer: Draw Lines Component
1οΌSelect the Draw Lines Component layer in Scene 1, click "Add Event," and choose "Begin Drawing" as the trigger event.
Add response event: Set Tracking Event,and edit the tracking name as "First Effective Action."
Add response event: Hide the acne needle group layer, hide the guiding halo, and play the click sound effect once from the beginning.
2οΌContinue to "Add Event" and choose "Finish Drawing" as the trigger event.
Add response event: Redirect to the next scene.
II. Scene 2
In Scene 2, click "Add Event," choose "Timing trigger" as the trigger event.
Set the execution delay time to 1 second.
Add response event: Redirect to the next scene.
III. Scene 3
In Scene 3, click "Add Event," choose "Press" as the trigger event.
Add response event: Set Tracking Event,and edit the tracking name as "End Page Triggered."
Add response event: Redirect to app store.
β
£. Layer: Persistent download button group
Select the persistent download button group under "Global Scene," click "Add Event," and choose "Press" as the trigger event.
Add response event: Redirect to app store.
These are all the events used in this case. With the completion of all event settings, our material is completed.
Step 5 - Overall Preview
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.
6.Assets Provision
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.
Last updated
