How to make a Nifty-Button invisible but keep its function

Troubleshooting gui
1

Hello together,
I have created a Picture with 3 buttons like a circle. Now I want to make the three “circle-buttons” to replace three original buttons. I thought, I can solve this in that way, that I insert three “real” buttons and set their position at the three from the picture.

So my question: Is there a way to make a button invisible and kepp his function? I mean, at the end there should be a invisible button and when I click on it’s Position the “interact”-tag will be executed normally.

Thanks for help and sorry because of my english :blush:

2

I were you, I would just save each “button” separately. Load them up as an image with an interact -tag. I’d say that is the easiest. I’m not sure what you need the buttons for especially?

1 Like
3

Hey, tonihele!
Yeah, this was my idea, too. I only thought there is an easier way to do this. Anyway, I solved the problem myself. I used a square-alpha-picture and overlay (I hope this is the right expression … ohje … my english^^) this at the buttons of the picture. And as you said, I added an <interact .../> -tag.

Here a small piece of the xml-code ( I now, nothing Special :smile: )

 <panel id="button_start_panel" align="center" childLayout="center" height="28%" width="50%">
        <image filename="Interface/Menu/alpha.png" height="50%" width="50%">
            <interact onClick="startGame(hud)"/>
        </image>
    </panel>

Okay thanks for your help again !!!

4

You can also use onHover Effects and call a onCustom Effect when you click it if you want to make it look more interactive.

You can see a list of available effects here:

Also refer to the pdf manual as this area is sparsely documented.

Here is an example for different effetcs’ syntax (inside your control / image tag, next to the interact)

<effect>
    <onActive name="border" post="true" color="#555f" border="2px"/>
    <onHover name="pulsate" scaleFactor="0.008" endColor="#fff5" overlay="true" post="true"/>
    <onHover name="border" post="true" color="999f" border="2px"/>
</effect>

The onhover border is a simple one to test :smile: