in XML UI button

[avnish.Gupta]

I am trying to attach a texture to my button but the button is taking the size of the texture and after applyng width and hieght , its not working correctly. I have attached the sample code for the reference. Please help as soon as possible , I am new to the unigine and this xml thing.
 

 <vbox align="overlap" width="400" height="44" pos_y="388">

                        <button name="HostButton" align ="overlap"  width="400" height="44" texture="UI/WhiteTexture.png" color="#F4B60D" background="1"  >

                            <text size="18" color="#000000">Host</text>

                        </button>

                    </vbox>

 

Edited June 3 by avnish.Gupta
private information shared in the ss bymistake

[arizmenda]

Hi!

Quick question - why are you adding a white texture to the button? If you just want to change the button's background color, you can do that directly with the color attribute without any texture:

<button name="HostButton" align="overlap" width="400" height="44" background="1" color="#F4B60D" pos_y="388">
    <text size="18" color="#000000">Host</text>
</button>

If that doesn't help, could you describe what exactly you were trying to achieve with the texture?

Thanks!

[avnish.Gupta]

If i want the button to be of specific image , right now its not the custom shape and all, In that case how i can do that?
Suppose i want this button . How i can attach that texture or any custom button

 

[avnish.Gupta]

<hbox  align="overlap" height="44" width="400" pos_y="30">

                            <editline name="ScenarioEdit" align="overlap"  width="344" height="44" />

                            <button  texture="UI/RPA/GimbalControlRightArrow.png" align ="overlap" pos_x="356" width="44" height="44"/>

                        </hbox>

this code is for the 


the image Button image is not coming proper and also the code you send

gives the below output  the test is not visible and one dark layer is coming . I will be attaching the complete .ui file. Please help me understand the tags more if i did something wrong in that.

<vbox align="overlap" width="400" height="44" pos_y="388" color="#F4B60D" background="1">

                        <button name="HostButton" align="overlap" width="400" height="44" background="1" color="#F4B60D" pos_y="388">

                            <text size="18" color="#000000">Host</text>

                        </button>

                    </vbox>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MainMenu.ui

[arizmenda]

Hey! We put together a sample project for you.

How to set it up:

- create an empty project
- arrow.png and button_texture_example.ui → put into data/
- AppWorldLogic files → put into source/

The sample contains 4 buttons:

1) borderless - button without the default engine border, text is optional. Done via <button> with background=0
2) bordered - same as above but with the engine border visible (background=1 by default)
3) resized - a textured button that can be resized. Done via a sprite with a transparent button on top
4) colored - same as resized, but with a color tint applied to the sprite via the color parameter

Important thing to know: when you set a texture directly on <button> via the texture= parameter, it cannot be resized - it always renders at full resolution like an icon. So if you want a resizable textured button, you need to use a sprite (which supports resizing) and place an invisible button on top of it.

Hope that helps!

 

button_texture_example.zip

[avnish.Gupta]

How should one go about supporting multiple screen sizes/resolutions ? In the post I have attached a ui file where the dimensions and positions are fixed and if the screen size and/or resolution changes, they won't scale on their own. Is there a way to do this in the XML file where they auto scale and reposition as per the screen dimensions ?

[arizmenda]

Unfortunately there's no simple out-of-the-box solution for this in Unigine's XML UI.

There are two approaches:

1. vbox/hbox with align="expand" - this can handle some auto-scaling, but honestly it can get quite tricky to configure and doesn't always behave as expected in complex layouts.
2. The approach we use ourselves - handle resizing dynamically in code (AppWorldLogic), where you read the current screen resolution and set widget positions/sizes manually at runtime.

The second approach gives you full control and is much more predictable.