How make SWIPE LEVEL MENU in Unity?

Summary

This Unity tutorial walks you through creating a Level Menu with navigation buttons and a bar. It teaches how to implement swipe detection and button click animations using the LeanTween package for smooth transitions. The process involves setting up a canvas, scroll view, and pages, then adding buttons with Grid Layout Group for alignment. Masking and updating UI elements like navigation buttons and bars are also covered, ensuring an interactive user experience.

Takeaways

• 🎮 Start by adding a canvas to the Unity scene for the level menu.
• 🔗 Create a scroll view and level pages for organizing content.
• 🖼️ Use images to represent different levels and adjust their colors.
• 🔄 Implement horizontal scrolling with a Scroll Rect component.
• 🔲 Add level buttons to the pages using a Grid Layout Group for alignment.
• 🖼️ Customize button images using assets created in Adobe XD.
• 🎭 Add a mask component to the scroll view for clean UI transitions.
• ➡️ Create navigation buttons and assign functions for page movement.
• 📦 Install the LeanTween package for smooth animations and transitions.
• 🔄 Implement swipe detection with a custom script and the EventSystem library.
• 🔑 Update the navigation bar dynamically to reflect the current active page.

Q & A

What is the main focus of this Unity tutorial?

The main focus of this Unity tutorial is to create a Level Menu with navigation buttons, a navigation bar, swipe detection, and button click animations.

How do you start setting up the scene for the Level Menu?

You start by adding a canvas to the scene and making adjustments to its settings.

What is the purpose of creating an empty object called 'ScrollView'?

The 'ScrollView' object is created to serve as a container for the level pages that can be scrolled horizontally.

How do you adjust the size of the 'Page 1' object?

You resize the 'Page 1' object by changing its width and height.

What component is added to the 'Level Pages' object to align the pages horizontally?

A Horizontal Layout Group component is added to align the pages horizontally.

Why is the Scroll Rect component important in this tutorial?

The Scroll Rect component is crucial as it allows the level pages to be scrolled horizontally within the game.

How do you ensure that the level pages only move horizontally?

You disable the vertical scroll feature and the inertia feature in the Scroll Rect component.

What is the purpose of using the Grid Layout Group component?

The Grid Layout Group component is used to properly align the level buttons on each page.

Why is the LeanTween package installed in this tutorial?

The LeanTween package is installed to provide a variety of functions for creating smooth and controlled animations for GameObjects and UI elements.

How do you implement swipe detection in the tutorial?

Swipe detection is implemented by adding the EndDragHandler interface to the SwipeController script and creating a variable named dragThreshold.

What is the function of the 'UpdateBar' function in the SwipeController script?

The 'UpdateBar' function updates the navigation bar by setting all bar images to 'barClosed' and changing the bar image of the current page to 'barOpen'.

How do you add button click animations using the LeanTween library?

You create a new script named 'ButtonAnimation', add it to all buttons, and call the 'Anim' function when the button is clicked.

How do you handle the interactivity of the navigation buttons based on the current page?

You create a function named 'UpdateArrowButton' that disables the interactable feature of the Previous button on the first page and the Next button's interactable feature on the last page.

Outlines

00:00

🎮 Unity Level Menu Creation

This paragraph introduces a Unity tutorial focused on creating a Level Menu. The tutorial covers the creation of navigation buttons and a navigation bar, swipe detection implementation, and button click animations. The process begins with setting up the scene by adding a canvas and configuring it. An empty object named 'scroll view' is created, followed by another named 'Level Pages'. An image object 'page 1' is added and resized, then duplicated to create multiple pages. Horizontal layout and content size filter components are used to manage the layout. The tutorial then proceeds to add a Scroll Rect component to enable horizontal scrolling. Level buttons are added and customized with GridLayout Group for alignment. The tutorial also includes changing button images, adding a mask for clean edges, and setting up navigation buttons with assigned functions. The process concludes with a brief mention of using the LeanTween package for animations.

