Unity UI: Grid Movement Using Sliders
INTRO
This article will cover how to accomplish grid movement using UI Sliders. I am creating Coordinate Game Prototypes and will use two sliders to manipulate a sprite’s X & Y position on a grid.
GRID SETUP
This grid setup script is made by Tarodev. Please check out his video for this script.
The grid will be generated using 2D sprites with an alternating color.
Attach a script to this sprite and make this Tile Sprite a prefab.
Tile Script
This tile script will have two color properties that can be adjusted in the inspector and will be the alternating colors for the grid. We will need access to the sprite render to assign those colors to the sprite.
Choose the alternating colors and assign the Tile prefab to the Sprite Renderer slot in the inspector.
Next, we will create a public method with a bool parameter that will be called from the Grid Manager once it is created.
Through the Sprite Renderer, if the bool isOffset is not true set it to the offset color, otherwise use the base color.
Grid Manager
Create a empty game object that will be the Grid Manager and create/attach a script to it.
We will need two int variables that will determine the width and height of the grid and a transform variable that will allow use to reposition the camera to the center of the grid when it is genereated.
For this grid the width and height will be fix as the Sliders will not be able to adjust to different grid sizes. Maybe I will update the code to include this feature at a later date.
Assign the Camera to the script.
Back in the Grid Manager script, create a method that will use a nested loop to create the grid. Using a For Loops, the outer loop will increment through the Y index until it reaches the height variable value and each time it increments it will move to the inner loop that will loop until it reaches the width variable amount.
The inner loop is creating the rows of tiles and we will instantiate a the Tile prefab and set its position to the current X & Y index.
We can also name each instantiated Tile to the X & Y index.
We can check to see if it is an offset Tile by creating a temporary bool variable that will return true if the current instantiated Tile is an odd number.
We pass in the current value of that bool variable to the public method we creating the Tile script.
Once the Loops are finished, we can center the camera on the grid by repositioning it to half the width and height of the grid while keeping the Z the same.
You can adjust the width and height of the grid, but if you intend to implement the sliders to move the player sprite you will want to make the dimensions fixed.
PLAYER MOVEMENT
Player Setup
The player is a simple 2D square sprite with a different color. Make this sprite a prefab.
In the Grid Manager script, we will declare a GameObject variable and assign the Player prefab to it in the inspector.
After the Grid has been generate, we can create the player and place it at X = 0 & Y = 0 to place it in the lower left corner of the grid.
Sliders Setup
Create two UI Sliders; one for the X-axis and the other for the Y-axis.
For the SliderX setup, make sure the slider direction is left to right and the max value of the slider is 1 less than the width of the grid.
For the SliderY setup, make sure the slider direction is bottom to top and the max value of the slider is 1 less than the height of the grid.
For both, make sure to check using Whole Numbers.
Lastly, resize the Sliders to fit the grid.
Sliders Script
Create a new script and attach it to the X Slider. We will declare a Slider variable to access the current value of the X Slider and a GameObject variable, so we can change the X position of the player.
Assign the X Slider to the script in the Slider slot in the inspector.
In Start, we will Find the player Game Object using its Player tag and assign it to the variable. Make sure to null check the player variable.
Create a public method. We will access the player position and assign it a new position that will use the X Sliders current value for the X position while keeping the current Y & Z position the same.
Create a new script that is almost identical to the SliderX script and repeat the previous steps, expect for creating a different public method that will reposition the player’s Y to the current value of the Y Slider.
Finally, in both Sliders assign the Slider UI element to On Value Change event and select the corresponding method.
We have player grid movement using the sliders!
GENERATE & CHECK COORDINATE
Setup
The UI setup will require a Text element that will display the Coordinate Pair to hit, Text Elements that are used to label the X & Y axis of the grid and a button that will check to see if the Player is at the same location as the Coordinate Text.
Generate Coordinate Pair
In the Grid Manager script, we are going to create two int variables that will hold a random x and y value. Along with that, create a Text Mesh Pro text variable which will allow use access to the Coordinate Text so we can display those random x and y values.
Make sure to assign the Coordinate Text UI element to the Grid Manager script.
Create a method that will generate the random coordinates each time it is called. Here we will assign an random number between 0 and 14 (1 less than the width of the grid) to the random X variable and a random number between 0 and 7 (1 less than the height of the grid).
Once those random values have been generated and stored in the variables, we can display them in the Coordinate Text.
Check Button
Still in the Grid Manager script, we create a public method that will be called when the Check Button is pressed.
This will check if the current X Slider value and current Y Slider value are equal to its random X & Y counterparts. If they are, we simply generate a new coordinate pair by calling the Generate Coordinate method we just created.
On the Check Button, assign the Grid Manager to the On Click event and select the CheckCoordinate method we just created.
FINISHED PRODUCT
This is the nuts and bolts of the this coordinate partice game. It will only generate new coordinates once create, but maybe we can add points for correct answers and deduct points for wrong answer. There are a lot of directions to go from here!
