IEC<Basic Two Options>Tutorial

#Content editor #Blank Canvas #General production #basic difficulty

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

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.

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.

PreviousIEC<Animation Loop>Tutorial NextInteractive Videos<Two-slides>Tutorial

Last updated 6 months ago