How to change UI image Array with button in Unity 3d | Best Practice
Grafik Games
10/31/2024
In game and application development, you will always would like to change UI image array with button in character selection. dynamically changing UI elements can greatly enhance user experience. One common scenario is switching between different images using next and previous buttons. In this tutorial, we’ll walk through the steps to create a UI image array script manager.
Requirements
Basic Knowledge of Unity Editor.
Understanding of C sharp programming language.
Unity installed on your system.
Step 1: Setting Up the Unity Project
Launch Unity and create a new 2D project.
In the Hierarchy right click and add images you want to use in the scene. Keep in mind those images will be set to active false and true when you and image other images will be set active to false.
Step 2: Importing Images
Gather the images you want to use and import them into your Unity project. Ensure they are in a compatible format such as PNG or JPG.
Place the images in an appropriate folder within the Unity project.
Step 3: Creating the Script
Right click in the Project window, go to Create > C# Script, and name it Switch.
Double-click the script to open it in your preferred code editor.
Step 4: Download the Script
Tutorial
Using UnityEngine
This line imports the UnityEngine namespace, which provides access to Unity’s scripting API.
public class Switch : MonoBehaviour
This line defines a public class named Switch that inherits from MonoBehaviour, which is the base class for all Unity scripts. This means that the Switch class can be attached to a GameObject in the Unity editor.
public GameObject[] background
This line declares a public array named background of type GameObject. This array will hold references to the background GameObjects that you want to switch between.
private int index
This line declares a private integer variable named index. This variable will keep track of the current index of the background array.
void Start()
This is a Unity callback method that is called once when the GameObject this script is attached to is initialized. In this method, the script retrieves the index value stored in PlayerPrefs (persistent storage) and calls the SetActiveBackground method to set the initial background.
public void Next()
This is a public method that can be called to switch to the next background. It increments the index and then calls the SetActiveBackground method to update the active background.
public void Previous()
Similar to the Next method, this is a public method that can be called to switch to the previous background. It decrements the index and then calls the SetActiveBackground method to update the active background.
void SetActiveBackground()
This is a private method that activates the background at the current index and deactivates all other backgrounds. It loops through each background GameObject in the array and sets its active state based on whether its index matches the current index. After setting the active background, it saves the current index to PlayerPrefs to persist it across sessions.
Step 5: Attaching the Script
Drag and drop the “Switch” script onto an empty GameObject in the Unity scene.
Assign the UI images you want to switch between to the “background” array in the Inspector.
Step 6: Creating Next and Previous Buttons
Add UI buttons to your canvas for “Next” and “Previous”.
Attach the “Next” method to the “OnClick” event of the “Next” button, and similarly for the “Previous” button.
Press the Play button in the Unity Editor to test your project.
Click the “Next” and “Previous” buttons to cycle through the images.
You’ve successfully created a Unity project that allows for dynamic switching between UI images using next and previous buttons. This functionality can be extended and customized further to suit the needs of your specific project, opening up a world of possibilities for interactive user interfaces in your games or applications using UI image array.
