IEC<Basic Two Options>Tutorial
#Content Editor #Blank Canvas #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
Scan to play
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.
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.
Last updated
