2D Playable<Hide after Clicking on the Item>Tutorial
#Content editor #Blank Canvas #General production #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
| Best experience for playable on mobile devices | Vertical screen | Horizontal screen |
|---|---|---|
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.
| Scene Name | Scene 1-Inducing Click |
|---|---|
Visual Rendering | |
Scene Description | There are multiple gift boxes on the table. Guide player to click to open the unlocked gift box. |
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 |
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 |
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
