# 2D Playable\Tutorial Please note: The basic template "Switch multiple items" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐ * \[Applicable Products]:Universal * \[Interaction]: Click * \[Number of Interactions]: Unrestricted * \[Threads]: Multi-threaded * \[Core Assets]: Static image * \[Features]:Animation - Scale easing, Event - Press to redirect to the specified scene,Event - Timing trigger. ## 2.Effect Preview | Best experience for playable on mobile devices | Vertical screen | Horizontal screen | | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | |

| | Scan to play | [Click to play](https://tinyurl.com/mvkw8ys9) | [Click to play](https://tinyurl.com/mvkw8ys9) | ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the trial, displaying \[Girl Style A] and \[Left/Right Switch Buttons]. * Display the \[Operation Guide], prompting player to press the \[Right Switch Button]. * At this point, the player can press either left or right button. After the first press of any button, play the \[Outfit Feedback]. * Display the \[Operation Guide] again, prompting player to press the \[Confirm Button]. * Before the player presses the \[Confirm Button], they are free to press either left or right button to switch styles, with no limit on the number of times. * When player presses the \[Confirm Button], 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 can divide this case into 4 scenes for production. (Scenes 1-3 correspond to 1 set of girl's styles respectively; Scene 4 is the end page)

Scene Name	Scene 1-Inducing Switch	Scene 2- Inducing Click	Scene 3- Inducing Click	Scene 4- End page
Visual Rendering
Scene Description	Display Girl Style A and guide player to click the right switch button.	Display Girl Style B and guide player to click the confirm button.	Display Girl Style C and guide player to click the confirm button.	End page, guide to click the download button
Animation	[Girl]: Scale easing [Guide Finger/arrow]: Scale easing	[Girl]: Scale easing [Guide Finger/arrow]: Scale easing	[Girl]: Scale easing [Guide Finger/arrow]: Scale easing	[Download button]: Scale easing
Core Events	Trigger Object: Layer - Left and right arrows/Confirm button Trigger Event: Press Response Event: Redirect to the specified scene	Trigger Object: Layer - Left and right arrows/Confirm button Trigger Event: Press Response Event: Redirect to the specified scene	Trigger Object: Layer - Left and right arrows/Confirm button Trigger Event: Press Response Event: Redirect to the specified scene	Trigger Object: Layer - Download button Trigger Event: Press Response Event: Redirect to app store
Asset List	[Audio]: Click on sound effects and switch style sound effects [Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button [Text]: Guide text, confirm button text, download text [Particles]	[Audio]: Click on sound effects and switch style sound effects [Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button [Text]: Guide text, confirm button text, download text [Particles]	[Audio]: Click on sound effects and switch style sound effects [Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button [Text]: Guide text, confirm button text, download text [Particles]	[Image]: Background image, logo, CTA button [Text]: Download text [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, 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-3** 1）Add sound effects, girl style images, switch arrows, confirm button, fingers, guide text, particle effects to "Scene 1". 2）Adjust the position and size of each asset accordingly. 3）Group, arrange, and name the assets based on their types.

Note: Since the asset distribution is largely the same across the three scenes (with Scene 1 having an additional set of “group\_hand”), We can achieve quick production by duplicating the scene. #### **ⅳ. Scene 4** 1）Add virtual background image, logo, download button, particles to "Scene 4". 2）Adjust the position and size of each asset accordingly.Group, arrange, and name the assets based on their types. 3）Select Scene 4 as' Ending Scene 'in Scene setting on the right; Simultaneously cancel Scene 4 \[Enable Global Scene].

### Step 2 - Animation Production #### **ⅰ.** Character's Breathing Sense 1）Select the character group "role" in scene 1,and change the pivot to (50,100).

2）Continue to add the animation - Universal - Scale Easing(As the girl's Approach animation). Set the parameters as follows:

3）Continue to add the animation - Universal - Scale Easing(As the girl's breathing sense animation). Set the parameters as follows:

Note: The girl's breathing sense animation in Scene 2/Scene 3 is the same as Scene 1, and can be quickly completed through \[Copy/Paste Animation]. #### **ⅱ. CTA button** 1）Select the CTA button group "ctat\_download" in scene 4. 2）Add the animation - Universal - Scale Easing. Set the parameters as follows:

### Step 3 - Logic Settings Since the event settings for Scene 2 and Scene 3 are similar to Scene 1, I will use Scene 1 as an example to illustrate. You can quickly complete the event settings for Scene 2 and Scene 3 by copying and pasting events. Additionally, this case involves the function of “Global variables”, which belongs to advanced operations and do not significantly impact of this case. Therefore, I will not provide an explanation on “Global variables” here. #### **ⅰ. Layer Events -** Arrow 1）Select the group layer for “right\_arrow”. 2）Add event - Press. 3）Add response events - Play click sound；Play Scale Easing animation from the beginning of right arrow. 4）Add response events - Execution delay of 0.2s,redirect to the specified scene. 5）Other response events: Set postback event information.

Note: The event settings for left arrow are the same as those for the right arrow, so you can quickly complete the production through \[Copy/Paste Event]. #### **ⅱ. Scene 1： Layer Events -** Confirm button 1）Select the layer for “group\_confirm”. 2）Add event - Press. 3）Add response events - Redirect to the specified scene（Ending page）；Redirect to app store. 4）Other response events: Set postback event information.

#### **ⅲ. Scene 1：Scene Events** 1）In Scene 1, add event - Timing trigger. 2）Set the execution delay time to 0s.（Effective upon entering the scene） 3）Add response events - Play Scale Easing animation from the beginning of girl；Play “gf\_hand”animation from the beginning; Display particle effect; Play sound effect.

#### **ⅳ. Scene 4：Scene Events** 1）In Scene 4, add event - Press. 2）Add response events - Redirect to the app store; Set postback event information.

#### **ⅴ. Global Scene**： **Layer events** - **CTA button** In Global scene, select the button group and add an event - Press. Then, add a response event - Redirect to the 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/sktagJiHuBUJto8GPLYO" %} --- # 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-click-to-switch-multiple-items-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.