Feature: Building a Carousel

Hi everyone, my name is Ren from Quicksave Interactive. This is a special advanced feature tutorial. In this tutorial, we will be learning how to create a carousel using the UI Editor and the Machine Editor. We’ll start off by creating our layout within the UI Editor. Let’s take a look at what we will be creating within the UI Editor. this tutorial. In the UI editor we have this carousel feature which we will be building. It is built using the grid node and the drag trigger. It is interactable by swiping across the view. We can add more items to our carousel by changing a few node properties. for example, going from 3 items to 5 items. It is important to note that these node properties are programmable, so that we can truly have a dynamic carousel. In the next video, we will be creating this carousel ourselves, step by step starting with the grid node and the grid items. Thank you for watching and stay tuned.

Hi everyone, welcome back. In this video we will be continuing our Carousel tutorial series and we’ll start off by adding our grid node and the grid items. Let’s take a look at the UI Editor and jump right in. Starting with an empty layout file in our UI Editor. I will go to the Node Type drop -down and select the Grid node type, and then click the Add node button. I will call this node Grid. I will then set a height for our grid to 280 pixels, and I will set a width to match the parent size, which is the full width. width of our view and you can see the outline of the grid within the view panel. I also want to align our grid to the center of the view. You of course can position your grid wherever you see fit or resize it to whatever works for you. Now that we have our grid in a proper position, I will add the child node to our grid, which will become our carousel item. In the node type dropdown, I will select the container node type, and then click the Add node button. I will call this grid item. I will then add a background to our grid item, so it is visible. In the grid item, I will add a background to our grid item, so it is visible. In the node type drop down, I will select the linear gradient node type and then click the add node button so it becomes a child of our grid item. I will call this item background. Let’s make the item background visible and a solid white color. Let’s change the size on the x -axis. -axis of our item background to 972 pixels. You can change the x -axis size to whatever works for your carousel, but for the sake of this tutorial, I will be using this size. For the parent size, I will set the y value to 1, and then I will remove the additional gradient fill colors so we have a solid white background. Now our item background is not properly centered within the view, so I will set the anchor for both the X and Y axis to 0 .5 and the parent align to 0 .5. So our item background is properly within the center of our grid item parent node. node. Now that we have our grid node and grid items set up for our carousel, we can move on to adding more grid items, positioning them off-screen, and using the drag trigger to make them swipeable. Thank you for watching, stay tuned for the next video.

Hi everyone, welcome back. In this video, we will be adding more grid items, positioning them off-screen and making it swipeable using the drag trigger. Let’s take a look at how this all comes together in the UI editor. Currently, we only have one item in our carousel defined by the number of grid items in our grid node. It would make sense for our carousel to have more than one item, so we can add two more items to our carousel. Let’s go to the grid node, and in the grid property, we will change the x value to 3. So now we have three items. items which are spanning across the view. Let’s change the parent size from 1 to 3. So now we have 2 other items which are currently off -screen because the width of the grid now spans 3 times the actual width of the view. Let’s go to the grid item node. node, and change the parent size here to 0 .33. And in order to center our grid items, we will change the anchor to 0 .5 for the x and y value, and the parent align to 0 .5 as well. So now we’re back to having one item per view in our grid item. view panel. The X value of the parent size defined here in our grid item node is 100 % divided by the X value of the grid property in our grid node. Let’s go ahead and add the drag trigger to our grid node. In the trigger section of the node properties panel, we can click on this pencil icon and select drag x as well as drag step x and drag snap easing. Let’s set the drag x property to swipe. The drag steps x should be the number of items you have in your carousel. In this case it is 3. As for easing, I will set this to easeOutCubic. Now then, let’s enter the play mode and test this out. Now that I am in play mode, I can swipe across the view and we can see that our carousel is swiping across the view and we can see that our carousel is swiping across the view. across showing only one item per view. We can increase or decrease the number of carousel items we have by changing the node properties of the grid and grid item nodes. For example, if I would like to have say 10 carousel items, I can change the x value of the grid property. property to 10, as well as the x value of the parent size also to 10, and the drag steps x in the triggers to 10. I will then need to go into the grid item and divide 100 % by our x value of our grid property. In this case, it would be 0 .1, and then in the view, I am now able to swipe across 10 carousel items. Using these node properties, it is possible to populate our carousel items dynamically by pulling data from a server. Since we have the layout properly set up, we can then move on to the machine editor, where we will make our carousel auto -scrollable. Thank you for watching, stay tuned for the next video.

