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

Shop Scene in my 2D Fighting Game

Discussion in '2D' started by moltigor, Nov 9, 2019.

  1. moltigor

    moltigor

    Joined:
    Nov 2, 2019
    Posts:
    3
    Hello,
    I am a very new programmer looking into making a game for myself to feel accomplishment and I can't figure out the shop scene. As you can see in the picture, I have my desired layout but I'm not sure how to code this so that my three top players are free, my second 3 are 1000 coins and my bottom 3 are 2000. I'm also not sure how to get whatever character is selected into my game. Could you guys help explain this to me if you have time?
    Thanks!
     

    Attached Files:

  2. MisterSkitz

    MisterSkitz

    Joined:
    Sep 2, 2015
    Posts:
    833
    Well, you're starting out a little complex. What you would want to do is add tags to the three up top (Tag = TopRow) then Tags MiddleRow and BottomRow. Add the tags accordingly to each of the fighters. You will need to determine which one was clicked and does the person have enough coins to obtain it. Then you also need to be able to mark the bought ones as Unlocked. (Unless you gotta buy them every time or something).
     
  3. moltigor

    moltigor

    Joined:
    Nov 2, 2019
    Posts:
    3
    well i guess ill try to figure it out
     
  4. Gunging

    Gunging

    Joined:
    Sep 6, 2016
    Posts:
    139
    1] Start by adding Button Components to your GameObjects

    upload_2019-11-9_20-41-41.png
    Tip: Select all the GameObjects in the Hierarchy that have an Image Component. Then proceed.


    upload_2019-11-9_20-16-48.png
    Add this, the correct Button Component.

    upload_2019-11-9_20-45-15.png
    Now that every one of those has its own Button Component, also change the "Disabled Color" to black (make sure you set the Alpha to 255: completely opaque).
     
    Last edited: Nov 10, 2019
    vakabaka likes this.
  5. Gunging

    Gunging

    Joined:
    Sep 6, 2016
    Posts:
    139
    2] Create something to display which character is currently selected:

    upload_2019-11-9_21-34-49.png
    I'd just make a new Image Component

    upload_2019-11-9_21-36-1.png

    With a child Text Component

    upload_2019-11-9_21-37-42.png

    And make it look something like this. IMPORTANT: It has space for two lines of text.
     
    MisterSkitz and vakabaka like this.
  6. Gunging

    Gunging

    Joined:
    Sep 6, 2016
    Posts:
    139
    3] Make the script you need to make everything work together! Here is an example:

    Code (CSharp):
    1.  
    2. using System.Collections;
    3. using System.Collections.Generic;
    4. using UnityEngine;
    5. using UnityEngine.UI;
    6.  
    7. public enum Character_Classes {
    8.     Gladiator,
    9.     Warrior,
    10.     Ninja,
    11.     Pirate,
    12.     Soldier,
    13.     Barbarian,
    14.     Viking,
    15.     Commander,
    16.     Samurai
    17. }
    18.  
    19. public static class Econonomy {
    20.     // Global Variable to know what character the player has selected!
    21.     public static Character_Classes selectedCharacter = Character_Classes.Gladiator;
    22.  
    23.     // Global "Storage" to remember what characters the player has unlocked
    24.     public static bool[] unlockedCharacters = new bool[System.Enum.GetNames(typeof(Character_Classes)).Length];
    25.  
    26.     // The amount of money the player has in the first place
    27.     public static float playerMoney;
    28. }
    29.  
    30. public class Shoppin : MonoBehaviour {
    31.  
    32.     // How much coins does each character cost?
    33.     Dictionary<Character_Classes, float> characterCosts = new Dictionary<Character_Classes, float> {
    34.         { Character_Classes.Gladiator,  0 },
    35.         { Character_Classes.Warrior,    0 },
    36.         { Character_Classes.Ninja,      0 },
    37.         { Character_Classes.Pirate,     1000 },
    38.         { Character_Classes.Soldier,    1000 },
    39.         { Character_Classes.Barbarian,  1000 },
    40.         { Character_Classes.Viking,     3000 },
    41.         { Character_Classes.Commander,  3000 },
    42.         { Character_Classes.Samurai,    3000 }
    43.     };
    44.  
    45.     public float hackedMoney;
    46.  
    47.     // Image that displays the currently selected character
    48.     public Image currentCharacterDisplay;
    49.  
    50.     // The character buttons
    51.     public Button[] characterButtons = new Button[System.Enum.GetNames(typeof(Character_Classes)).Length];
    52.     Dictionary<Character_Classes, Button> charButtonRelation = new Dictionary<Character_Classes, Button>();
    53.  
    54.     // The Buy / Select BUtton thing
    55.     public Button buySelectButton;
    56.  
    57.     // TO know what character is currently selected
    58.     Character_Classes selectedCharacter;
    59.     Button selectedButton;
    60.  
    61.     private void Start() {
    62.         Econonomy.playerMoney = hackedMoney;
    63.  
    64.         // If the price is 0, it is a default character and thus unlocked by default
    65.         for (int c = 0; c < Econonomy.unlockedCharacters.Length; c++) { if (characterCosts[(Character_Classes)c] == 0) { Econonomy.unlockedCharacters[c] = true; } }
    66.  
    67.         // For every button
    68.         for (int b = 0; b < characterButtons.Length; b++) {
    69.  
    70.             // What character does this burron correspond to?
    71.             Character_Classes character = (Character_Classes)System.Enum.Parse(typeof(Character_Classes), characterButtons[b].gameObject.name);
    72.  
    73.             // The character name and this button are now linked
    74.             charButtonRelation.Add(character, characterButtons[b]);
    75.  
    76.             // Creating a color block to modify the button's colors
    77.             var buttonColors = characterButtons[b].colors;
    78.             buttonColors.normalColor = Color.white;
    79.             buttonColors.disabledColor = Color.black;
    80.  
    81.             // If the player doesn't own this character
    82.             if (!Econonomy.unlockedCharacters[(int)character]) {
    83.                 // If the player can afford the character
    84.                 if (Econonomy.playerMoney >= characterCosts[character]) {
    85.                     // The character is just grayed out a little
    86.                     buttonColors.normalColor = Color.gray;
    87.  
    88.                     // The player is allowed to buy this character
    89.                     characterButtons[b].interactable = true;
    90.  
    91.                 // If the player can't afford the character
    92.                 } else {
    93.                     // The character is but a silhouette
    94.                     buttonColors.disabledColor = Color.black;
    95.  
    96.                     // The character cannot be selected nor bought.
    97.                     characterButtons[b].interactable = false;
    98.                 }
    99.  
    100.             // But if the player owns this character
    101.             } else {
    102.                 // The image is not tinted in any way.
    103.                 buttonColors.normalColor = Color.white;
    104.  
    105.                 // The player is allowed to select this character
    106.                 characterButtons[b].interactable = true;
    107.             }
    108.  
    109.             // Apply colors
    110.             characterButtons[b].colors = buttonColors;
    111.  
    112.             // Apply listeners to buttons - makes the buttons actually do something
    113.             Button butt = characterButtons[b];
    114.             characterButtons[b].onClick.AddListener(
    115.                 delegate { CharacterSelect(character, butt); });
    116.         }
    117.         // The current character display displays what is currently selected.
    118.         currentCharacterDisplay.sprite = charButtonRelation[Econonomy.selectedCharacter].image.sprite;
    119.  
    120.         // As well as the text
    121.         currentCharacterDisplay.gameObject.transform.GetChild(0).gameObject.GetComponent<Text>().text = "Currently Selected: \n" + charButtonRelation[Econonomy.selectedCharacter].gameObject.name;
    122.     }
    123.  
    124.     public void CharacterSelect(Character_Classes characterName, Button pressedButton) {
    125.         // Creating a color block to modify the button's colors
    126.         var buttonColors = pressedButton.colors;
    127.         buttonColors.normalColor = Color.white;
    128.         buttonColors.disabledColor = Color.black;
    129.  
    130.         // Resetting previously selected button
    131.         if (selectedButton != null) { if (!Econonomy.unlockedCharacters[(int)selectedCharacter]) { buttonColors.normalColor = Color.gray; } selectedButton.colors = buttonColors; }
    132.  
    133.         // Knowing what character it was
    134.         selectedCharacter = characterName;
    135.         selectedButton = pressedButton;
    136.  
    137.         // Making the BUy/Select button display what is appropiate
    138.         if (Econonomy.unlockedCharacters[(int)selectedCharacter]) { buySelectButton.gameObject.GetComponentInChildren<Text>().text = "Select:\n" + selectedCharacter; } else { buySelectButton.gameObject.GetComponentInChildren<Text>().text = "Buy:\n" + selectedCharacter + "\n Costs $" + characterCosts[selectedCharacter] + "\n You have $" + Econonomy.playerMoney; }
    139.  
    140.         // Changing the button color to 'selected'
    141.         buttonColors.normalColor = buttonColors.highlightedColor;
    142.         selectedButton.colors = buttonColors;
    143.     }
    144.  
    145.     public void BuySelect() {
    146.         // If something is actually selected
    147.         if (selectedButton != null) {
    148.             // If the character has been unlocked, this is a SELECT event.
    149.             if (Econonomy.unlockedCharacters[(int)selectedCharacter]) {
    150.                 // Character is selected
    151.                 Econonomy.selectedCharacter = selectedCharacter;
    152.  
    153.                 // The current character display displays what is currently selected.
    154.                 currentCharacterDisplay.sprite = charButtonRelation[selectedCharacter].image.sprite;
    155.  
    156.                 // As well as the text
    157.                 currentCharacterDisplay.gameObject.transform.GetChild(0).gameObject.GetComponent<Text>().text = "Currently Selected: \n" + charButtonRelation[selectedCharacter].gameObject.name;
    158.  
    159.             // But if the player doesnt own it, it is a BUY event
    160.             } else {
    161.                 // Substracting money from player
    162.                 Econonomy.playerMoney -= characterCosts[selectedCharacter];
    163.  
    164.                 // Unlocking the character
    165.                 Econonomy.unlockedCharacters[(int)selectedCharacter] = true;
    166.  
    167.                 // Character is selected
    168.                 Econonomy.selectedCharacter = selectedCharacter;
    169.  
    170.                 // The current character display displays what is currently selected.
    171.                 currentCharacterDisplay.sprite = charButtonRelation[selectedCharacter].image.sprite;
    172.  
    173.                 // As well as the text
    174.                 currentCharacterDisplay.gameObject.transform.GetChild(0).gameObject.GetComponent<Text>().text = "Currently Selected: \n" + charButtonRelation[selectedCharacter].gameObject.name;
    175.                 // Tell the player they've purchased it!
    176.                 buySelectButton.gameObject.GetComponentInChildren<Text>().text = "Bought " + selectedCharacter + "!\n" + "\n You now have $" + Econonomy.playerMoney;
    177.  
    178.                 // MAking sure the player can't buy characters he can't afford! beccause we are relying on them being non-interactable.
    179.                 for (int b = 0; b < characterButtons.Length; b++) {
    180.                     // What character does this burron correspond to?
    181.                     Character_Classes character = (Character_Classes)System.Enum.Parse(typeof(Character_Classes), characterButtons[b].gameObject.name);
    182.  
    183.                     // Creating a color block to modify the button's colors
    184.                     var buttonColors = characterButtons[b].colors;
    185.                     buttonColors.normalColor = Color.white;
    186.                     buttonColors.disabledColor = Color.black;
    187.  
    188.                     // If the player doesn't own this character
    189.                     if (!Econonomy.unlockedCharacters[(int)character]) {
    190.  
    191.                         // If the player can afford the character
    192.                         if (Econonomy.playerMoney >= characterCosts[character]) {
    193.                             // The character is just grayed out a little
    194.                             buttonColors.normalColor = Color.gray;
    195.  
    196.                             // The player is allowed to buy this character
    197.                             characterButtons[b].interactable = true;
    198.  
    199.                         // If the player can't afford the character
    200.                         } else {
    201.                             // The character is but a silhouette
    202.                             buttonColors.disabledColor = Color.black;
    203.  
    204.                             // The character cannot be selected nor bought.
    205.                             characterButtons[b].interactable = false;
    206.                         }
    207.                     }
    208.  
    209.                     // Apply colors
    210.                     characterButtons[b].colors = buttonColors;
    211.                 }
    212.             }
    213.         }
    214.     }
    215. }
    216.  
    And this is the explanation of the things that are not commented, because you'd know what they are and what they do if you were 'advanced,' but because you are not 'advanced,' I will explain them here:
    upload_2019-11-9_22-12-3.png
    In the Red Rectangle you have your libraries, magic stuff that I myself don't know exactly how to describe.

    The Green Rectangle is an enum, a set of names that actually stand for numbers. (You see the world "Gladiator" there, but the machine sees a "0". When the code actually compiles, all instances of that word transform into that number.

    The Blue Rectangle is actually a class, a public static one at that. This means that it can be accessed from anywhere and its variables are the same everywhere (even across scenes).
    • The Pink underlines the selected character. This is how you know what the player has selected right now, because of it being static, it means it is the same across scenes too, so in your game's script you can just read Economy.selectedCharacter and know what the player selected! The default value is "Gladiator."
    • The Orange underlines a bool array, that is, a set of bools. In this particular bool array, there are 9 bools, one of them for every character. If the character is unlocked, its respective bool will have a value of true, but if the character is locked, it will have a value of false. The reason it has 9 is because that is the amount of items in the enum in the rectangle above.
    • The Green underlines the amount of player's money. Also capable of keeping its value across scenes, whenever the player does something that earns them money, all you have to do is add that money to this number ( Economy.playerMoney += [whatever amount of money the player just earned] ).
    The Purple Rectangle is a dictionary. A dictionary links two values, even of different types. In this case, for example, the value Pirate is linked to the value 1000, which is its price. Thus, when we want to know how much the pirate costs, we just ask that dictionary and it will tell us it is worth 1000.

    The rest of the scripts workings are explained in
    comments. You should read those I guess.
     
    Last edited: Nov 10, 2019
    MisterSkitz and vakabaka like this.
  7. Gunging

    Gunging

    Joined:
    Sep 6, 2016
    Posts:
    139
    4] Fill your script's variables

    upload_2019-11-9_22-30-50.png
    Remember that Image that we created on step #2? Well, that would go into "Current Character Display".

    upload_2019-11-9_22-36-7.png
    The
    Button to buy or select a character goes, intuitively, into "Buy Select Button".

    upload_2019-11-9_22-37-53.png
    And finally, each of the character
    Buttons should have its very own slot in the buttons array. Note that, the way this script works, the order doesn't matter.
    Usually, as a developer, you want to be able to test having different amounts of money I guess. thats what that field "Hacked Money" is for - so you can easily give yourself free coins.
     
    MisterSkitz and vakabaka like this.
  8. moltigor

    moltigor

    Joined:
    Nov 2, 2019
    Posts:
    3
    Thanks a lot for your help, I've been following along now I will try to understand the script. Again I really appreciate you going above and beyond to help me!
     
  9. MisterSkitz

    MisterSkitz

    Joined:
    Sep 2, 2015
    Posts:
    833
    Best explanation ever! This should actually be a guide pinned and immortalized in the Unity forum! Well done, amigo!
     
    Gunging likes this.