Select Screen

Unity Engine
1

Hi U Community,

Im learning every day new staff about the great Unity form my personal project and this time im need to make a select screen for my game.

It’s is like a classic Mortal Kombat Select Screen.

My problem is that i don’t know from where start, make like a table with the faces of my chars inside and use like a cursor over the chars faces for select them.

I think that i have to work with IDs for know what player i selected but i don’t know from where start.

any help there?

thanks a lot guys :slight_smile:

2

Well you could create a background, then create a pallet within like many inventory scripts around to tile your characters easly. or you could simply place all of them in buttons or boxes.If they were buttons then it would easly be tracable for which button was clicked if you add an id like stated above. Ill try and write an example of what i mean.

Then to save what you’ve selected if you wish to load up a new scene with the chosen characters you should look into PlayerPrefs.
also the button areas wont be 100% accurate as i did them out of my head. And you should look into how to use GUI.DrawTexture for your pictures :smile:

and ofcourse there will be alot more effiecient ways of doing this, i just don’t know how to :wink:
hope this helps

3

Thanks Mattcscz!

Is a good point from where i can start :slight_smile:

here my status with the select screen.

  1. I created a scene
  2. i created 4 GUI Textures (Player1, Player2, Player3, Player4)
  3. i add 4 textures to all “GUI Textures”

In my HierArchy looks like this

And on Screen like this

This is what im looking to do :

  1. select a character with the keyboard
  2. add a cursor like this over the char im selecting

When i press a key select my char.

I don’t really understand how work with GUITextures :frowning:

Thanks for the help

4

For starters - make a green box texture, you will draw that over the selected character.

Example :

var selected1 = false;
var selected2 = false;

function OnGUI(){
if(selected1){
GUI.DrawTexture(); //(Unity - Scripting API: GUI.DrawTexture)
If(Input.GetButtonDown( Enter )){
Application.LoadLevel (0);
}
}

}

5

Thanks Jedybg! this help me a lot with my algorithm.

My principal problem now is how to use the keyboard for change from P1 to P2, P3 or P4.

something like this gif.

using the keyboard to move the cursor and choose the character.

thanks to Mattcscz and Jedybg and understand how it’s work, any help with the keyboard control in the select screen ?

actualy my character is working with a control script but in the select screen don’t work :frowning:

thanks

6

ok, i got stg!

I created over the char1 icon other GUITEXTURE with the green cursor and add this control script

function Update () {
var x = Input.GetAxis("HorizontalP1") * Time.deltaTime;
var y = Input.GetAxis("VerticalP1") * Time.deltaTime;

transform.Translate(x, y, 0);
}

Now i have it moving in the screen but what i want to do is that when i press the “right key” the cursor move the actual position + 45. (45 is the distance of the char2 icon)

any help ? or other way to make it ?

thanks

7

well the only way i can think of acheiving this is long and probally not efficient but i personally would do somthing like the following (but this is becuase im not efficient enough in JS yet :smile:)

also i have not tested this, i just wrote it out of my head but i hope it gives you a general idea. also with this method it would be hard to implement up and down selections rather than just left and right. You should probally just take this script as an idea and try to create your own :stuck_out_tongue:

var P1Selected = true;
var P2Selected = false;
var P3Selected = false;

var t : float = 1.0;

var P1SelectedTexture : Texture;
var P2SelectedTexture : Texture;
var P3SelectedTexture : Texture;

var P1Unselected : Texture;
var P2Unselected : Texture;
var P3Unselected :Texture;

function Start () {
P1Selected = true;
}
function Update () {
if(Input.GetKeyDown ("right")  P1Selected) {
P1Selected = false;
P2Selected = true;
P3Selected = false;
}
if(Input.GetKeyDown ("right")  P2Selected) {
P1Selected = false;
P2Selected = false;
P3Selected = true;
	}
if(Input.GetKeyDown ("right")  P3Selected) {
P1Selected = true;
P2Selected = false;
P3Selected= false;
	}
}

function OnGUI () {
if(P1Selected) {
	GUI.DrawTexture(Rect(10,10,50,50), P1SelectedTexture, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(50,50,50,50),P2Unselected, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(100,100,50,50), P3Unselected, ScaleMode.ScaleToFit, true, t);
	
	}
if(P2Selected) {
	GUI.DrawTexture(Rect(10,10,50,50), P1Unselected, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(50,50,50,50),P2SelectedTexture, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(100,100,50,50), P3Unselected, ScaleMode.ScaleToFit, true, t);
	}
if(P3Selected) {
	GUI.DrawTexture(Rect(10,10,50,50), P1Unselected, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(50,50,50,50),P2Unselected, ScaleMode.ScaleToFit, true, t);
	GUI.DrawTexture(Rect(100,100,50,50), P3SelectedTexture, ScaleMode.ScaleToFit, true, t);
	}
}

ah see! your method is much better! keep up with that XD

8

Make a two dimensional array containing all 4 characters.

Visual example :
0 0
0 1
1 - is the selected char.

or in array positions :
0/0 0/1
1/0 1/1

And then make some functions like :
if (Input.GetAxis(“Horizontal”) > 0){
if(x>1) x=0;
characters[x,y] = false; ( this should be the previously selected character position )
characters[x+1,y] = true;
}

And finally draw the selection green thingie depending on the current selected char in the array.

9

thanks jedybg! i will test this tonight and post the result here :slight_smile:

Actually my select screen will have 20 characters :S

so if there is a way to draw a grid/table or cells and that the green cursor move just inside the each cell will be great to optimization code.

Other member recommend me use itween for it but i have no idea how itween works :frowning: