UMG: Image Swapping

Currently I am having an issue setting up an image(slate) and making it swap out textures. What I want to do is have my background image change colors. according to the status of the skill I am currently using. Currently the only thing I have seen that even resembles what I want is the buttonstyle options but again this is not a button it is just an image.

The question is, how do I change the material on the image by simply activating a skill?

You can bind the Image property of the Widget to a property or function.

So let’s say in theory, you create two brushes, one called BrushA and BrushB.

You create an Image Widget. Then you bind its Image property to a Blueprint func called GetImage.

GetImage’s Function Body looks like this:

  • GetPlayerController
  • Cast to MyPlayerController
  • If State == A, Return BrushA
  • If State == B, Return BrushB

Now with some pictures.

Create a Slate brush, one per state. In this case I have two slate brushes, one for “State One” and the other for “State Two”

Then we create our widget, note the binding on the right hand side for the Image Widget. Click it and select Create Binding

Now for the Get Image function…

We create a local variable called SlateBrush of type SlateBrushAsset inside the Get Image function.

We first grab the PC and cast it to Our PC

Next we get the PC’s state variable, and see if it’s equivalent to some value.

We then set the local SlateBrush variable to be the appropriate brush. Select the brush for the appropriate slate from the drop down. Then we return it.

I am sure you could not have laid this out more perfectly for me but is the any chance you can show me an example screenshot?

Updated. Please refer to the images.

Cheers.

I really appreciate the work you have put forward with this but sadly what you had up was essentially what I already had. I did a bit more digging and it seems my issue is coming from casting from mycharacter to myhud. Any variable I try to put in myhud from mycharacter an example being the boolean I need to pull it all together gives me an access none error. The error while the boolean is selected under defaults is failed to find variable properties.
Not that this seems to matter because at the time of this message switching back to the designer mode crashed the program and seems to have broke the blueprint entirely

Hello Amkzul,

I may have a solution for you. Have you tried making multiple images and changing the Zorder? Here is an example:

All I did was set it up so that the tab in this case will fire off the custom event “ChangeZ”. It is casting from my character blueprint to my widget blueprint.

Here you will need to have to have two images of the exact same size and in the exact same spot in your designer graph. All this widget blueprint does is determine which image is on top. This will effectively hide the bottom image making it look like the image is changing. Just think of it as stacking them into a pile.

This of course is a very simple example but I hope it helps.

Make it a great day

Any idea how to do this now in 4.7/4.8? I can now no longer bind the “image” property, it’s replaced by a “brush” property you can bind. Attempting to bind this will not allow me to dynamically change the image on the brush. The make brush node seems to ignore all variable properties given to it.
my problem

Hello Anapsys,

You could create an image variable and use a “Make Slate Brush” Node in your binding and then make the image variable public. This will allow you to change that image variable from anywhere. This will in turn swap out the current image that is applied. I have made a simple example below. I hope that this helps.

Example (This example was done in 4.8):

Here you can see that I used a “Make Slate Brush” node. to do this you will drag off of the dark blue return pin and type “Make Slate Brush”. From there I simply dragged off the image pin and promoted to variable.

In this example I am swapping out the images with a button click and a flipflop node. This will toggle between the two images every time the button is clicked.

45247-imagebindinghelp2.png

Make it a great day

I’ve solved my button-image swapping issue using the Widget Style Struct and Making the Button Style Struct from it (maybe you can as well lol). It took some trial and error but the condition for the swap can be called based on an event dispatcher (which you may or may not need for your particular project.) I’m using UE4.9

Hope this helps

1 Like