05:01

🔗 Implementing Swipe Detection and Navigation Buttons

The second paragraph delves into the installation and utilization of the LeanTween package, a tweening library that facilitates smooth animations for GameObjects and UI elements. The tutorial demonstrates how to import LeanTween and create a 'Swipe Controller' script with necessary variables and functions like 'Next', 'Previous', and 'MovePage'. The script is used to manage page transitions with specified tween times and types. The tutorial then explains how to set up swipe detection by implementing the EndDragHandler interface and using a 'dragThreshold' variable to determine when a page change should occur. Additionally, the creation of a navigation bar is detailed, including the setup of an empty object 'level bar', adding images, and using Horizontal Layout Group. The 'Swipe Controller' script is updated to include a function 'UpdateBar' that manages the visual state of the navigation bar, reflecting the active page.

10:04

🎨 Customizing Navigation Bar and Button Click Animations

The final paragraph focuses on refining the navigation bar and adding button click animations. It starts by detailing how to update the navigation bar's images to reflect the active page, using the 'UpdateBar' function called from 'Awake' and 'MovePage'. The tutorial then addresses the need to disable the 'Previous' button on the first page and the 'Next' button on the last page, introducing a function 'UpdateArrowButton' to manage button interactivity. The process involves creating button variables and calling the function from 'Awake' and 'MovePage'. The paragraph concludes with instructions on adding button click animations using the LeanTween library. A new script 'ButtonAnimation' is created and added to buttons, triggering an 'anim' function upon button clicks. The tutorial ends with a prompt to like the video and a farewell note, indicating the next tutorial will be forthcoming.

Keywords

💡Level Menu

A Level Menu in gaming refers to the interface that allows players to select different levels or stages within a game. In the context of the video, the Level Menu is being created using Unity, a popular game development engine. The script describes the process of setting up this menu, which includes navigation buttons and a navigation bar, making it a central concept for the tutorial.

💡Navigation Buttons

Navigation Buttons are UI elements that allow users to move between different sections or levels. In the video, the creator guides viewers on how to create these buttons in Unity and implement swipe detection, showing how they can be used to navigate through level pages, which is a fundamental part of creating an interactive Level Menu.

💡Swipe Detection

Swipe Detection is a feature that enables a game to respond to a player's swipe gestures on a touch screen. The video explains how to implement this feature using Unity, allowing for a more intuitive user experience. It's a key concept in mobile game development and is demonstrated through the script by adding functionality to the Level Menu.

💡Canvas

In Unity, a Canvas is a UI component that serves as a container for all UI elements. The script mentions adding a Canvas to the scene as the first step in creating the Level Menu, highlighting its importance as the foundational element for UI design within the game.

💡Scroll View

A Scroll View is a UI component that allows for scrolling through content that exceeds the visible area. The video script describes creating a Scroll View and setting it up to only scroll horizontally, which is crucial for the functionality of the Level Menu, enabling users to swipe through levels.

💡Horizontal Layout Group

The Horizontal Layout Group is a component in Unity used to automatically arrange child objects horizontally. In the script, it's added to the Level Pages object to align the buttons neatly, showcasing its use in organizing UI elements for better aesthetics and functionality.

💡Scroll Rect

Scroll Rect is a component in Unity that enables scrolling functionality for UI elements. The script describes adding this component to the Scroll View object and setting it up to only allow horizontal scrolling, which is essential for the navigation of level pages in the menu.

💡LeanTween

LeanTween is a tweening library for Unity that simplifies the process of creating smooth animations. The video script includes instructions on installing LeanTween and using it to create animations for button clicks, demonstrating its utility in enhancing the visual appeal and interactivity of the game's UI.

💡Tween Time

Tween Time refers to the duration over which an animation or transition occurs. In the context of the video, the creator discusses setting the tween time for transitioning between level pages, which is a key aspect of creating smooth and visually appealing navigation in the Level Menu.

💡Mask Component

