Button Size is Way Bigger Than the Image

[30quickdead (30quıckdead)]

My button images are way smaller than the button box like this

this causes a lot of issues, can i reduce the size of the box and keep the size of the image?

[VisAgilis]

Isn’t that a canvas? You can adjust it’s scale by clicking on it, navigating to the details window on the right side once the canvas is selected, expand the Render Transform section, then expand the Transform section under it, and there you’ll see the Scale section. You can go ahead and expand it as well and play with it’s exposed X & Y values to your liking

[30quickdead (30quıckdead)]

thats not canvas, i want the size of the button be equal to the red box i made as size of my image. But if i reduce the size of button the image size also gets reduced. What i want is keep the size of image and only reduce the button. Is it makeable?

[30quickdead (30quıckdead)]

also i can do it by deleting all the space in here

and this would work but if i do it this way i cant align the buttons to the background. If i do it with this much space it auto aligns itself.

[VisAgilis]

You can actually assign buttons images as well, and it will fit in perfectly! However if you chose to have your image as a seperate image component, and put it under the button component in the hierarchy, you can first increase the size of your image, then shrink the button. Hope this helps!

[30quickdead (30quıckdead)]

@VisAgilis

You can actually assign buttons images as well, and it will fit in perfectly!

its already like this

[30quickdead (30quıckdead)]

@VisAgilis

However if you chose to have your image as a seperate image component, and put it under the button component in the hierarchy, you can first increase the size of your image, then shrink the button. Hope this helps!

it seems what i want to achieve is not possible, i will probably do it this way.

[VisAgilis]

Interesting Don’t you get this outcome?

Maybe it’s due to the resolution. Try upscaling your image.

[30quickdead (30quıckdead)]

Yep i get this outcome from the beginning, what i want is do not getting it. Because my image has a lot blank space on it, images res is 140 108 the important part is only 14 14 because of that the remaining part is bugging the button which you can press it even if your mouse is not on the important part. What i want is keep the image size dont change because its perfectly aligned rn but reduce the part that you can press. like this

i want the red part not be clickable

[VisAgilis]

…

First of all… why??

Anyways, you can try using the image component and placing it to your liking, seperate from the button. But I would recommend editing it outside the editor accordingly and reimporting it.

[30quickdead (30quıckdead)]

@VisAgilis

But I would recommend editing it outside the editor accordingly and reimporting it.

i was doing that at the beginning but i cant put the buttons where i want at true size and exact location

when i also make the button at size of the background i dont need to do any alignment or anything just the exact size and it works.

[VisAgilis]

@30quickdead

i was doing that at the beginning but i cant put the buttons where i want at true size and exact location

I don’t think I understand. When you have your images full size with no gaps, they should fit in buttons exactly like I’ve shown in my video. Not being able to exactly align them should have been an issue on the alternate approach which was having the image and the actual button as seperate components.

[30quickdead (30quıckdead)]

@VisAgilis

When you have your images full size with no gaps, they should fit in buttons exactly like I’ve shown in my video.

thats true

@VisAgilis

the image and the actual button as seperate components.

it wont be problem if i do it this way but the hover and pressed effects would be hard to make, i need to deal with them in the blueprint now

[VisAgilis]

@30quickdead

thats true

Okay… and?.. What’s the problem then

[30quickdead (30quıckdead)]

SO the background image size is 140 108, this is the size of my ui i just scale it up a bit to a size that you can see it in game. All of the other buttons size are also 140 108, but only a little part of them are important rest is just blank. Like this

the canvas is 140 108 but the button is only 14 14, the reason its this way is i already aligned them in the app using pixels and i no longer need to align them in the unreal engine.

@VisAgilis

Okay… and?.. What’s the problem then

The problem is this

[VisAgilis]

I get it, why don’t you simply edit it to be the correct size? If you’re struggling to make it aligned correctly to the edges, then it’s about your unfamiliarity with the editor you use to create them. But once you got an image that is the correct size, you will be able to assign it on a button and it will work as you desire.

Though if you’re saying that you already got an image that has no gaps in between the edges, then the fix would be the my initial reply right here:

@VisAgilis

You can adjust it’s scale by clicking on it, navigating to the details window on the right side once the canvas is selected, expand the Render Transform section, then expand the Transform section under it, and there you’ll see the Scale section. You can go ahead and expand it as well and play with it’s exposed X & Y values to your liking

[30quickdead (30quıckdead)]

is there a any way to fix these kinda gaps?

[VisAgilis]

Here’s a topic on this matter:

Buttons can only be rectangular?

You could create a custom button with a User Widget and check its alpha. [CustomShapeButton] Follow these steps: Create User Widget (WBP_CustomShapeButton) and add Image: [image] Add variables and Event Dispatchers like here: [image] ButtonImage - Texture2D Normal, Hovered, Pressed - SlateBrush (Instance Editable) ButtonRenderTarget - CanvasRenderTarget2D IsMouseOver - Bool Create Material that you draw to Render Target later: [image] Add Pre-Construct Event to Event Grap…

[30quickdead (30quıckdead)]

thats not what i meant

i cant make it like this

[VisAgilis]

Yes I already got what you meant. You want to make the corners slightly dent rather than having your button as a square, right? That post explains how. I edited my previous post since I accidentally shared the link for the topic. Now it directly sends you to the solution.

If that’s not what you want, please explain your objective more clearly.