Search Unity

  1. We are migrating the Unity Forums to Unity Discussions. On July 12, the Unity Forums will become read-only. On July 15, Unity Discussions will become read-only until July 18, when the new design and the migrated forum contents will go live. Read our full announcement for more information and let us know if you have any questions.

Array image to UI

Discussion in 'Getting Started' started by DocJ, Jul 13, 2017.

  1. DocJ

    DocJ

    Joined:
    Dec 9, 2016
    Posts:
    98
    Hi everyone,
    I'm trying to display, on the UI, 3 Sprite Images from a public array of Sprites in the Inspector. When I had the same scenario, but with gameObjects, I could place an empty gameObject in the UI and have the randomly chosen gameObject appear using transform.

    I don't seem to be able to do the same with Sprites in the UI. I've tried using a blank Image and a Raw Image.

    My research led me to things like Resource folders, Parenting to the child on the UI, etc......

    Is there a way similar to the empty gameObject and Transform setup as described above, or should I keep researching the other methods?

    I'm sorry. I should also describe what I'm trying to accomplish so you have a visual. I have 3 dice which , after hitting the Roll button, will display 3 random Sprite Images of dice. The player has the option of tapping on a die or dice to keep before hitting the Roll button again. I figured if I layered the Sprite Image under a transparent button, the Player would be hitting the transparent button and not the Sprite Image of the die they wish to keep. ( I did try changing the image of the die button, but that didn't work either). I would like to keep the dice images on the UI so they're not moving around when the Player moves through the game.

    Thanks again for reading and any suggestions you may have.
     
  2. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,860
    It should work the same. UI elements are just GameObjects. Image is the appropriate one to use. Note that you must make the image a child of a Canvas object.

    Check out the learn section on UI, then check out these two videos for dynamic placement.


     
    Ryiah and JoeStrout like this.
  3. DocJ

    DocJ

    Joined:
    Dec 9, 2016
    Posts:
    98
    Kiwasi,
    Thanks for those videos, they absolutely can come in handy later for me. I only have a minute before I start seeing patients, but I did want to say I've tried using Empty Game Object and parented the Image to it, but it in the Image Script Component it asks for a Source Image, which has to be a Sprite. I would like to not place an image in there and instead have some sort of 'holder', like an Empty Game Object, but that doesn't seem possible. And if I try to script it that way, the error states something about unable to convert gameobject to sprite.

    I wanted to take a quick moment this morning to thank you for responding, and I'll try more this afternoon when I'm done with work. Have a great day!
     
  4. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,860
    Are you familiar with prefabs? You can use a prefab and then set the image via code.
     
  5. Schneider21

    Schneider21

    Joined:
    Feb 6, 2014
    Posts:
    3,512
    What I do is create the image in the UI ahead of time and size it up how I want. I'll either put a placeholder image in there or leave it empty to get a white box. My component has an array of Sprites that I populate with all my candidate images.

    At runtime, I access the Image component (either through an Inspector-assigned variable or through GetComponent, depending) and change the .sprite property of it to the appropriate Sprite from my list. This works flawlessly.
    Code (CSharp):
    1. public Sprite[] images;
    2. public Image imageContainer;
    3.  
    4. public void SetImage(int index) {
    5.     if (images.length >= index) {
    6.         imageContainer.sprite = images[index];
    7.     } else {
    8.         Debug.LogError("Invalid image index: " + index);
    9.     }
    10. }
    Edit: Note, if your images are different sizes and dimensions, this may not work for you, as this example assumes they're all the same size. You can still do this, but you'll have to mess with the RectTransform as well.
     
    dthoma6403 and NordicIsle like this.
  6. DocJ

    DocJ

    Joined:
    Dec 9, 2016
    Posts:
    98
    Schneider, thanks so much for the help. I can't believe that after all the searching and reading about Resource folders, and parenting, etc, it turns out that just the one line of code worked phenomenally. I had been working with an Image as a placeholder like you also suggested, but I couldn't get it to change. I'll show you how I was wrongly trying to use the code snippet you gave me. I had it as a separate function, thinking it would run right after RandomDice (). It didn't. All I ended up having to do was take just the one line and bring it up to the RandomDice() and everything works beautiful. It's funny how one idea leads to another, then another, then.....well you get the idea. I'm going to, on my own, figure out how to have the dice appear randomly a few times before it settles on a final one. Sort of like a flat 1D version of a dice roll.
    Code (CSharp):
    1. public class DiceHolder : MonoBehaviour {
    2.  
    3.     public Sprite[] diceImages;
    4.     public Image die1;
    5.     int CurrentRedDice1Chosen, CurrentRedDice2Chosen, CurrentRedDice3Chosen;
    6.     int redDice1ChosenFromTheArray, redDice2ChosenFromTheArray, redDice3ChosenFromTheArray;
    7.     public int totalRolledAmount;
    8.     public GameObject BoxToShowNumberRolled; // Empty GameObject to display Total of 2 Dice Rolled
    9.  
    10.     public void PickRandomDice ()
    11.     {
    12.         redDice1ChosenFromTheArray = Random.Range (0, diceImages.Length);
    13.         Debug.Log (redDice1ChosenFromTheArray + 1);
    14.  
    15.     }
    16.     public void SetImages (int redDice1ChosenFromTheArray)
    17.     {
    18.         die1.sprite = diceImages [redDice1ChosenFromTheArray];
    19.     }
    20. }
    This wasn't working. The code that works is below. Thanks again for the guidance!

    Code (CSharp):
    1. public class DiceHolder : MonoBehaviour {
    2.  
    3.     public Sprite[] diceImages;
    4.     public Image die1;
    5.     int CurrentRedDice1Chosen, CurrentRedDice2Chosen, CurrentRedDice3Chosen;
    6.     int redDice1ChosenFromTheArray, redDice2ChosenFromTheArray, redDice3ChosenFromTheArray;
    7.     public int totalRolledAmount;
    8.     public GameObject BoxToShowNumberRolled;
    9.  
    10.     public void PickRandomDice ()
    11.     {
    12.         redDice1ChosenFromTheArray = Random.Range (0, diceImages.Length);
    13.         die1.sprite = diceImages [redDice1ChosenFromTheArray];
    14.         Debug.Log (redDice1ChosenFromTheArray + 1);
    15.  
    16.  
    17.     }
    18. }
    19.  
     
    LilGames and Schneider21 like this.
  7. Schneider21

    Schneider21

    Joined:
    Feb 6, 2014
    Posts:
    3,512
    No problem! Glad to be a help.
     
    DocJ likes this.
  8. js2287

    js2287

    Joined:
    Oct 21, 2018
    Posts:
    1
    Hi
    I have a doubt related to this. I am creating button which is interactable with leap motion.So i am using Collison method. On UI i am creating Next button for 100 no. of images do you know the exact method by which i can do that perfectly ??

    Code (CSharp):
    1. public class createGUIimage : MonoBehaviour {
    2.  
    3.     public Sprite[] images;
    4.     public Image imageContainer;
    5.     int imagearray;
    6.     public void SetImage(int index)
    7.     {
    8.         if (images.Length >= index)
    9.         {
    10.             imageContainer.sprite = images[index];
    11.         }
    12.         else
    13.         {
    14.             Debug.LogError("Invalid image index: " + index);
    15.         }
    16.     }
    17.  
    18.     //[SerializeField] public Image customImage ;
    19.     private void OnCollisionEnter(Collision collision)
    20.     {
    21.         if (collision.rigidbody)
    22.         {
    23.             imagearray = Random.Range(0, images.Length);
    24.             imageContainer =image(imagearray) ;
    25.             Debug.Log(imagearray + 1);
    26.  
    27.  
    28.           //  imageContainer.enabled = true;
    29.             Debug.Log("Image Display");
    30.         }
    31.  
    32.     }
    33.  
    34.  
    35. }
     
  9. Bill_Martini

    Bill_Martini

    Joined:
    Apr 19, 2016
    Posts:
    445
    So exactly what is your question?