# 2D Playable\Tutorial Please note: The basic template "Drag and Drop to the Specified Position" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐ * \[Applicable Products]:Universal * \[Interaction]: Drag and Drop * \[Number of Interactions]: 2-Step Rediect * \[Threads]: Single-threaded * \[Core Assets]: Static image * \[Features]: Animation - Universal, Animation - Fadeln,Event - Drag and drop to the specified location,Event - Drag. ## 2.Effect Preview | Best experience for playable on mobile devices | Vertical screen | Horizontal screen | | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | |

| | Scan to play | [Click to play](https://tinyurl.com/ysvzvajf) | [Click to play](https://tinyurl.com/ysvzvajf) | ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the trial, displaying the \[Puzzle Outline] and \[Two Fragment Buttons]. * Display the \[First Operation Guide], prompting players to drag Fragment A to the designated area of the puzzle outline. * When the player drags Fragment A to the specified area, trigger the \[Success Feedback]. * Display the \[Second Operation Guide], prompting players to drag Fragment B to the designated area of the puzzle outline. * When the player drags Fragment B and releases it, redirect to the 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 in Part Three, we determine that only one scene is needed for this case.

Scene Name	Scene 1-Inducing Drag and Drop
Visual Rendering
Scene Description	Display the gray background image and two puzzle fragments, guiding player to drag and complete the puzzle.
Animation	[Guide Text]: Scale Easing [Operation Guide]:Spin Easing + Displacement Easing + Alpha Easing [Fragment]:Scale Easing + Fadeln
Core Events	Trigger Object: Layer - Fragment A Trigger Event: Drag and drop to the specified location Response Events: Hide layers;Enable events;Disable events
Asset List	[Audio]: Background music, sound effects (click on sound effects/successfully place sound effects) [Images]:Background image, gray background image of the puzzle, puzzle fragments, drag and drop version of the puzzle fragments, guide finger, logo, CTA button [Text]: Guide text, product name, download text, disclaimer [Particles]

## 5. **Production Guidelines** ### **Step 1 - Scene Setup** #### **ⅰ. Global Settings** Add background music and background image in the "Global Settings" section.

#### **ⅱ. Global Scene** 1）Add persistent information in the "Global Scene": logo,product name, CTA button. 2）Adjust the position and size of each asset accordingly. 3）Group, arrange, and name the assets based on their types.

#### **ⅲ. Scene 1** 1\) Add sound effects, a gray background image for the puzzle, puzzle fragments, draggable versions of the puzzle fragments, guide finger, guide text, and particles to "Scene 1". 2\) Adjust the position and size of each asset as necessary. 3\) Group, arrange, and name the assets based on their types.

### Step 2 - Animation Production #### **ⅰ.** First Operation Guide 1）Select the image of Fragment A silhouette "cat\_A\_silhouette" on the left side of the layer panel and add the animation - Universal - Scale Easing.

2）Select the hand group "group\_hand" and add the animation - Universal - Spin Easing. Set the parameters as follows:

3）Select the whole group "cat\_A\_guide" and add the animation - Universal - Displacement Easing\&Alpha Easing. Set the parameters as follows:

Note: The second operation guide is similar to the first operation guide and can be quickly completed by \[copying/pasting the animations]. #### **ⅱ.** Fragment A pressed/released As per the template, when Fragment A is pressed, it should enlarge, and when Fragment A is released without being placed in the correct position, it should shrink. Therefore, we need to set up two Scale Easing animations for Fragment A. 1）Select the fragment A option image"cat\_A\_Options" and add the animation - Universal - Scale Easing.Set the parameters as follows:

2）Continue to add the animation - Universal - Scale Easing.Set the parameters as follows:

#### **ⅲ.** Fragment A correctly placed Select the correctly placed puzzle fragment A "cat\_A" , add animation - Approach - Fadeln. Set the parameters as follows:

### Step 3 - Logic Settings #### **ⅰ. Layer Events -** Fragment A We need to add three trigger events for Fragment A: when the fragment is pressed, when the fragment is not placed in the correct position, and when the fragment is successfully placed in the correct position. The corresponding trigger events are "Press", "Lift up", and "Drag and drop to the specified location". **Press** 1\) Select the layer for fragment A “cat\_A\_Options” and add event - press. 2\) Add response events - Play click sound; Play a single animation of fragment A. 3\) Add response events - Hide guide-related layers and Pause all related animations. 4）Other response events: Set postback event information; cancel execution delay.（Explain in the 'Lift up' event）

**Lift up** 1）Select the layer for fragment A “cat\_A\_Options” and add event - Lift up. 2）Add response events - Play a single animation of fragment A. 3）Add response events - Execution delay of 0.2s；Show layers about operation instructions and play related animations. *（Since we have set a timer to show the operation guide again when the fragment is Lifted up, we need to cancel that timer in the response event for "Press". Otherwise, the operation guide will appear while we are pressing the fragment.）*

**Drag and drop to the specified location** 1）Select the layer for fragment A “cat\_A\_Options” and add event - Drag and drop to the specified location. 2）Click on 'Edit the drag area', adjust the area to the appropriate size and save it, and select the drag direction as' Any Direction '.

3）Add response events - Disable events“Lift up”；Disable events“Press”. 4）Add response events - Hide layers“cat\_A\_Options”；Hide layers“cat\_B\_Mask” and play a single animation“cat\_B\_Options”. 5）Add response events - Play Fadeln animation for “Fragment A correctly placed”；Play related sound effects and particles. 6）Add response events - Execution delay of 0.2s，Show layers “the second operation guide” group；Enable events “cat\_B\_Options Drag”. 7）Other response events: Set postback event information.

#### **ⅱ. Layer Events -** Fragment B **Drag** 1\) Select the layer for fragment B “cat\_B\_Options” and add event - drag.Select the drag direction as \[any direction]. 2\) Add response events - Play click sound；Play a single animation of fragment B；Hide guide-related layers. 3\) Other response events: Set postback event information.

**Lift up** 1）Select the layer for fragment B “cat\_B\_Options” and add event - Lift up. 2）Add response events - Hide layers“cat\_B\_Options”；Hide layers about the second operation guide；Play a single animation of “fragment B”. 3）Add response events - Execution delay of 0.2s，Redisplay Layer fragment B；Show guide-related layers. 4）Other response events: Redirect to app store；Set postback event information；Report the end of the playable ads.

#### **ⅲ. Layer Events -** **CTA Button** Select the CTA button group, add event - Press, and add the response event - Redirect to app store.

### Step 4 - Overall Preview #### **ⅰ. Landscape Layout** After completing the vertical layout for each scene, it is recommended to perform landscape layout (using the "Reuse Vertical Position and Size Configuration" button frequently).

#### **ⅱ. Screen Adaptation** Perform screen adaptation for various device models and their orientations (portrait and landscape), and preview to check if the adaptation is appropriate.

#### **ⅲ. Overall Preview** After completing the entire production, you can perform an overall preview for different device models, languages, and orientations (portrait and landscape).

## 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 creating your own content, enabling you to get familiar with using the Content editor more quickly. {% file src="/files/PexoabcJ8hzUm8MAQla9" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.playturbo.com/playturbo-case-study/playable-content-editor/general-gameplay-cases/simple-tutorial-blank-canvas-tutorial/2d-playable-less-than-drag-and-drop-to-the-specified-position-greater-than-tutorial.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.