koobas.hobune.stream
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 
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 :) the script may look daunting but is actually very simple
Hope this helped, Beau C.
Hey! that works perfect! thank you so much! I only found 1 "bug" when iam at slot 10 for example and press down again, the selector goes to slot 12 and not to slot 2 or nowhere. but thats i $$anonymous$$or issue ;)
The position can be handled using modulo operators if you want to wrap from top to bottom and can also prevent changing lines from left to right as desired.
As a simple example, you can deter$$anonymous$$e position changes with:
// left/right
// From your current position, add or subtract 1 (moveInput as -1 or 1)
// Example: 4 columns, 3 rows, (4x3 grid)
// 0 1 2 3
// 4 5 6 7
// 8 9 10 11
// From 7, we move right. That means
// ((integer)(7 / 4) * 4) + ((7 + 1) % 4)
// (1 * 4) + (8 % 4)
// 4 + 0
newPosition = ((currentPosition / columns) * columns) + ((currentPosition + moveInput) % columns);
// left/right
// From your current position, add or subtract 1 * columns (moveInput as -1 or 1 multiplier)
// Example: 4 columns, 3 rows, (4x3 grid)
// 0 1 2 3
// 4 5 6 7
// 8 9 10 11
// From 10, we move down. That means
// (10 + (4 * 1)) % (4 * 3)
// 14 % 12
// 2
newPosition = (currentPosition + (columns * moveInput)) % (columns * rows);
This pair of formulas should be usable for any rectangular grid to loop back around both horizontally and vertically.
Hello.
Sorry for the silly question. Where do I put the added script
newPosition = ((currentPosition / columns) * columns) + ((currentPosition + moveInput) % columns);
Would I put that at the end of the selection on line 65 ?
I am new to C# and I am also wanting to make a selection menu to load characters.
Thank you in advance.
