Using UI Toggles to Control a Slideshow in Unity 2021 URP

In this article we’ll use a slideshow as a simple example for real functionality derived from Unity’s UI Toggle elements.

Creating a Difficulty Toggle in Unity 2021 URP

I’ll be using the project from my previous article to jump start this project.

I’ll start by duplicating my current scene and renaming the copy.

Now in my newly created scene, I’ll duplicate and rename the toggle script from the last article.

I ended up renaming it “SlideshowToggles” not “DIfficultySlideshow”.

In the newly created script itself we need to rename the class to match the new file name.

Now we can drag our new script onto the toggle group game object.

Let’s also rename each toggle and the toggle group itself.

Next, we’ll update the text on each toggle’s label element.

And let’s make sure we also assign the methods in the same order as before to each of our Toggle elements.

Lest we forget, also change the title of this UI to something appropriate for your slideshow.

If you also are using a spritesheet, make sure to set the correct import properties for it as shown above.

This has a uniform 2x2 size format, so we’ll select Grid by Cell Count and set both columns and rows to 2.

Use whatever settings works for your particular sprite sheet.

Once we click the “Apply” button in the Sprite Editor, we can see that our image file now has 4 child sprites.

The UI I created in the last article wasn’t meant to hold large images.

Let’s resize it to be more suitable for its new use case.

Let’s add a background image for our slides.

To make room, we may need to resize and reposition existing elements.

Let’s duplicate our slideshow image and create a quick and dirty background border for it by childing the slideshow image to the newly created slideshow background image.

We can also drag our sprites in and test how they will look.

We’ll update our script by renaming the Toggle[] array and adding 2 more class variables.

A Sprite[] array to hold our images and an Image to reference the Slideshow Image on the UI itself.

Now let’s assign our slideshow Image element and our sprites to the SlideshowToggles script component.

If we run our game, we can see we have our functionality working but we need to default to Slide 1 rather than Slide 2.

We could also add another toggle for our fourth image if we desired.

Creating a Difficulty Toggle in Unity 2021 URP

If you wish to do so, please refer to the previous article linked above.

Let’s go ahead and set the Slide_1 toggle element to be “Is On”.

This won’t entirely solve our issue but it will select the correct checkbox.

All we need to do is drag our first sprite onto the SlideShowImage Source Image field.

Now our default slide is showing correctly.

We can also add a text field for each slide as shown above.

We can resize our SlideshowBackground UI Image element and reposition the child element, SlideshowImage, to make room for our new text field.

Let’s make a small modification to our script and we should be close to done.

Just add a new class variable for the TextMeshPro text field (and the necessary using statement) and then assign it some text for each toggle case.

Alright, now assign the text field to our new class variable on the SlideshowToggles script component.

I’ve also resized my SlideshowBackground UI Image element to better accommodate the longer text for the second toggle.

That’s it, we’ve got our prototype up and running!