2D Playable<Choose One from Three>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
This tutorial aims to explain how to create a multi-scene playable ad using the Content Editor, and we will use a case study to teach you how to quickly make a "Choose One from Three" type playable ad!
1. Learning Objectives
Multi-scene Production: Understand what "scenes" are and learn how to quickly set up new scenes by copying existing ones.
Interactive Events: Learn how to use "events" (including trigger events, such as a button press, and a series of response events, such as redirecting to app store) to link "scenes" together, creating a complete playable ad.
Three-Option Preset: Use Presets Library assets to quickly create a "Choose One from Three" finger animation.
2.Basic Info
[Difficulty]:⭐⭐
[Applicable Products]:Universal
[Interaction]: Press
[Number of Interactions]: 3-Step Rediect
[Threads]: Multi-threaded
[Core Assets]: Static image
[Features]:Copy Scene, Presets, Basic Animations, Basic Events.
3.Effect Preview
4. Gameplay Overview
Before starting the production, we need to outline the gameplay logic for this case：
When entering the trial, the initial screen shows a main character, with three different character cards displayed below. A guide appears, prompting the player to click on any of the cards to unlock a new character.
If the player clicks the left card, a red treasure chest appears, unlocking New Character A.
If the player clicks the middle card, a purple treasure chest appears, unlocking New Character B.
If the player clicks the right card, a green treasure chest appears, unlocking New Character C.
Once the corresponding new character is unlocked, it will automatically redirect to the ending screen. On the ending screen, the player clicks the button to redirect to app store.
5.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 split this case into the following 5 scenes:
Scene 1: Inducing Selection (Three Options)
Scene 2: Displaying Result A after Selection
Scene 3: Displaying Result B after Selection
Scene 4: Displaying Result C after Selection
Scene 5: End Page
Visual Rendering
Scene Description
In the character unlock scene, guide the player to click on any card to unlock a new character.
After selection, a treasure chest will appear, and the player is guided to click to open the chest.
Once clicked, the new character's card is displayed, and the player is then redirected to the end page.
On the end page, show the product information and the redirect button.
Core Assets
Images: Main character, 3 card buttons, 3 button halos (optional), finger, logo, CTA button
Text: Instructional text, download text
Images: 3 treasure chests, scattering light, 3 new character cards, external glowing sequence frames, finger, logo, CTA button
Particles: Explosion, smoke explosion
Text: Instructional text, download text
Sound Effects: Fireworks explosion sound, flash sound effect
Images: 3 characters, 2 CTA buttons, logo
Core Animations
Finger: Displacement Easing + Alpha Easing
Button Outer Glow x3: Alpha Easing
Instructional Text: Alpha Easing
Main Character: Scale Easing
Scattering Light: ZoomIn + Spin Easing
Treasure Chest: ZoomIn + Displacement Easing + Tada + ZoomOut2
Finger: Fadeln + Scale Easing
New Character Card: ZoomIn + Displacement Easing
Character: Displacement Easing
CTA Button: Scale Easing
Core Events
Trigger Object: Button x3
Trigger Event: Press
Response Event: Redirect to the specified scene 2/3/4
Trigger Object: Treasure Chest
Trigger Event:Press
Response Event: (See Step 3 in Section 6)
Trigger Object: CTA Button
TrTrigger Event: Press
Response Event: Redirect to app store
6. Production Guidelines
Step 1 - Basic Scene Setup
Add background image and background music in Global Settings.
Step 2 - Scene 1 Creation (Induce Selection)
Step Summary: Use the "Three-Choice" preset to quickly complete animation creation.
Create Operation Instructions using preset
The Presets Library provides pre-made effects and functions, including layer setup, animation settings, etc. You can quickly complete the creation by replacing assets.
① Add Preset:
Click on the Presets Library, find the "Three-Choice" preset, and add it. A new scene will be automatically generated, which will serve as Scene 1
(You can delete the default Scene 1.)
② Replace Card Buttons x3/ Finger Style
Select option layers A/B/C and the finger, and replace the card button and finger styles in the parameter settings area on the right.
(Optional: Since this case does not use the button Scale Easing animation provided by the preset, you need to delete the original animation and create a new Alpha Easing animation for the outer glow.)
③ Adjust Instruction Text Content and Position
You can directly drag the instruction text to the desired position and modify the text content in the parameter settings area on the right. Adjust the style as needed.
Tips: To achieve a more polished or personalized effect, you can add outer glow images or background images for the instruction text.
Layer Event 1
Select the Card Button A1 group
Add Event - Press;
Add Response Event - Redirect to the specified scene 2
Layer Event 2
Select the Card Button B1 group
Add Event - Press;
Add Response Event - Redirect to the specified scene 3
Layer Event 3
Select the Card Button C1 group
Add Event - Press;
Add Response Event - Redirect to the specified scene 4
Layer Event 4
Select the CTA Button group
Add Event - Press;
Add Response Event - Redirect to app store
Add Main Character Image
① Import the main character image, adjust the position and size to fit, and drag the image to the bottom of the layer stack.
② Select the main character layer, set the pivot to (50, 100), and add a Scale Easing animation to create a breathing effect for the character.
Add Product Information + CTA Button
① Import the logo and adjust the position and size to fit.
② Add the CTA button and text, then group them together.
Step 3 - Scenes 2/3/4 Creation (Display Result Selection)
Step Summary: Focus on creating one of the result selections first. Once that scene is set up, use the "Duplicate the Scene" function to quickly build the remaining two scenes.
Note: The feedback triggered by clicking the card buttons only differs in the "treasure chest" and "new character card" styles. The rest of the scene remains the same, so we use the "Duplicate the Scene" function for faster creation.
Copy Layers
① Directly copy the "logo", "CTA button", "instruction text", and "finger" from Scene 1 to Scene 2.
② Modify the content of the instruction text.
Tips: There are two instruction texts in this scene, so when copying the instruction text group from Scene 1, you can copy an additional layer and modify the text content.
Layer Events
Select the treasure chest group
Add Event: Press
Add response event: Hide Instruction 1
Add response event: Play the treasure chest group animation from the start；Play the flash sound effect (animation and sound when the treasure chest opens)
Add response event: Delay execution, set the timer for 1 second. Add response event: Show the new character card group；Show Instruction 2
Add response event: Delay execution, set the timer for 2 seconds. Add response event: Redirect to the specified scene (Scene 5, End Page)
Add Treasure Chest
① Add the treasure chest image to the canvas and adjust its position and size as needed.
② Add "Approach - ZoomIn" and "Universal - Displacement Easing" animations to the treasure chest layer to give it dynamic effects.
③ Group the treasure chest, and then add "Emphasize - Tada" and "Exit - ZoomOut2 animations to the group, simulating the dynamic effect of the chest exploding when clicked. Note: Since the treasure chest explosion occurs only after the player clicks the chest, you need to disable the autoplay feature for the explosion animations.
Add Particle Effects
① In the Assets Library - Public Assets, add the particle effects "Explosion" and "Smoke Explosion" (adjust particle parameters as needed).
② Add the scattering light image, adjust its position and size, and apply "Approach - ZoomIn" and "Universal - Spin Easing" animations.
③ Drag the three effect layers below the treasure chest layer.
Add Finger Animation
Add "Approach - Fadeln" and "Universal - Scale Easing" animations to the finger layer to simulate the clicking effect.
Add New Character Card
① Add the new character card and external glow frame-by-frame animation, group them, and adjust the position and size as needed.
② Add "Approach - SlideZoomInUp" and "Universal - Displacement Easing" animations to the new character card group to enhance the visual effect. (Tips: When working on this step, you can temporarily hide the other layers to make the operations easier.)
③ After adjustments, hide the new character card group and the second set of instruction texts. Use event settings to show them only after the player clicks the treasure chest.
Duplicate the Scene
① After completing Scene 2, right-click on Scene 2 and select Duplicate the Scene to quickly duplicate Scene 3 and Scene 4.
② Replace the "Treasure Chest" and "New Character Card" layers in Scene 3 and Scene 4 to complete these two scenes.
Step4 - Scene 5 Creation (End Page)
Step Summary: Use simple "Scale Easing" animations to create a breathing effect for the CTA buttons on the end page.
Add Multiple Characters
① Add multiple character images and adjust their position and size.
② Apply "Universal - Displacement Easing" animations to each character to create a breathing effect. Tips: To make the scene look more natural, set different displacement distances for each of the three characters so they move in different directions.
Layer Event
Select the CTA button group.
Add Event: Press
Add the response event - Redirect to app store.
Add Product Information + CTA Buttons
① Add the logo and adjust its position and size as needed.
② Add two CTA buttons in the same style but with different colors, along with corresponding text, and group them together.
③ Apply "Universal - Scale Easing" animations to the two button groups to create a staggered breathing effect using different curve settings.
Step 5 - Overall Preview
Additional Notes - Landscape Layout
After completing the portrait layout for each scene, you will need to adjust the layout for landscape mode. (It is recommended to frequently use the "Reuse vertical screen position configuration" button.)
Additional Notes - Screen adaptation
Adjust the layers that need screen adaptation and preview the adaptation effect to ensure it fits properly.
Overall Preview
① It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct.
② Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.
Last updated