The Mask Component in Unity is used to restrict the visible region of a UI element. The script mentions adding a mask to the Scroll View object to ensure that only the current level page is visible, which is important for maintaining a clean and focused UI design.

💡Button Click Animation

Button Click Animation refers to the visual feedback provided when a button is pressed. The video script includes instructions on creating and adding animations to buttons using LeanTween, which is a way to enhance user interaction and provide a more dynamic and engaging experience.

Highlights

Introduction to creating a Level Menu in Unity

Learn to create navigation buttons and a navigation bar

Implement swipe detection for a more interactive UI

Add button click animations for enhanced user experience

Adding a canvas to the scene for UI elements

Creating a scroll view object for the level menu

Setting up the width and height of the scroll view

Adding a Horizontal Layout Group for organized UI elements

Enabling scroll functionality with the Scroll Rect component

Disabling vertical scroll and inertia for horizontal-only navigation

Adding level buttons to the pages with proper resizing

Using Grid Layout Group for button alignment

Customizing button images with Adobe XD designs

Implementing a mask component for clean UI transitions

Adding page navigation buttons with proper positioning

Assigning functions to navigation buttons for page transitions

Installing and using the LeanTween package for smooth animations

Creating a SwipeController script for swipe detection

Adjusting tween time and types for customized animations

Adding swipe detection feature for intuitive UI navigation

Creating a navigation bar with dynamic image changes

Disabling interactable features for navigation buttons based on page

Adding button click animations using LeanTween for visual feedback

Encouraging viewers to like the tutorial for future content

Transcripts

Hi dear friends. 🖐

Welcome back to Rehope Games.

In this Unity tutorial

we’re gonna make a Level Menu.

Also in this video you will learn

how to create a navigation buttons

and a navigation bar,

implement swipe detection,

and add button click animations.

Ok! Let’s get started.

As you can see,

currently there is only a background object on our scene.

Let's start by adding a canvas to the scene. 

Right click on the hierarchy panel

and create a canvas.

I will make a small adjustment

in the canvas settings.

That's it.

I will right-click on the canvas

and create an empty object

called scroll view.

And I will change the width  and height of this object. 

And then right click on the scroll View object

and create an empty object called Level Pages.

I will create an image under  the level pages object. 

And I'll call it page 1.

Resize the page 1 object.

Duplicate page 1.

I want to change the colors of the pages. 

Select the level Pages object

and add

Horizontal layout Group component.

Set the position of the level page like this.

I'm going to set the spacing to 100.

I'm going to add a

content size filter component

to the level pages.

Start the game. 

As you can see the level pages  are currently not scrolling. 

I want to be able to

scroll the level pages

in the game like this.

So select the scroll view object

and add the Scroll Rect component.

I will drag and drop the  object I want to scroll here.

Then we determine which area

will detect the scrolling motion.

Drag and drop the scroll view object to the slot. 

Start the game again.

As you can see

we can scroll the level pages object as we want.

But I only want it to move horizontally.

So I'm going to disable the  vertical scroll feature.

And I'm going to disable the inertia feature. 

Now I'm going to add the  level buttons to the pages. 

Delete the text object of the button. 

And I will resize the button.

duplicate the button.

I will use the Grid Layout Group component

to properly align the buttons

Select page 1 and add a  grid layout group component. 

Start the game.

I will rename the buttons.

I want to change the images of the buttons.

I created button images with Adobe XD before.

I will Drag and drop

the images to the Source image of the buttons.

I will delete page 2 and page 3

and then duplicate page 1.

I will rename the buttons of page 2. 

And change the button images of page 2.

I will do the same process for page 3 as well. 

Select scroll view object and add mask component.

To perform the masking operation,

we need an image component.

Start the game. 

Select all pages and remove the image component.

Because we don't need it.

Now I will add the page navigation buttons.

Right click on the canvas and create a button.

Resize the button.

I’m gonna change the image of the button. 

Set the position.

Duplicate the button.

