UI: Navigate 2 Players in the Same Menu

Hey!
I want to create a simple mario kart like select your player menu for 2 Players which looks like this at the moment
56620-question-ui-selection.png
the black squares with the numbers 1-12 are button components and the yellow and blue selector graphics are sprites.

my question would be:
how can i control/move the yellow selector with the WASD keys and the blue one with the ARROW keys to activate the buttons? (using wasd to highlight the buttons with a different color already works out of the bux, but not moving the selector sprite) and how can i save or output which button Player1 and/or Player 2 is currently selecting? so that i can put something like “Player1: Slot 2” and “Player2: Slot 8”

Hi Der_Kevin,
I would set the rectTransform.position of your navigator squares to be the same as the position of the square that they are on, I’ve made you an example of how to do this:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class SlotSelector : MonoBehaviour {
	public RectTransform navigator1;
    int nav1Pos = 0;
	public RectTransform navigator2;
    int nav2Pos = 0;

	public RectTransform[] slots = new RectTransform[12];

    public int jumpAmount = 4;

    public Text textShowNav1;
    public Text textShowNav2;

    void Start(){
	MoveNav1(0);
	MoveNav2(0);
    }

	void Update () {
		// move up
		if(Input.GetKeyDown(KeyCode.W)){
			MoveNav1(-jumpAmount);
		}
		if(Input.GetKeyDown(KeyCode.UpArrow)){
			MoveNav2(-jumpAmount);
		}

		if(Input.GetKeyDown(KeyCode.A)){
			MoveNav1(-1);
		}
		if(Input.GetKeyDown(KeyCode.LeftArrow)){
			MoveNav2(-1);
		}

		if(Input.GetKeyDown(KeyCode.S)){
			MoveNav1(jumpAmount);
		}
		if(Input.GetKeyDown(KeyCode.DownArrow)){
			MoveNav2(jumpAmount);
		}

		if(Input.GetKeyDown(KeyCode.D)){
			MoveNav1(1);
		}
		if(Input.GetKeyDown(KeyCode.RightArrow)){
			MoveNav2(1);
		}
	}

	void MoveNav1(int change){
		if(change > 0){
			if(nav1Pos+change < slots.Length-1){
				nav1Pos += change;
			}else{
				nav1Pos = slots.Length-1;
			}
		}else{
			if(nav1Pos+change >= 0){
				nav1Pos += change;
			}else{
				nav1Pos = 0;
			}
		}
		navigator1.position = slots[nav1Pos].position;
                textShowNav1.text = "Nav 1 is at slot "+ nav1Pos;
	}

	void MoveNav2(int change){
		if(change > 0){
			if(nav2Pos+change < slots.Length-1){
				nav2Pos += change;
			}else{
				nav2Pos = slots.Length-1;
			}
		}else{
			if(nav2Pos+change >= 0){
				nav2Pos += change;
			}else{
				nav2Pos = 0;
			}
		}
		navigator2.position = slots[nav2Pos].position;
                textShowNav2.text = "Nav 2 is at slot "+ nav2Pos;
	}
}

If you create a .cs script named SlotSelector and paste this inside, then you can attach the script to a game object (any one you like) then you set “navigator1” to be your first navigator UI and “navigator2” to be your second. Next in the Array called “slots” you will see that there is space for 12 components, add your slot UIs to these component slots (remembering that arrays start at 0, so slot 1 will go to element 0, slot 2 will go to element 1 etc…) you can increase the length at the top if you wish to have more that 12 slots, or less.

Then set “textShowNav1” to a ui text component and “textShowNav2” to another, and this will tell you their current slot.

Your example photo shows rows of 4, if you wish to use rows of 6, for example, simply change “jumpAmount” in the inspector to 6.

If you have any questions or want me to explain some of the code, please don’t hesitate to ask :slight_smile: the script may look daunting but is actually very simple

Hope this helped, Beau C.