How to set two buttons side by side with widget, make clickable

Hi

I have the hardest time with widgets, and am trying something that should be simple.

All I want is two buttons on a wall, one is ‘play’ a sound and one is ‘stop’ a sound.

So I made a widget blueprint, added 2 buttons and set their styles to be two separate images (triangle ‘play’ and square ‘stop’) that I imported as png’s from Adobe Illustrator.

then I created an actor, and I added a widget component to the actor — FIRST ISSUE: I can’t get the viewport of the Actor to show the widget buttons correctly - I fuss with the anchor and canvas and I don’t understand why they don’t just show up side by side.

Second issue: In my widget blueprint I made ‘onclick’ events for the triangle and the square (button 0 and button 1) but when I test it there’s no workable click event!

How do I get my actor to understand that it’s widget component has button logic?

Thank you!

  • the widget:

  • the actor:

  • the end result:

Image from Gyazo

Hi @everynone, thank you – I still have an issue with the square “stop button” showing up in its full size.

Please see the attached image. At the top right of my main window I matched your width and height settings (256 x 128)…

In the details panel I tried to enter higher numbers for the image size but it still didn’t change the square. As you can see, the stop button here isn’t showing up as a square, it’s actually a rectangle… Looks the same in the Actor viewport also.

Thanks

Also - where do I type the logic for playing a sound? In the widget blueprint? I imagine somehow that gets read as the ‘custom event’ yes?

Currently I’m dragging off from the cast node and getting the blue line to ‘target / button_play’ but it’s not allowing me to connect that to the target of ‘bind event to on clicked’. It says “button obj reference is not compatible with actor object reference”

The images show up correctly, they’re simply not created correctly. Note how tucked away they are in the bottom right corner (it seems you made them rectangles, even the resolution is not cubic):

348167-screenshot-1.png

  • this is OK:

348170-ok.png

  • this is not:

348171-notok.png

Also, for best result, ensure you use the power of 2 for size.

997x795 is not a good resolution for a button. 1024, 768 or 512x512 is better but perhaps the button images can be much smaller. Think of the maximum size it will ever be and do not exceed that. 256x256 pixel on a 4k screen is already somewhat chunky.


Also - where do I type the logic for
playing a sound?

That’s up to you. You asked:

How do I get my actor to understand
that it’s widget component has button
logic?

I’ve assumed you want to execute the logic in the actor. That’s what the example demonstrates. You can play the sound in the widget instead.


it’s not allowing me to connect that
to the target of ‘bind event to on
clicked’

Try it like this:

Image from Gyazo

2 Likes

Ahh it all works! Thank you!

Oh!! One more question

How do I add more space between the two buttons? I don’t like them being right next to each other. I tried an x transform on the stop button to move it further right, but couldn’t figure out how to make the rectangle also extend with it.

1 Like

Many, many ways. The easiest one would be the spacer widget.


But you can add padding to each element from one side only instead:

And vice versa - for the element on the right, the padding would be Left.