2D Playable<Click to switch multiple items>Tutorial

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

Please note: The basic template "Click to 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

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 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)

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.

Previous2D Playable<Drag and Drop to the Specified Position>Tutorial NextEliminate gameplay cases

Last updated 7 months ago