# 2D Playable\Tutorial 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

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

#### ## 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

Scene Name	Scene 1 - Inducing Selection	Scene 2/3/4 - Result Display	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

Illustration	Step
	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.

Illustration

Step

Events Setting

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.*

Illustration	Step (Example: Scene 2)	Events Setting
	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.

Illustration	Step	Events Setting
	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.

Illustration

Step

Events Setting

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

Illustration	Step
	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.

Illustration

Step

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.