# Carousel Component - Blank Canvas Tutorial Please Note：This tutorial mainly explains how to use the Carousel Component to create playable **materials** for carousel-style gameplay. It is recommended to use it together with the [demo ](https://tinyurl.com/4mjzxhkz)and[ feature introduction document](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/carousel-component) for a better understanding! ## 1. Basic Info * \[Difficulty]: ⭐⭐ * \[Applicable Products]: Universal * \[Interaction]: On carousel switch * \[Freedom]: Fully free * \[Core Assets]: Image * \[Features]: Carousel Settings、Evevt-On carousel switch ## 2.Effect Preview

Best experience for playable on mobile devices	Vertical screen	Horizontal screen

Scan to play	Click to play	Click to play

## 3. Gameplay Overview **Before starting the production, we need to outline the gameplay logic for this case：** * Upon entering the trial, display \[character model A] and \[operation guide], guide the player to click the right arrow to switch the character's appearance. * Player can click on any arrow or drag the character to switch to different appearances. Each interaction changes the character's appearance. * Continue this interaction until the player presses the "Confirm" button to redirect to the ending scene. * In the ending scene, when the player presses the button, redirect him to 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 from the previous section, we can divide this case into 2 scenes for production.

Scene Name	Scene 1 - Core Gameplay	Scene 2 - End Page
Visual Rendering
Scene Description	Guide the player to click on the arrow to switch the character's appearance.	Product info & Redirect button
Core Assets	Static Images: Character models 3, Switch arrows, Instructions Audio-visual packaging:* Flash particle effects, Click sound effect	Static Images: Background image, Redirect button Audio-visual packaging: Star particle effects
Core Animations	Guiding finger & Confirmation button：PulseFront	Redirect button: PulseFront
Core Events	Trigger Object: Carousel Component Trigger Event: On carousel switch Response Event: Play animation feedback.	Trigger Object: Redirect button Trigger Event: Press Response Event: Redirect to app store

## 5. **Production Guidelines** \*The core content consists of **Step 2"Component Parameter Setting,"** and **Step 5"Event Setting."** ### **Step 1 - Scene Setup** It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future. #### **1. Global Scene** 1）Add BGM and Background Image in the "Global Settings" section. 2）Add permanent download button, logo and other product information under \[Global Scene], and adjust the position and size of each asset. Group and sort the assets reasonably.

#### **2. Scene 1** 1）In Scene 1, click on "Gameplay Template" and select the Carousel Component from the "Component" to add it.

2）Add the guiding finger, guiding text, confirmation button, and click sound effect. Adjust the position and size of each asset.

#### **3.Scene 2** 1）In Scene 2, add the product logo, redirect button, and background image. Adjust the size and blurry of the background image.

2）Check Scene 2 as the "Ending Scene," and disable "Global scene."

### Step 2 - Component Parameter Setting #### 1.Select Carousel Style First, choose a suitable carousel style. In this case, we will use the "Fade zoom carousel" style.

#### 2.Set Carousel Resources 1）Click on the replace button to replace the initial carousel resource.

2）Click on the "+" button to upload all carousel resources one by one (dragging can adjust the resource order).

3）Adjust the "Slot size" of the carousel group, which determines the size of each image slot. In this case, we will set the slot size to 1200\*1200.

#### 3.Slot configuration The "Arrangement method" is set to default as horizontal, and the "Number of slots" is set to default as 3, with no adjustments made in this case.

#### 4.Interaction methods 1）In this case, we choose the "Manual" carousel mode, and both "Tap" and "Drag" interaction modes are selected. This means that players can switch images either by clicking buttons or by dragging images. 2）Click on the replace button to replace the arrow image.

#### 5.Advanced settings The "Animation playback duration," "Opacity," and "Scale" can be left at their default values with no adjustments made in this case.

By completing the above steps, the parameters for Carousel Component are successfully set. ### Step 3 - Landscape & Portrait Orientation Adaptation After completing the layout for portrait orientation, we need to adjust the "layout for landscape orientation" and the "screen adaptation for both landscape and portrait orientations." #### 1. Adjust the layout for landscape orientation 1）In Scene 1, switch to landscape mode. Select all the top-level layers, including the Carousel Component, and use the "Reuse vertical screen position configuration" feature to automatically arrange them for landscape mode.

2）Then, individually adjust the **position** and **scale** of each layer to display the complete core gameplay-related content.

3）Similarly, repeat the process for Scene 2 and the Global Scene to complete the layout for landscape mode.

#### 2. Adjust the Screen adaptation In this case, we can set the "Screen adaptation" of the product information group \[group\_info] as follows: Set it to "Fit Top Left Corner" for landscape mode. Set it to "Fit Top" for portrait mode. Other layers remain centered by default and do not require adjustment.

### Step 4 - Animation Setting In this case, the animations and particle effects used are as follows. Let's go through them one by one: **Scene 1:** Guided finger click animation, confirmation button scaling animation, flash particle effects. **Scene 2:** Redirect button scaling animation, star particle effects. #### 1. Guiding finger：PulseFront Select the hand image \[gf\_hand], Add Animation - Emphasize - PulseFront, as a looping click animation. Set the parameters as follows:

#### 2.Confirmation button：PulseFront Copy this animation to the button group \[group\_btn], fine-tune the parameters, and disable auto-play, as a looping guided animation. Set the parameters as follows:

#### 3.Redirect button：PulseFront Copy this animation to the redirect button group \[ctat] in Scene 2, fine-tune the parameters, as a looping guided animation. Set the parameters as follows:

#### 4.Particle Effects 1）Open the "Asset Library"- "Particle", choose suitable particle effects (such as flash particles) to enhance the visual effect of the scene. 2）Adjust the position of the particles to suitable locations (remember to adjust for both portrait and landscape modes). 3）Note: Set the particles in Scene 1 to "Hidden" initially, and control their playback through events later.

### Step 5 - **Event** Setting To complete the setup of all animations, we need to configure the logic of the gameplay using "events." The contents related to events and settings in this case include: * Playing a series of feedback effects when switching the carousel. * Redirecting to the next scene when pressing the confirmation button. * Redirecting to app store when pressing the redirect button. Next, we will explain each step in sequence. #### 1. Layer: Carousel Component Select the \[Carousel Component]. **Add Event - On carousel switch.** Add response events: * Hide the guiding finger. * Play the scaling animation of the confirmation button from the beginning. * Show and play particle effects. * Play the click sound effect once from the beginning.

#### 2. Layer: Confirmation button Select the confirmation button group \[group\_btn]. **Add Event - Press**. Add response event: Redirect to the next scene.

#### 3.Layer: Redirect button group Select the redirect button group \[ctat]. **Add Event - Press**. Add response event:Redirect to app store.

#### 4. Layer: Persistent download button group Copy this event to the persistent download button group \[ctat].

These are all the events used in this case. With the completion of all event settings, our material is completed. ### Step 6 - Overall Preview 1）It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct. 2）Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.

## 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 to make it, so that you can start using the Content Editor and Carousel Component to make such materials as soon as possible. {% file src="" %}