Hi everyone, my name is Ren from Quicksave Interactive. Welcome back to this advanced feature tutorial on building a carousel within the UI Editor and the Machine Editor. In our previous videos, we covered how to create your carousel layout using the UI Editor. In the next videos, we will discuss how to add the carousel layout to your carousel layout. layout to the machine editor, make it interactively swipeable, and auto-scrolling using machine states. Let’s go to the machine editor and dive right in. In the machine editor, we’ll start by having an empty machine file. Let’s start by adding an initial state in our hierarchy. hierarchy. We’ll add a new state by clicking the add node button. I will call this state “carousel”. I will then go to the settings panel and add our initial state as the carousel. carousel. We will then add a layer to our machine file by going to the layers section and clicking the add item button. This will allow us to add our carousel tutorial layout to the machine editor. I will call this layer main. I will then click this blue button here. here which will allow us to select our carousel tutorial layout from our file browser. I will select the correct layout and click open. And now our carousel tutorial layout is in the view of the machine editor. Now that we have our carousel tutorial layout added to the machine editor and our initial state, we can go ahead and make it draggable within the view by adding a drag activity. To do this, we will once again go to the settings panel, scrolling down to find the drag activities section. We will add an item. item. This will give us an empty drag activity. I will call this “carousel drag” and it will use our main layout. The element we will be dragging is the element which has the drag trigger within the UI editor. If you remember correctly, it was our grid element. We will then need to add this carousel drag activity to our carousel state. Let’s do so by clicking on the carousel state and finding the activities section within the node properties. We will add a new item and this will be our carousel drag activity. Now going into the view, you can see we have this move icon which allows us to drag across our carousel items. We have now successfully added our carousel item to our carousel item. tutorial layout to the machine editor, added our initial state, and made our carousel interactively swipeable using drag activities. In the next tutorial video, we will continue by making the carousel auto-scrollable and loopable. Thank you for watching. Stay tuned.

Hi everybody, welcome back to our advanced feature tutorial of creating a carousel within the machine editor. We’ll continue by making our carousel auto -scrollable and loopable. Let’s take a look at the machine editor and how we can accomplish this. In our last video, we added our carousel tutorial layout as a layer and created a drag activity which makes our carousel swipeable within the machine editor’s view. Let’s create the states necessary in order to make our carousel auto-scrollable and loopable. We will go to the hierarchy panel and click on our carousel state. We are going to add child states for all of our carousel items. I will click the add node button to create a new state. I will call this state item zero. I will then go back to the carousel state and add a new child state. called item1 and then again for item2. So now we have states for each of our carousel items. Next, we will visit our setting of our carousel items. and scrolling all the way down, you will find the drag offset actions. This will allow us to select which carousel item we show, depending on which state is currently active. I will click on the add item button for drag offset actions to create an empty drag offset action. I will name this drag offset action scroll zero. The layout it will use is our main layout and our drag trigger element is our grid element within the carousel tutorial layout file. The offset will be zero. Zero is our first carousel item we will use. Next I will add one for scroll 1, using the main layout with our grid element with an offset of 1 to show the next carousel item. And then I will do the same for scroll 2, and the layout will be main, the element will be grid and the offset will be 2. I will also like to add an instant offset. This will allow us to set the initial grid offset to 0, because you may have noticed by default, our grid offset does not start at the first grid offset. item, rather it starts in the middle, the center offset. So we will need to instantly set it to start at the first item when the carousel state is active. I will click the add-item button again and add scroll zero, instant. using the main and the grid element. We’ll keep the offset as zero and set the instant toggle to true. Next, let’s add our timer for our carousel so that our carousel auto -rotates every few seconds. We will go to the carousel. the Wait Services section and click the Add Item button. I will call this Wait Scroll and set the delay for three seconds. Let’s move back to our Hierarchy panel, selecting the Carousel state and adding our entry action. for our scroll zero instant. This will ensure that no matter what, our carousel always starts at the first carousel item. We will also set the initial state to be the item zero. Next, we will go to the item zero state. and under entry actions, we will add a new item. This item will be our scroll zero drag offset action. This means when we enter our item zero state, we should scroll to the zero index carousel item. I will also add a service here by clicking the add item button. and then under Invoke, click the Add Item button again to use our weight scroll service which we have created. And once this weight scroll service is complete after 3 seconds, we will move to the next carousel item, so it should move. move to the item 1 state. Now in the item 1 state, we will do the same, except we will use scroll 1, and for the service, we will use item 2. Next, for item 2, scroll-2 and for our wait service, we will move back to the item zero state. We could already begin to see the carousel in our view panel has already begun auto -scrolling. And this is great because you can see that once it reaches the last carousel item, it loops back to our first carousel item. So we’ve essentially now created both the auto-scroller and the looping feature of our carousel in one go. Thank you for watching this carousel feature tutorial. We aim to do more of these full feature tutorials. as we move forward with the documentation of the UI Editor and the Machine Editor. I highly encourage you to experiment with the skills that you’ve learned in these videos to create more features of your own. I also highly recommend that you subscribe to the Quicksave YouTube channel and stay up to date with the documentation website where you can find more tutorials just like this. Thank you for watching. See you again next time.