:)
I am not a coder & never did any scripting. I am working on a lens in Lens Studio that displays certain artworks on screen. I want to add a carousel so the users can go back and forth the index rather than just tapping in forward direction cycle. I downloaded a component from assets library called Image Carousel by Snap Inc. It allows me to add the icons for the carousel which I can scroll and tap but there is a script that is required and snapchat itself has not dedicated a page in their website that shows how to use this component. (I also posted the similar question in the their community forum no luck so far.)
When clicked on component in the resources panel a box with this text appears in the inspector panel: Image Carousel
Provides a carousel UI for the selection of one image between many. Requires a ScreenTransform. For a vertical orientation (or any other orientation) change the z rotation of your screen transform.
*=== EVENTS ===
Registering for the event from another script:
script.carouselCC.onSelectionUpdate.add(function(i,tex) {...});
size(): int Returns the number of items in the carousel
setSelected(int index, bool animate): void Select item at index, animate to position if animate === true
getSelected(): int Returns the currently selected item index, or -1 if the carousel is empty
getCentered(): int Returns the item index closest to center (also while dragging/animating)
add(Texture image): int Add an item to the end of the carousel with image Returns the new image index
remove(int index): bool Remove image at index, returns false if index is out of bounds
setImage(int index, Texture image): bool Set image at index, returns false if index is out of bounds
getImage(int index): Texture Returns the image texture for index, or null if index is out of bounds
getSelectedImage(): Texture Returns the currently selected image texture, or null is the carousel is empty
setLocked(int index, bool locked): void Show/Hide locked badge on the icon
getLocked(int index): bool Get locked state for icon index
setData(int index, Object data) : void Set private data associated with this icon
getData(int index): Object Get private data associated with this icon
enableInteraction(): void Enable UI
disableInteraction(): void Disable UI
show(): void Show carousel (fade-in)
hide(): void Hide carousel (fade-out)
isVisible(): bool Returns visibility
I have no idea which one to use or how.*
All I want is a way to connect the icons srceen images for example Image 1 with Screen Image 1, Image 2 with Screen Image 2, Image 3 with Screen Image 3, so that when I scroll and tap to Image 3 in carousel the Screen Image 3 appears on screen.
The image carousel component has a panel called "On Item Set Call" where you put the script but using Behavior script and then the function name. This area
Since I don't know what or how hard this is I might be asking alot for being a noob in this so I apologize in advance on the same hand I will be very very thankful in anyone spares some time helping me out with this.
Cheers!!!!
The Command are from SnapChat Lens Studio
You can use this component for what you want to achieve. The Carousel allows you to take the index of the main item, and pass it to a separate script that you create.
You need to drag an active script component (from the objects panel) into the field 'Script' under the menu title 'On Item Set Call' and then expose a function from your script that is passed the index of the current carousel item (the one facing the front).
In my example, I've created a script called 'UI Script' with this public function:
// -----JS CODE-----
//@input Component.Image[] items;
script.setItem = function(index){
for(var i = 0;i < script.items.length; i++){
if(i == index){
script.items[i].enabled = true;
}
else{
script.items[i].enabled = false;
}
}
}
It enables a given image from an array of images corresponding with the index. Of course you can do different things with the script, for example taking an array of texture assets as an input and setting the texture of an image component based on the index.
Hope this helps!
the script component and function referenced in the carousel
