# 2D Playable\Tutorial Please note: The basic template "Hide after Clicking on the Item" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐⭐ * \[Applicable Products]:Universal * \[Interaction]: Click * \[Number of Interactions]: 3-Step Rediect * \[Threads]: Single-threaded * \[Core Assets]: Static image * \[Features]:Animation - Fadeln, Animation - ZoomOut,Animation - ZoomIn,Event - Press to hide layers, Event - Press to show layers. #### ## 2.Effect Preview

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

#### ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the trial, displaying the \[Initial Amount] and six gift boxes scattered on the table. * Show the \[Operation Guide] , prompting player to click to open Gift Box A. * After the first press, open Gift Box A: Play the \[Prize Feedback] and display the \[First Amount]. * Show the \[Operation Guide] again, prompting player to click to open Gift Box B. * After the second press, open Gift Box B: Play the \[Prize Feedback] and display the \[Second Amount]. * The \[Reward Popup] appears, and player presses anywhere on the screen, 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 Click
Visual Rendering
Scene Description	There are multiple gift boxes on the table. Guide player to click to open the unlocked gift box.
Asset List	[Audio]: Background music, sound effects (unlock sound effects/reward sound effects/victory sound effects) [Images]: Background image, character image, gift box image, amount panel image, reward pop-up image, guide finger, logo, CTA button [Text]: Guide text, amount text, reward pop-up text, product name, download text, disclaimer
Animation	[Character's Breathing Sense]:Scale Easing [Amount Text]: ZoomOut [Reward Popup]: Fadeln + Scale Easing [Scattered light]: ZoomIn + Spin Easing
Core Events	Trigger Object: Layer - interactive area Trigger Event: Press Response Events: Hide layers;Show layers

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

#### **ⅱ. Scene 1** 1\) Add audio, amount panel image and text, reward pop-up image and text, gift box image and text, character image, guidance, resident information and disclaimer 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 This case involves multiple animations, most of which are designed to enhance the effects of the gift boxes. Moreover,some animations have been covered in previous cases. Therefore, a detailed tutorial will not be provided here. This case will focus on explaining animations that have not been previously introduced. #### **ⅰ.** Character's Breathing Sense 1）Select the character image "role" on the left side of the layer panel,and change the pivot to (50,100).

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

#### **ⅱ.** Amount Text Select the amount text "money\_0" on the left side of the layer panel and add the animation - Exit - ZoomOut. Set the parameters as follows:

Note: The amount texts \[money\_1] and \[money\_2] require additional Fadeln and Scale Easing animations. For specific parameter settings, please refer to the project for details. #### **ⅲ.** Reward Popup 1）Select the reward popup group "endboard" on the left side of the layer panel and add the animation - Approach - Fadeln.Set the parameters as follows:

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

#### **ⅳ.** Scattered light 1）Select the scattered light image "light" on the left side of the layer panel and add the animation - Approach - ZoomIn. Set the parameters as follows:

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

### Step 3 - Logic Settings #### **ⅰ. Layer Events -** interactive area **1（**Red gift box**）** 1\) Select the layer for interactive area 1. 2\) Add event - Press. 3\) Add response events - Hide layers“tap 1”.（Ensure that player can only click on the red gift box once） 4）Add response events - Hide guide-related layers. 5）Add response events - Play exit animation from the beginning of red gift box; Show layers “reward 1”; Play related reward animations and special effects sound effects. 6）Add response events - Play exit animation from the beginning of amount text 0；Show layers money\_1”，Play related text animations.

7）Add response events - Execution delay for 1 second. 8）Add response events - Play animations related to the blue gift box; Show layers about operation instructions and play related animations. 9）Other response events: Set postback event information.

#### **ⅱ. Layer Events -** interactive area **2（**Blue gift box**）** The event settings of blue gift box are the same as those of red gift box.It can be quickly completed by fine-tuning after \[Copying/Pasting Events]. Different event settings: 1\) Add response events - Execution delay for 1 second. 2\) Add response events - Show layers about Reward Popup and play related animations and sound effects. 3\) Other response events: Set postback event information/ Report the end of the playable ads.

#### **ⅲ. Layer Events -** **CTA Button** Select the button group of Reward Popup, add event - Press, and add the response event - Redirect to app store/ Set postback event information.

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. --- # 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-hide-after-clicking-on-the-item-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.