Scaled size of engine:Image (and Icon Image) not respected

Unity Engine
, , ,
1

Hi there,

I’ve marked this as a bug, but it’s possible I’m just doing something wrong (and I hope that’s the case so that this will have a fix).

What I’m trying to achieve is a row of buttons, each one having just an image on it and no additional space around the image. The container for the row of buttons is a % height of the screen size.

I’ve tried both adding the image through the ‘Icon Image’ property in the builder and through using a <engine:Image /> element with a --unity-image and --unity-image-size properties (although in future the actual buttons in the row will be dynamically added with a relevant image each).

What’s actually happening is that each of these buttons are being displayed at a smaller size than the original/source size of the image, but they have the width of the image’s original/source size. For example, if I use a 250 x 250px image, but the button is displaying at a height of, say, 100px then the button won’t be 100 x 100px as expected. Instead it renders at 250 x 100px.

This is what it produces:

image
image1045×442 2.16 KB

The yellow/orange area is the row, the grey are the buttons and the white square is the image.
What I want is the button not to have additional sizing around the image.

Here is my UXML:

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/UI/style/HUDs/UnitActions.uss?fileID=7433441132597879392&amp;guid=5ad8fddde88b90149bbe34329ce990bd&amp;type=3#UnitActions" />
    <engine:VisualElement name="HUDContainer" class="location-bottom full-width action-bar" style="background-color: rgba(207, 168, 79, 0.75);">
        <engine:Button name="ActionButton" class="action-button">
            <engine:Image class="action-image" style="--unity-image-size: scale-to-fit; --unity-image: url(&quot;project://database/Assets/Textures/Grid.png?fileID=2800000&amp;guid=ab269c538609ee34d8bd8e2ff5168c86&amp;type=3#Grid&quot;);" />
        </engine:Button>
        <engine:Button name="ActionButton" class="action-button">
            <engine:Image class="action-image" style="--unity-image-size: scale-to-fit; --unity-image: url(&quot;project://database/Assets/Textures/Grid.png?fileID=2800000&amp;guid=ab269c538609ee34d8bd8e2ff5168c86&amp;type=3#Grid&quot;);" />
        </engine:Button>
    </engine:VisualElement>
</engine:UXML>

And here is my USS:

.location-bottom {
	bottom: 0;
	left: auto;
	right: auto;
	position: absolute;
	flex-direction: row;
}

.action-bar {
	height: 12.5%;
	padding: 1%;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-self: center;
	align-content: center;
}

.action-button {
	width: auto;
	height: auto;
	align-items: center;
	justify-content: center;
	flex-shrink: 1;
	flex-grow: 0;
	flex-basis: auto;
	margin: 0;
	padding: 0;
}

.action-image {
	width: auto;
	height: 100%;
}

Is this a bug or am I missing something here to achieve this?

EDIT: I should also mention that I want the size of the row (and buttons) to be screen size dependent, so I don’t want to set a px value for sizing.

Thanks

Cush