And set the position.

Change the image of the button.

Start the game.

I will assign the function

of the navigation buttons.

Before creating the SwipeController script,

I would like to install the LeanTween package.

The LeanTween package is a

popular tweening library

that provides a variety of functions for creating

smooth and controlled animations.

It allows you to animate GameObjects,

UI elements,

and properties over time with ease.

Click on the window and click on the asset store. 

Click on the Search Online button.

Find the LeanTween Asset.

Click on the Add to my Assets button.

After that,

open the package manager.

Select my assets.

You can see LeanTween here.

I downloaded it already.

You can first download it

and then import it.

The LeanTween asset imported.

Select the scroll view object

and then add a script named Swipe Controller.

Open the script. 

First, I will create the

necessary variables that I need.

I will create public functions

named 'Next' and 'Previous'.

And I’ve created a function

named MovePage.

If you'd like, I can create a detailed

video on how to use LeanTween.

You can access this script

in the description.

ok save the script

and go back to unity.

We have 3 pages.

Drag and drop the Level Pages object here.

We can set the duration for transitioning

to the next page using Tween time.

And set the tween type.

Let's determine the page step.

Select level Pages. 

What should be the amount of position

change to transition to the next page?

In this example, a position change

of -800 units on the x-axis is

required to navigate to the next level page.

This number may be different in your project.

Let’s add an event function

to the navigate buttons.

Drag and drop the scroll view object here

because it has the swipe controller script.

Select the next Function.

Start the game and test it. 

As you can see navigation Buttons work properly.

You can change the tween time as you want.

And you can set the page step as you want. 

Let's take a look at the tween types. 

You can find the best tween time

and tween type for you by trying.

Let's add the

swipe detection feature.

Open the swipe controller script.

Add EventSystem library.

And I will add the

EndDragHandler Interface.

Implement the interface.

I will create a variable named dragThershold.

And set the variable .

If we swipe the page

more than the dragThershold value,

the page will change.

Save and go back to unity.

Start the game.

As you can see,

when we scroll more than the value we set,

it moves to the next page.

Ok swipe detection system is ready.

Let's add the navigation bar .

Right click on the canvas and

create an empty object named level bar.

Right click on the level bar

and create an image.

Drag and drop the bar closed image

to the source image of the bar.

Duplicate the object.

Select level bar object

and add horizontal layout group component.

I will replace the image

of the active page's bar

with the Open bar.

Open the swipe controller script.

First I will add the UI library.

Then, create an array to keep

the image components of the bars.

Then create a sprite variable

named barClosed and barOpen.

I’m gonna create a function

named UpdateBar.

I will set all bar images

to barClosed with a foreach loop.

After that I will change the

bar image of the current page to barOpen.

I will call the UpdateBar function

from Awake and

the MovePage function.

Go back to unity. 

Set the barImage array size.

And drag and the navigation bars here. 

Drag and drop

the images to the slots.

Let’s test it. 

Nice Navigation bar works properly.

When on the first page,

I want to disable the interactable feature

of the Previous button.

And when on the last page ,

I want to disable the interactable feature of the Next button.

I will create a button variable

to keep navigation buttons.

I'm going to create a function

named UpdateArrowButton.

That's it.

I’m gonna call the function from

awake function and MovePage function.

Save and go back to unity.

Drag and drop the

navigation buttons to the slots.

Start the game.

As you can see,

on the first page,

the previous button's interactable feature is disabled.

And on the last page,

the next button's  interactable feature is disabled.

You can add button click animation

using the LeanTween library.

I'm going to create a new script

named button animation.

I will add this script to all buttons.

And when the button is clicked,

the anim function will be called.

save the script

and go back to unity.

Select the buttons to which you want to add animation,

and add the ButtonAnimation script.

Start the game. 

Looks cool. 

I hope the video was helpful to you.

Please don’t forget to

hit the like button. 👍

Thanks for watching. 🙏

And see you in the next unity tutorial.