# IEC\Tutorial Please note: The basic template "Basic Two Options" was created following this tutorial! ## 1. Basic Info * \[Difficulty]:⭐ * \[Applicable Products]:Universal * \[Interaction]: Click * \[Number of Interactions]: 1 Step Rediect * \[Threads]: Single-threaded * \[Core Assets]: Static image * \[Features]:Animation - Scale easing, Animation - Displacement easing, Event - Press to redirect to app store ## 2.Effect Preview | Best experience for playable on mobile devices | Vertical screen | Horizontal screen | | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | |

| | Scan to play | [Click to play](https://tinyurl.com/yh5c9tf7) | [Click to play](https://tinyurl.com/yh5c9tf7) | ## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Enter the gameplay and display the "Ugly Girl for Makeover" screen. * Present a "Choose One" option and a "Selection Guide" to guide players to click on any option to help the ugly girl complete the makeover. * When the player clicks on any option, redirect them 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 Choice
Visual Rendering
Scene Description	Two-choice decision, guiding the player to click on any option to help the ugly girl complete the makeover.
Animation	[Guide Finger]: Scale easing + Displacement easing [Option Buttons]: Scale easing + Alpha easing
Core Events	Trigger Object: Layer - Option Button Group Trigger Event: Press Response Event: Redirect to app store
Asset List	[Audio]: Background music [Images]: Background image, ugly girl image, guide finger, option buttons (option images/option background/option background glow), logo, CTA button [Text]: Guide text, option button text, download text

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

#### **ⅱ. Scene 1** 1）Add images and text to "Scene 1": Ugly girl image, option buttons, guide finger, guide text, logo, CTA button. 2）Adjust the position and size of each asset accordingly. 3）Group, arrange, and name the assets based on their types.

### Step 2 - Animation Production #### **ⅰ. Guide Finger** Since the finger needs to move and scale synchronously with the button during the two-choice decision, we will set up two general animations for the finger: Scale Easing and Displacement Easing. 1\) Select the finger group "hand\_ani" on the left side of the layer and add the animation - Universal - Scale Easing. Set the parameters as follows:

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

#### **ⅱ. Option Buttons** 1）Option 1: Select the group node "props1\_ani" of Option Button 1 and add the animation - Universal - Scale Easing. Set the parameters as follows:

2）Option 2: Copy the scale easing animation from the group node "props1\_ani". Select the group node "props2\_ani" of Option Button 2, click on "Paste - Paste the Layer Animation Only", and then modify the curve only. Set the parameters as follows:

Optional: To make the effect more appealing, we can add a glow effect to the option buttons if desired. 3）Option Glow 1: Select the image "props\_light" of Option 1 and add the animation - Universal - Alpha Easing. Set the parameters as follows:

4）Option Glow 2: Select the image "props\_light" of Option 2 and add the animation - Universal - Alpha Easing. Set the parameters as follows:

### Step 3 - Logic Settings #### **ⅰ. Layer Events - Option Buttons 1 & 2** 1\) Select the group node "props1\_ani" of Option Button 1. 2\) Add Event - Press. 3\) Add the response event - Redirect to app store. 4\) Other response events: Set tracking information/Report the end of the playable ads.

5）Copy the event from Button 1 by clicking on it. Select the group node "props2\_ani" of Option Button 2, click on "Paste - Paste Layer Events Only", and then modify the tracking information accordingly.

#### **ⅱ. Layer Event - CTA Button** Select the button group and add the event - Press. Add a 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/6uN3smTakxiugvXNeBFf" %} --- # 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/basic-tutorial-blank-canvas-tutorial/iec-less-than-basic-two-options-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.