2D Playable<Hide after Clicking on the Item>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
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
Scan 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.
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.
Last updated
