Hey everyone, Im having a little difficulty trying to figure out how I can change the source image of a UI Image when I click another UI button. So basically I click a UI button and it changes the source image of a UI Image, not a button image but change an actual UI image I have.
Thanks for any help guys
pass a reference into the function that is called by the button’s OnClick event, you can then access the image within the function to do whatever you want.
using UnityEngine.UI;
public void MyButtonClickFunction(Image myImageToUpdate)
{
myImageToUpdate.sprite = .... // change image here (new ui uses sprites)
}
you can then drag the image into the slot in the OnClick event’s inspector
using UnityEngine.UI;
using System.Collections;
public class OnClick : MonoBehaviour {
public void Image.enabled(Image Slot1)
{
Slot1.sprite = car // change image here (new ui uses sprites)
}
I’m very new to coding and I’m having difficulty piecing together the code.
how to configure a button
https://unity3d.com/learn/tutorials/modules/beginner/ui/ui-button?playlist=17111
using UnityEngine;
using UnityEngine.UI;
public class ImageChanger : MonoBehaviour
{
public Sprite spriteToChangeTo;
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
add that script to the button, drag the sprite you want to change to into the spriteToChangeTo slot in the inspector for this script in the inspector. Setup the OnClick event for the button to call this function from this script (from the learn vid above). Drag the UI Image gameObject you want to update into the parameter slot for the function.
Want a different button to change it to some other sprite? copy the exact same script onto that button and configure it as needed in the inspector. No further coding required.
Thank you LeftyRighty! Works Great. I just wanted to let you know tho I attached the script to the UI Image and not the button. That is how the Video showed me also to do it, just in case someone else is reading this thread.
I Ran into a Snag tho. I have 6 UI Images, I have called these Slots1-6 I I also have 24 Buttons. Now I need the Source Image to change on the UI Image when one of the 24 buttons is clicked BUT I need the button to assign an Image to non used UI image slots. I need it to check to see if there is an image assigned to the UI image first and then if it is skip UI image(slot1) and check UI Image2(Slot2) ect, untill all 6 slots are filled with images. The script you wrote works perfect but I cannot figure out how to check the UI Image Source Image first to see if it has a image assigned to it already.
This will allow someone to pick any 6 of the 24 buttons they want and have them be assigned to UI Images 1-6 and the button will just skip to the next UI Image to Fill its Source Image if it does not have one. I do however need it to check in order if there is no source image, otherwise it will just assign the image to all the remaining UI Images at the same time.
I would need something like:
If Slot1 threw Slot6 SourceImage=none then assign image to Slot1
Else If Slot2 threw Slot6 source image = None then assign Image to Slot2
Else If Slot3 threw Slot6 SourceImage= None then assign Image to Slot 3
Else If Slot4 threw Slot6 SourceImage=none then assign image to Slot4
Else If Slot5 threw Slot6 source image = None then assign Image to Slot5
Else If Slot6 tSourceImage= None then assign Image to Slot 6
Else If Do Nothing.
---------------------------------------------------------------------------------------------- maybe like
If Slot1 threw Slot6 SourceImage=none then:
Else If Slot2 threw Slot6 source image = None Then:
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
Else If Slot3 threw Slot6 SourceImage= None then
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
If Slot4 threw Slot6 SourceImage=none then
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
Else If Slot5 threw Slot6 source image = None then:
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
Else If Slot6 SourceImage= None then
public void ChangeImage(Image myImageToUpdate)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
}
Else If Do not change Image
any one have any ideas?
I’m failing horribly at this
Can’t even read it, let alone offer you any advice based on it. In 100 words or less, explain the problem again 
It sounds to me, though, like you’re trying to do something similar to a consumable item “assignment system” in an RPG- click a little icon, that icon gets assigned to the first blank slot in a 6-slot “quick-use items” bar at the bottom. Is this correct?
yes, for simplicity sake if I can figure out just the image swap portion as stated above I will be able to figure out the rest. I just cannot wrap my head around how to swap the items picture out from the slots and assigning it in slot order. i do not want people to be able to choose which slot it goes in tho. i need whatever button is clicked on, on screen 1 to assign that image to one of 6 slots on screen 2 but need that checking order and slot assignment logic.
I think you’re struggling with this because it’s not something that the GUI is really meant to handle on its own- it’s supposed to be reactionary really, responding to things that are happening elsewhere. If you had some sort of an inventory system attached to a manager in the scene or your main character or w/e, then you would have the “slots” located there instead, as an array of objects (“objects” being some sort of class you’d made, like “skills” or “items” or w/e, that hold the images that get displayed to the GUI as well as all of the other data associated with them).
The logic could then be that you’d press a button or do something to bring up a GUI display of all possibilities for those slots on the screen for the player- this would be drawn from some “total list of objects” or w/e that you have stored elsewhere. By clicking on one of the items (functioning as a button, most likely), it would trigger the OnClick event, which would be pointing at a function in your inventory (again, in a manager or on your main character). The inventory function would check that array it’s holding, see which is the first empty slot, if any are empty, and dump the item represented by your selection in there.
Now you can go several ways for the display of the slots themselves on the screen, but for simplicity sake you could put a script on each of the GameObjects in the UI that represent the “slots” and have them check every fifth of a second or so if the item in that slot has changed in the inventory script since it last checked, and if it has, to update the picture being displayed there. If you did this on a manager parent of all of the slots instead of the slots individually, you could check for all of them simultaneously with one script.
This is only one way of doing things, but I hope it gives you some ideas!
what is the Equivalent of ll for a string? ll is only for bools but I need to separate the slot names in a argument like
if (gameObject.tag == “Slot1” ll “Slot2” ll “Slot3” ll “Slot4” ll “Slot5” ll “Slot6”) but I cannot do that since you cannot use ll with string names.
The “==” operator creates a bool out of a comparison, so you CAN use it with strings, but you have to do it with “==” for each one individually, like so:
if (gameObject.tag == "Slot1" || gameObject.tag == "Slot2" || gameObject.tag == "Slot3" || gameObject.tag == "Slot4" || gameObject.tag == "Slot5" || gameObject.tag == "Slot6")
Alternatively, you could put all of those strings into a list and use list.Contains(gameObject.tag) to make a bool instead, or a hundred other ways.
cool thanks for the info. Im so new at scripting…im reading a book right now on Unity c# programming.
im trying to refer to the None name when theres no source image. in the inspector you can choose "None for the source image and it will fill the source image name in with none. how would I refer to this since None is causing an unexpected symbol error when used in my code…
gameObject.tag == “Slot1” || gameObject.tag == “Slot2” || gameObject.tag == “Slot3” || gameObject.tag == “Slot4” || gameObject.tag == “Slot5” || gameObject.tag == “Slot6” & myImageToUpdate.sprite ++ “None”)
How do I “connect” these two so they are logical? I need to say if the game objects tag is equal to “Slot1” AND ITS image spirite is equal to Null, then I do my function.
I cannot figure out how to write that in c#. Im basically missing the c# code for AND THE or AND ITS to connect the two.(it took forever for me to figure out how to ask this lol)
(gameObject.tag == “Slot1” myImageToUpdate.sprite = null)
Im getting the followign error:
parsing error unexpected symbol “myImageToUpdate”’
ps Lysander~ Thank you for the array section on my other thread but for my beginner coding brain this seems to be easier for me to understand at the moment.
You use the logical AND operator, which is &&. In this case it would be:
if(gameObject.tag == "Slot1" && myImageToUpdate.sprite == null) { }
That checks both sides of the && and only returns true if both sides are true.
This eventually leads to something sort of like those “factoring” problems you used to get in algebra class. When you’re doing complex comparisons, you break it down into pieces, like say the tag is “Slot1” and the sprite is null- in the following statement && means “both sides must be true” and || means “either side must be true”, so:
if(gameObject.tag == "Slot1" && (myImageToUpdate.sprite == null || myImageSpriteToUpdate == someSprite)) { }
will turn into
if(TRUE && (FALSE || TRUE)) { }
which will turn into
if(TRUE && TRUE) { }
which will turn into
if(TRUE) { }
You can come up with some fairly complicated logic in a pretty small span of space if you use it properly. The following is an example of “if the sprite is null AND the gameObject has a tag that’s equal to any of the first three slots”:
if(myImageToUpdate.sprite == null && (gameObject.tag == "Slot1" || gameObject.tag == "Slot2" || gameObject.tag == "Slot3")) { }
It’s worth noting that the if statement will short-circuit itself at the first FALSE value that it hits, meaning it won’t bother checking the rest (a real FALSE value, not FALSE is an ongoing comparison like the slots above). So for instance, in the above example, if myImageToUpdate.sprite isn’t null, it won’t bother checking the tags. This behaviour is how we can say:
if(someGameObject != null && someGameObject.GetComponent<someComponent>() != null) { }
which checks if the someGameObject is not null first and THEN checks if it has a component only in the case that it’s not null. Normally if we check for a component and the object is null, it’ll throw an error, but this way works because if it’s null it won’t even get to the component check.
Sorry, I know this is an info-dump and a lot to take in. Hope it helps though.
Thank you so much for the really good write up. makes alot more sense now. The data dump was good lol. Its allowing me to mess around with this code to try and get it to work. Probly the most useful info ive read on if statements and && yet. I have created three scripts for three different buttons with slightly different code using all the info you just gave me to figure out which script will do what I want it to do and see how the other scripts affect each others button on click functions.
So far Button1 changes the image of all 6 slots on button click. then if I click the 2nd button it changes nothing, same with third. If stop the game and click play again and click button 2 first it only changes slot 1, clicking button 1 next, changes all of the rest of the slots besides slot one which I understand why it does this and does not change the others this part of the code makes sense, clicking button 3 does nothing. im trying tons of different code arrangements in my if statements to figure out why if I start the game and click button 1 it changes all slots but clicking button 2 changes nothing if button 1 is clicked first upon game launch. Been working at it for the past 8 hours. If i cannot figure it out in another couple hours ill post my code. Im soo close to getting this to work perfect, i can feel it lol.
I finally got it working! I had my else if statements separated for HOURS. like
else
{
if{}
else
{
if{}
This TOTALLY screwed up my logic. I tried a hundred different ways to write this code before I realized how it was layed out. This just highlighted the importance of clean looking code for me.
I actually had to go into the settings for VS and force it to newline for all braces, conditional statements, etc (at least, when any part of the block is spread to a second line). I think there’s only two states that code should be allowed to exist in- completely spread out and exposed, or in a single compact line. Anything in the middle is just messy.
I cannot figure out why this code is not working. I click button one and it switches the image for slot one. I click button 2 and it does nothing. Im not sure why the code below will not change slot 2s image when button 2 is clicked.
if(gameObject.tag == "Slot1" && myImageToUpdate.sprite == null)
{
myImageToUpdate.sprite = spriteToChangeTo;
}
else if(gameObject.tag == "Slot2" && (gameObject.tag == "Slot1" && myImageToUpdate.sprite != null))
{
myImageToUpdate.sprite = spriteToChangeTo;
}
im not getting any errors, but im not sure why nothing is happening. to my knowledge since slot 1 has a source image after button one is clicked then button 2 should change slot 2 to spriteToChangeTo(source image) of button 2
I think im about to just create 26 “slots”(UI Images) and assign each button to its own UI image and have all UI images or “slots” turned off from the beginning and then after player clicks first 6 buttons it will jump to screen 2 and display the 6 “slots”…
The “else if” statement is simultaneously requiring that the tag be “Slot1” and “Slot2”. If you want to make it so that it can be “Slot2 OR (Slot1 and a sprite image)”, then you need to replace the first && (AND) in the statement with || (OR).
OO good info. Im trying to say if the game object is slot 2 then check if slot 1 is already filled with a source image, The script basically checks each slot to see if there is a source image. so for slot three I would say. for slot 3, if the if slot 1 and slot 2 source image = null then apply source image to slot 3 ect. its basically checking the other slots so it dose not apply a “sword” in all the slots at once.
All my weapons have there own script which are all the same, each weapon script is attached to the UI image… on button press for “sword” it targets slots 1-6 and dose a image change function on all slots and im trying to get the code to say if slot one is empty then fill in just slot one and do nothing to the other slots, if slot 2 is empty and slot one is full then fill slot 2 with image, if slot 3 is empty and slot 1 and 2 source image is not null then fill slot 3 ect.