2D Playable<Click to switch multiple items>Tutorial
#Content Editor #Blank Canvas #Basic difficulty
Please note: The basic template "Switch multiple items" was created following this tutorial!
1. Basic Info
[Difficulty]:⭐
[Applicable Products]:Universal
[Interaction]: Click
[Number of Interactions]: Unrestricted
[Threads]: Multi-threaded
[Core Assets]: Static image
[Features]:Animation - Scale easing, Event - Press to redirect to the specified scene,Event - Timing trigger.
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 [Girl Style A] and [Left/Right Switch Buttons].
Display the [Operation Guide], prompting player to press the [Right Switch Button].
At this point, the player can press either left or right button. After the first press of any button, play the [Outfit Feedback].
Display the [Operation Guide] again, prompting player to press the [Confirm Button].
Before the player presses the [Confirm Button], they are free to press either left or right button to switch styles, with no limit on the number of times.
When player presses the [Confirm Button], 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 can divide this case into 4 scenes for production.
(Scenes 1-3 correspond to 1 set of girl's styles respectively; Scene 4 is the end page)
Visual Rendering
Scene Description
Display Girl Style A and guide player to click the right switch button.
Display Girl Style B and guide player to click the confirm button.
Display Girl Style C and guide player to click the confirm button.
End page, guide to click the download button
Animation
[Girl]: Scale easing
[Guide Finger/arrow]: Scale easing
[Girl]: Scale easing
[Guide Finger/arrow]: Scale easing
[Girl]: Scale easing
[Guide Finger/arrow]: Scale easing
[Download button]: Scale easing
Core Events
Trigger Object: Layer - Left and right arrows/Confirm button
Trigger Event: Press
Response Event: Redirect to the specified scene
Trigger Object: Layer - Left and right arrows/Confirm button
Trigger Event: Press
Response Event: Redirect to the specified scene
Trigger Object: Layer - Left and right arrows/Confirm button
Trigger Event: Press
Response Event: Redirect to the specified scene
Trigger Object: Layer - Download button
Trigger Event: Press
Response Event: Redirect to app store
Asset List
[Audio]: Click on sound effects and switch style sound effects
[Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button
[Text]: Guide text, confirm button text, download text
[Particles]
[Audio]: Click on sound effects and switch style sound effects
[Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button
[Text]: Guide text, confirm button text, download text
[Particles]
[Audio]: Click on sound effects and switch style sound effects
[Image]: Girl style image, switch arrow image, confirm button image, fingers, background image of guide text, logo, CTA button
[Text]: Guide text, confirm button text, download text
[Particles]
[Image]: Background image, logo, CTA button
[Text]: Download text
[Particles]
5. Production Guidelines
Step 1 - Scene Setup
ⅰ. Global Settings
Add background music and background image in the "Global Settings" section.
ⅱ. Global Scene
1）Add persistent information in the "Global Scene": logo, CTA button.
2）Adjust the position and size of each asset accordingly.
3）Group, arrange, and name the assets based on their types.
ⅲ. Scene 1-3
1）Add sound effects, girl style images, switch arrows, confirm button, fingers, guide text, particle effects to "Scene 1".
2）Adjust the position and size of each asset accordingly.
3）Group, arrange, and name the assets based on their types.
Note: Since the asset distribution is largely the same across the three scenes (with Scene 1 having an additional set of “group_hand”), We can achieve quick production by duplicating the scene.
ⅳ. Scene 4
1）Add virtual background image, logo, download button, particles to "Scene 4".
2）Adjust the position and size of each asset accordingly.Group, arrange, and name the assets based on their types.
3）Select Scene 4 as' Ending Scene 'in Scene setting on the right; Simultaneously cancel Scene 4 [Enable Global Scene].
Step 2 - Animation Production
ⅰ. Character's Breathing Sense
1）Select the character group "role" in scene 1,and change the pivot to (50,100).
2）Continue to add the animation - Universal - Scale Easing(As the girl's Approach animation). Set the parameters as follows:
3）Continue to add the animation - Universal - Scale Easing(As the girl's breathing sense animation). Set the parameters as follows:
Note: The girl's breathing sense animation in Scene 2/Scene 3 is the same as Scene 1, and can be quickly completed through [Copy/Paste Animation].
ⅱ. CTA button
1）Select the CTA button group "ctat_download" in scene 4.
2）Add the animation - Universal - Scale Easing. Set the parameters as follows:
Step 3 - Logic Settings
Since the event settings for Scene 2 and Scene 3 are similar to Scene 1, I will use Scene 1 as an example to illustrate. You can quickly complete the event settings for Scene 2 and Scene 3 by copying and pasting events.
Additionally, this case involves the function of “Global variables”, which belongs to advanced operations and do not significantly impact of this case. Therefore, I will not provide an explanation on “Global variables” here.
ⅰ. Layer Events - Arrow
1）Select the group layer for “right_arrow”.
2）Add event - Press.
3）Add response events - Play click sound；Play Scale Easing animation from the beginning of right arrow.
4）Add response events - Execution delay of 0.2s,redirect to the specified scene.
5）Other response events: Set postback event information.
Note: The event settings for left arrow are the same as those for the right arrow, so you can quickly complete the production through [Copy/Paste Event].
ⅱ. Scene 1： Layer Events - Confirm button
1）Select the layer for “group_confirm”.
2）Add event - Press.
3）Add response events - Redirect to the specified scene（Ending page）；Redirect to app store.
4）Other response events: Set postback event information.
ⅲ. Scene 1：Scene Events
1）In Scene 1, add event - Timing trigger.
2）Set the execution delay time to 0s.（Effective upon entering the scene）
3）Add response events - Play Scale Easing animation from the beginning of girl；Play “gf_hand”animation from the beginning; Display particle effect; Play sound effect.
ⅳ. Scene 4：Scene Events
1）In Scene 4, add event - Press.
2）Add response events - Redirect to the app store; Set postback event information.
ⅴ. Global Scene： Layer events - CTA button
In Global scene, select the button group and add an event - Press. Then, add a response event - Redirect to the 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
