Carousel Component
#Content Editor #Template Content Creation #Blank Canvas
Last updated
#Content Editor #Template Content Creation #Blank Canvas
Last updated
β¨Entrance of Template Content CreationοΌWork Preview Area>>>Carousel Component button / Layer Area>>>Carousel Component
β¨Entrance of Blank CanvasοΌGameplay Template>>>Component>>>Carousel Component
Related case tutorial can refer to Carousel Component - Blank Canvas Tutorial
The Carousel Component can be used in both "Blank Canvas" and Template "Content Creation."
With Content Creation, you can adjust the components based on the gameplay of the original template.
For Blank Canvas or adding a new component, at least the following parameters need to be set: "Carousel style selection," "Resource group," "Slot configuration," "Interaction methods," and "Advanced settings." Only then will the Carousel Component take effect.
Note: Only one component can be added per scene, but component can be added across scenes or copied.
It is suitable for automatic/manual image carousel-style gameplay.
The adjustable parameters of the "Carousel Component" can be divided into four parts: Exterior, Animation, Carousel Settings, and Event.
Enable Component: You can enable or disable the Carousel Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
Clip on overflow: If the "Clip on overflow" option is enabled, images that exceed the component's boundaries will not be displayed (No crop by default).
The usage of other parameters is the same as regular layers and will not be further explained here. Please note that when adjusting the exterior parameters of the Carousel Component (such as position and size), all layers within the component will change accordingly.
The animation set here applies to the entire Carousel Component.
The specific usage is the same as regular layers and will not be further explained here.
The Carousel Settings include five parameter sections. You need to first configure the "Style selection" and then proceed with the settings for "Resource group," "Slot configuration," "Interaction methods," and "Advanced settings," and other parameters.
Please Note: "Carousel Settings" are the core parameters of the Carousel Component, so please make sure to complete the settings for each part.
Currently, there are five supported carousel styles (you can refer to the animation in the thumbnails for specific effects):
Regular carousel: Cards are arranged with default spacing and display multiple cards simultaneously. A carousel where there is movement during switching.
Zoom in/out carousel: Cards are positioned at the same location by default, displaying one card at a time. A carousel with in-place scaling during switching.
Scroll zoom carousel: Cards are densely arranged by default. A carousel with scaling and movement during switching.
Fade in/out carousel: Cards are arranged with default spacing, displaying one card at a time. A carousel with movement and opacity changes during switching
Fade zoom carousel: Cards are arranged with default spacing, displaying one card at a time. A carousel where there is scaling, movement, and opacity changes during switching.
The "Resource group" is used to add elements to be displayed and set element parameters.
A resource group can contain one or multiple carousel groups, and each carousel group supports adding one or multiple images.
3.2.1 Single Carousel Group
Upload Carousel Images: Click the "+" button to select images from the asset library or project assets and add them to the carousel group.
Replace Carousel Images: Click the icon button (blue) to replace the current carousel image.
Supports setting the carousel group or carousel images as "Visible" or "Hidden."
Supports deleting the carousel group or carousel images.
Supports dragging and moving the position of the carousel group or carousel images.
Clicking on the carousel group brings up the "Exterior" parameter popup, where you can adjust the overall size of the carousel group, "Slot size," and "Slot spacing."
Slot size: refers to the size of each image slot. The images placed in the slots are adapted based on the longest side.
Slot spacing: determines the distance between the center points of each slot.
Slot Scale Ratio: Corresponds to the size ratio of the carousel group and is for reference purposes only. It does not support adjustment.
Effect Example:
Clicking on a single carousel image brings up a popup where you can set the "Resource category" and "Event" for that image.
You need to first "Add Categories" and customize the category before selecting the corresponding category.
The "Resource category" is used to determine the timing of event success or failure.
You can set events such as triggering subsequent events when the character's head, body, and feet change to the same style (i.e., the same resource category).
3.2.2 Add Carousel Group
Add Carousel Group: Clicking the icon button allows you to create a new carousel group.
Carousel groups can be dragged to adjust their positions.
Slot configuration include "Arrangement method" and "Number of slots."
Arrangement method: Single selection. Choose between horizontal or vertical.
If horizontal is selected, the carousel will scroll from left to right.
If vertical is selected, the carousel will scroll from top to bottom.
Number of slots: Determines the number of slots in the carousel.
Note: The slot in the middle is slot 1. For example, if there are 5 slots, the slot numbers from left to right correspond to 4-5-1-2-3.
π‘ Relationship between "Number of slots" and "Uploaded Image Count"
When the image count is greater than the number of slots: Some images will be hidden. As the carousel progresses, some images will be hidden while others are displayed for the carousel transition.
When the image count is equal to the number of slots: All images are displayed in their corresponding slots for the carousel transition.
When the image count is less than the number of slots: All images will be displayed, placed in each slot according to the existing resources in order.
The "Interaction methods" includes "Playback settings" and "Interaction methods."
Playback settings: Automatic or Manual. At least one option must be selected, and multiple selections are supported.
Selecting "Automatic" only: No need to set the "Interaction methods." The carousel will play automatically.
Selecting "Manual" only: You need to continue selecting "Interaction methods." The carousel requires manual interaction by the player to switch.
Selecting both: You need to continue selecting "Interaction methods." The carousel will autoplay and also support manual switching.
Interaction methods (selected when "Manual" is chosen in Playback settings): Tap or Drag. At least one option must be selected, and multiple selections are supported.
Selecting "Drag" only: Supports switching through dragging.
Selecting "Tap" only: Switching is done by clicking on the carousel buttons.
Selecting both: Supports switching through clicking the buttons and dragging.
Carousel arrows (settings available when "Tap" is selected):
Supports showing/hiding the buttons.
Clicking the replace button allows selecting an image from the asset library or project assets to replace the button style.
Clicking on a single button image brings up a popup where you can adjust the exterior of the button.
You can adjust the parameters of the carousel animation.
Animation dewell time: A specific parameter for automatic carousel. This parameter determines how long to wait before switching to the next image (e.g., if set to 1s, it will wait for 1 second after completing a switch before moving to the next image).
Animation playback duration: When set to automatic carousel or tap carousel, this parameter determines the duration of the animation (e.g., if set to 0.5s, the animation for switching images will take 0.5 seconds).
Opacity: The maximum and minimum values determine the maximum and minimum opacity during the animation. Numeric range is from 0 to 1.
Scale: The maximum and minimum values determine the maximum and minimum scale during the animation.Numeric range is from 0 to 1.
π‘Note: When adjusting Opacity and Scale parameters, the effects will be displayed in real-time on the canvas.
The "Carousel Component" has unique trigger events and corresponding response events.
Trigger events include: "On carousel switch," "To a specific resource," "To a specific category."
Related response events include: "Enable/Disable Carousel Component," "Enable/Disable Carousel Groups," "Pause/Play carousel group," "Restart carousel," "Delete carousel resources," "Dwell time."
On carousel switch
-Select the corresponding carousel group.
-Trigger occurs when the selected carousel group completes a carousel transition and stops, triggering the response event.
To a specific resource
-Select the corresponding carousel group and the resource within the group.
-Trigger occurs when a specific resource completes the carousel transition and stops, triggering the response event.
To a specific category
-Select the corresponding carousel group and the resource category.
-Trigger occurs when a resource from the corresponding category completes the carousel transition and appears in the display position.
Enable/Disable Carousel Component
-If disabled, all carousel groups stop the carousel and disable related carousel functionalities and events for the carousel group's image resources.
-If enabled, the opposite occurs.
Enable/Disable Carousel Groups
-Select the corresponding carousel group.
-If disabled, the selected carousel group stops the carousel and disables related carousel functionalities and events for the carousel group's image resources.
-If enabled, the opposite occurs.
Pause/Play carousel group
-Select the corresponding carousel group.
-If paused, and the selected carousel group is set to "Automatic" carousel, the automatic carousel is paused.
-If played, the opposite occurs.
Restart carousel
-Select the corresponding carousel group.
-The selected carousel group returns to its initial state and restarts the carousel.
Delete carousel resources
-Select the corresponding carousel resource.
-The selected carousel resource is deleted.
Dwell time
If set to "Automatic Carousel," the time delay determines the duration for which each image stays before switching to the next one.
Sample1 -
Sample2 -
Sample3 -
Sample4 -
For example, in , three resource categories were added: "Pink," "Gray," and "Green" with three different styles.
The use case of adding multiple carousel groups: In , multiple carousel groups are used to control the carousel transitions of different body parts with different styles.
