Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

menu tabs

Discussion in 'Scripting' started by gibberingmouther, Nov 25, 2017.

  1. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    i have five tabs at the top of each menu in the game. i want the tab that corresponds to the active menu to be highlighted. how can i do this? i thought about making a tab-shaped colored sprite and replacing the active tab with that image. is that the best i can do, and if so, any ideas how i would implement it efficiently? i'm in rubber duck mode here.

    this seems simple and i guess it is but i'm still not sure how to proceed.
     
  2. methos5k

    methos5k

    Joined:
    Aug 3, 2015
    Posts:
    8,712
    What does highlighted mean to you? If it's just a colour change, .. I'd just change the colour. If the tab has more to it, like a different image/border or anything, I'd swap its sprite. That's just me.
     
  3. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
  4. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    nevermind, since i'm implementing the tabs as buttons, i'm pretty much limited to sprite swap. thanks!
     
  5. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    edit2: so i guess to narrow it down, my question is, how can i do a sprite swap in code?

    i guess i could use an interface to catch a click and do the buttons that way, thus allowing me also to use the sprite renderer sprite swap technique, but i'm hoping there's a way that doesn't require me to redo all my buttons
    -----------------------
    okay, wait, i can't use the sprite swap in the inspector. i need to change the sprite in code. how would i do this?

    sorry for triple posting, but otherwise people would have assumed this was solved.

    edit:
    i did a google search and see how you could use the sprite renderer, but i don't know if that is an option since i have my tabs as buttons?
    -------------
    edit3: okay, what i'm thinking now is i need to redo my buttons with an interface, so not actual "buttons" in the Unity editor sense, but still basically buttons. and then i can use the sprite renderer to swap sprites as needed. or could i change the color using the sprite renderer and still keep the same sprite, thus enabling me to keep my buttons? ah, see, rubber duck effect.
     
    Last edited: Nov 25, 2017
  6. Fido789

    Fido789

    Joined:
    Feb 26, 2013
    Posts:
    343
    Just get a reference to Image component of your button and you can change the color of your sprite.

    Code (CSharp):
    1. button.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
     
    gibberingmouther likes this.
  7. methos5k

    methos5k

    Joined:
    Aug 3, 2015
    Posts:
    8,712
    Buttons have an image component. You didn't say if you were using a sprite on it. I'm talking about the sprite that goes in that image component...

    Okay, @Fido789 responded as I was writing. Yep, you can do that and/or change the sprite (of the Image).

    Maybe you are over thinking it.. not familiar with it.
     
    gibberingmouther likes this.
  8. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    ah, thanks guys! that's the solution i was hoping for. otherwise, i was going to do something that would require writing a lot of code as well as redoing all my buttons. :)
     
  9. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    EDIT2: okay, it's partly fixed after i changed it to reflect having only one set of 5 tabs that i just enable or disable. i updated the code. for some reason, when i have the character sheet active, the tab buttons don't work.
    -------------------------
    could anyone look at my code? this is simple, but i'm doing something wrong:
    Code (csharp):
    1.  
    2. using System.Collections;
    3. using System.Collections.Generic;
    4. using UnityEngine;
    5. using UnityEngine.UI;
    6.  
    7. public class MenuTabButtons : MonoBehaviour {
    8.  
    9.     public Canvas CS;
    10.     public Canvas MSkills;
    11.     public Canvas MFeats;
    12.     public Canvas MSpells;
    13.     public Canvas MJournal;
    14.  
    15.     public Canvas menutabs;
    16.  
    17.     public Button cs;
    18.     public Button mskills;
    19.     public Button mfeats;
    20.     public Button mspells;
    21.     public Button mjournal;
    22.  
    23.    // Use this for initialization
    24.    void Start () {
    25.         //CS.enabled = false;
    26.         MSkills.enabled = false;
    27.         MFeats.enabled = false;
    28.         MSpells.enabled = false;
    29.         MJournal.enabled = false;
    30.  
    31.         menutabs.enabled = false;
    32.  
    33.         //cs.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    34.     }
    35.    
    36.    // Update is called once per frame
    37.    void Update ()
    38.     {
    39.         if (Input.GetKeyDown(KeyCode.C))
    40.         {
    41.             //CS.enabled = !CS.enabled;
    42.  
    43.             if (CS.enabled)
    44.                 menutabs.enabled = true;
    45.             else menutabs.enabled = false;
    46.  
    47.             cs.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    48.             mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    49.             mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    50.             mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    51.             mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    52.         }
    53.         if (Input.GetKeyDown(KeyCode.S))
    54.         {
    55.             MSkills.enabled = !MSkills.enabled;
    56.  
    57.             if (MSkills.enabled)
    58.                 menutabs.enabled = true;
    59.             else menutabs.enabled = false;
    60.  
    61.             cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    62.             mskills.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    63.             mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    64.             mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    65.             mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    66.         }
    67.         if (Input.GetKeyDown(KeyCode.F))
    68.         {
    69.             MFeats.enabled = !MFeats.enabled;
    70.  
    71.             if (MFeats.enabled)
    72.                 menutabs.enabled = true;
    73.             else menutabs.enabled = false;
    74.  
    75.             cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    76.             mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    77.             mfeats.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    78.             mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    79.             mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    80.         }
    81.         if (Input.GetKeyDown(KeyCode.M))
    82.         {
    83.             MSpells.enabled = !MSpells.enabled;
    84.  
    85.             if (MSpells.enabled)
    86.                 menutabs.enabled = true;
    87.             else menutabs.enabled = false;
    88.  
    89.             cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    90.             mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    91.             mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    92.             mspells.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    93.             mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    94.         }
    95.         if (Input.GetKeyDown(KeyCode.J))
    96.         {
    97.             MJournal.enabled = !MJournal.enabled;
    98.             if (MJournal.enabled)
    99.                 menutabs.enabled = true;
    100.             else menutabs.enabled = false;
    101.  
    102.             cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    103.             mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    104.             mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    105.             mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    106.             mjournal.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    107.         }
    108.     }
    109.  
    110.     public void ButtonCS()
    111.     {
    112.         CS.enabled = !CS.enabled;;
    113.         MSkills.enabled = false;
    114.         MFeats.enabled = false;
    115.         MSpells.enabled = false;
    116.         MJournal.enabled = false;
    117.         if (CS.enabled)
    118.             menutabs.enabled = true;
    119.         else menutabs.enabled = false;
    120.  
    121.         cs.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    122.         mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    123.         mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    124.         mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    125.         mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    126.     }
    127.  
    128.     public void ButtonMSkills()
    129.     {
    130.         CS.enabled = false;
    131.         MSkills.enabled = !MSkills.enabled;
    132.         MFeats.enabled = false;
    133.         MSpells.enabled = false;
    134.         MJournal.enabled = false;
    135.         if (MSkills.enabled)
    136.             menutabs.enabled = true;
    137.         else menutabs.enabled = false;
    138.  
    139.         cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    140.         mskills.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    141.         mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    142.         mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    143.         mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    144.     }
    145.  
    146.     public void ButtonMFeats()
    147.     {
    148.         CS.enabled = false;
    149.         MSkills.enabled = false;
    150.         MFeats.enabled = !MFeats.enabled;
    151.         MSpells.enabled = false;
    152.         MJournal.enabled = false;
    153.         if (MFeats.enabled)
    154.             menutabs.enabled = true;
    155.         else menutabs.enabled = false;
    156.  
    157.         cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    158.         mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    159.         mfeats.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    160.         mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    161.         mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    162.     }
    163.  
    164.     public void ButtonMSpells()
    165.     {
    166.         CS.enabled = false;
    167.         MSkills.enabled = false;
    168.         MFeats.enabled = false;
    169.         MSpells.enabled = !MSpells.enabled;
    170.         MJournal.enabled = false;
    171.         if (MSpells.enabled)
    172.             menutabs.enabled = true;
    173.         else menutabs.enabled = false;
    174.  
    175.  
    176.         cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    177.         mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    178.         mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    179.         mspells.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    180.         mjournal.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    181.     }
    182.  
    183.     public void ButtonMJournal()
    184.     {
    185.         CS.enabled = false;
    186.         MSkills.enabled = false;
    187.         MFeats.enabled = false;
    188.         MSpells.enabled = false;
    189.         MJournal.enabled = !MJournal.enabled;
    190.  
    191.         if (MJournal.enabled)
    192.             menutabs.enabled = true;
    193.         else menutabs.enabled = false;
    194.  
    195.         cs.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    196.         mskills.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    197.         mfeats.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    198.         mspells.GetComponent<Image>().color = new Color32(255, 255, 255, 255);
    199.         mjournal.GetComponent<Image>().color = new Color32(255, 0, 0, 255);
    200.     }
    201. }
    202.  
    203.  
    204.  
    i have 5 menus and 5 tabs at the top of each menu, referring to character sheet, skills, feats, spells, or journal menus respectively. my menus aren't behaving right though. i assigned the script to a component of each menu separately, so i could add in the buttons unique to that menu. kind of messy, but i don't know how else to do it. (technically, there are 25 tabs total - the 5 ones identified above repeated 5 times because there are 5 menus).

    CS is not enabled or disabled here because i have it enabled/disabled in another script.

    the key press part of it works. it brings up the right menu and highlights the corresponding tab. but the buttons don't work right.

    edit: do you guys think i should have the tabs in their own canvas so i can just enable that and don't have to do everything 5 times over? hmmm....
     
    Last edited: Nov 26, 2017
  10. methos5k

    methos5k

    Joined:
    Aug 3, 2015
    Posts:
    8,712
    Code (csharp):
    1.  
    2. // top
    3. Button [] allButtons; // Or array/list of Images (which could be a copy of the buttons, but means you don't need get component.
    4. if (Input.GetKeyDown(KeyCode.M))
    5. {
    6.    MSpells.enabled = !MSpells.enabled;
    7.    menutabs = MSpells.enabled;
    8.    ToggleImage(mspells);
    9. }
    10. void ToggleImage(Button button) {
    11.     for(int i = 0 ; i < allButtons.Length; ++i) {
    12.        Image im = allButtons[i].GetComponent<Image>();
    13.        if(allButtons[i] == button) im.color = new Color32(255,0,0,255);
    14.        else im.color = new Color32(255,255,255);
    15.        }
    16.   }
    17.  
    That's just something I thought of that seems a little more compact. Honestly, I haven't completely wrapped my head around your design with many canvases; that's not something I'm very used to (using), personally.

    Then, I'm not entirely sure where your next problem/issue is, after your updates lol
     
    gibberingmouther likes this.
  11. Fido789

    Fido789

    Joined:
    Feb 26, 2013
    Posts:
    343
    You don't need canvas to group your buttons or tabs, you can as well group them under empty GameObject, with one Canvas somewhere at the top of your hierarchy..
     
    gibberingmouther likes this.
  12. gibberingmouther

    gibberingmouther

    Joined:
    Dec 13, 2016
    Posts:
    259
    okay, got it working!

    EDIT: @Fido789 thanks, will remember that