Search Unity

Select Screen

Discussion in 'Immediate Mode GUI (IMGUI)' started by GlitchInTheMatrix, Oct 26, 2010.

  1. GlitchInTheMatrix

    GlitchInTheMatrix

    Joined:
    Apr 12, 2010
    Posts:
    285
    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 :)
     
  2. mattcscz

    mattcscz

    Joined:
    Mar 7, 2010
    Posts:
    411
    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 :D

    and ofcourse there will be alot more effiecient ways of doing this, i just don't know how to ;)
    hope this helps
     
  3. GlitchInTheMatrix

    GlitchInTheMatrix

    Joined:
    Apr 12, 2010
    Posts:
    285
    Thanks Mattcscz!

    Is a good point from where i can start :)

    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 :(

    Thanks for the help
     
  4. jedy

    jedy

    Joined:
    Aug 1, 2010
    Posts:
    579
  5. GlitchInTheMatrix

    GlitchInTheMatrix

    Joined:
    Apr 12, 2010
    Posts:
    285
    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 :(

    thanks
     
    Last edited: Oct 27, 2010
  6. GlitchInTheMatrix

    GlitchInTheMatrix

    Joined:
    Apr 12, 2010
    Posts:
    285
    ok, i got stg!

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

    Code (csharp):
    1. function Update () {
    2. var x = Input.GetAxis("HorizontalP1") * Time.deltaTime;
    3. var y = Input.GetAxis("VerticalP1") * Time.deltaTime;
    4.  
    5. transform.Translate(x, y, 0);
    6. }
    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. mattcscz

    mattcscz

    Joined:
    Mar 7, 2010
    Posts:
    411
    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 :D)

    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 :p

    Code (csharp):
    1. var P1Selected = true;
    2. var P2Selected = false;
    3. var P3Selected = false;
    4.  
    5. var t : float = 1.0;
    6.  
    7. var P1SelectedTexture : Texture;
    8. var P2SelectedTexture : Texture;
    9. var P3SelectedTexture : Texture;
    10.  
    11. var P1Unselected : Texture;
    12. var P2Unselected : Texture;
    13. var P3Unselected :Texture;
    14.  
    15. function Start () {
    16. P1Selected = true;
    17. }
    18. function Update () {
    19. if(Input.GetKeyDown ("right")  P1Selected) {
    20. P1Selected = false;
    21. P2Selected = true;
    22. P3Selected = false;
    23. }
    24. if(Input.GetKeyDown ("right")  P2Selected) {
    25. P1Selected = false;
    26. P2Selected = false;
    27. P3Selected = true;
    28.     }
    29. if(Input.GetKeyDown ("right")  P3Selected) {
    30. P1Selected = true;
    31. P2Selected = false;
    32. P3Selected= false;
    33.     }
    34. }
    35.  
    36. function OnGUI () {
    37. if(P1Selected) {
    38.     GUI.DrawTexture(Rect(10,10,50,50), P1SelectedTexture, ScaleMode.ScaleToFit, true, t);
    39.     GUI.DrawTexture(Rect(50,50,50,50),P2Unselected, ScaleMode.ScaleToFit, true, t);
    40.     GUI.DrawTexture(Rect(100,100,50,50), P3Unselected, ScaleMode.ScaleToFit, true, t);
    41.    
    42.     }
    43. if(P2Selected) {
    44.     GUI.DrawTexture(Rect(10,10,50,50), P1Unselected, ScaleMode.ScaleToFit, true, t);
    45.     GUI.DrawTexture(Rect(50,50,50,50),P2SelectedTexture, ScaleMode.ScaleToFit, true, t);
    46.     GUI.DrawTexture(Rect(100,100,50,50), P3Unselected, ScaleMode.ScaleToFit, true, t);
    47.     }
    48. if(P3Selected) {
    49.     GUI.DrawTexture(Rect(10,10,50,50), P1Unselected, ScaleMode.ScaleToFit, true, t);
    50.     GUI.DrawTexture(Rect(50,50,50,50),P2Unselected, ScaleMode.ScaleToFit, true, t);
    51.     GUI.DrawTexture(Rect(100,100,50,50), P3SelectedTexture, ScaleMode.ScaleToFit, true, t);
    52.     }
    53. }
    ah see! your method is much better! keep up with that XD
     
  8. jedy

    jedy

    Joined:
    Aug 1, 2010
    Posts:
    579
    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. GlitchInTheMatrix

    GlitchInTheMatrix

    Joined:
    Apr 12, 2010
    Posts:
    285
    thanks jedybg! i will test this tonight and post the result here :)

    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 :(