Unity 5.5 - Modify image of a button from an array of images via script - Logic Help

Question

Right now i have this:

Is a placeholder for what i want to do. This blue circles are images in different buttons, i have a blue image circle for every letter. I have to display the correct letter image to create a word. For example: word: "DOG" and the word is created by the "D" "O" "G" images.

That is the logic i cannot get my head around.

How can I, via script, select which image to show depending on the word given?

IDEAS:

• I have an array of (INDEX, "letter") in my GameController.CS. Maybe i can add a number to the different images name. Separeate the word in characters. Look the position of this character in the Letters[] and that number turn it into a string and find the image with that number in the name.

I really need help to figure this out.

Thanks in advance for any help.

Answer 1

I've created a simple solution to get you started.

Assuming you have 26 images of the letters (or a multi-image sprite which is what I used) do the following:

1. Create a project, include the images in the project as assets.
2. Create two empty objects, we'll call them Letter and LetterMgr
3. Add a sprite renderer to Letter. This will be our template object.
4. Add a script file called LetterMgr.cs and add it to the LetterMgr object.

5. Add the following code to the script:

   public GameObject LetterTemplate;
   
   public Sprite[] TheLetters;
   
   void Start () {
       var theWord = "Lilo";
       var letters = theWord.ToUpper().ToCharArray();
       var position = Vector3.zero;
       var spacing = Vector3.right * 2;
       foreach (var letter in letters) {
           var letterIndex = letter - 65; // uppercase A is 65
           var letterObj = Instantiate(LetterTemplate, position, Quaternion.identity);
           letterObj.name = letter.ToString();
           letterObj.GetComponent<SpriteRenderer>().sprite = TheLetters[letterIndex];
           position += spacing;
       }
   
   }
   

6. In the Scene editor, click the LetterMgr to show its properties.

7. Click the little lock icon at the top right of the inspector (this is important for the next steps).
8. select all the letter images (order is important, click the first one and then shift-click the last) and drag them to the "The Letters" property in the inspector.
9. Select the Letter object and drag it to the "Letter Template" property.
10. Run the project. You should get a result similar to this: