Inserting Sprite Elements That Use Rotation Transform in UI Component

[Magnitus-]

I'm having a situation where I have a map inside a menu and I want to do 2D transform processing on various sprites and place them on the map, but I'd like to keep the convenience of the ui components around the map.

After trying the naive approach of assuming I can just place sprites with transforms as children of a ui element and expecting that they'd behave somewhat like ui elements with the absolute positioning (ie, mostly ignored by the layout strategy), I got this warning and definitely not what I was expecting in terms of placement on the map: "Unstyled child in a UI entity hierarchy. You are using an entity without UI components as a child of an entity with UI components, results may be unexpected."

So as I've come to understand it, there is a paradigm shift there and while style elements do transforms under the hood (if I understand correctly what the doc said), these are not compatible with custom user managed tranforms on non-ui components.

I assume that leaves me with the option of doing some placement arithmetic where I play with z indices a little and place the map with no ui components on top of the ui menu with no parent/child relationship between them (that or I reimplement the behavior of all ui components using non-ui components, but to my sensibilities that feels a bit like reinventing the wheel, especially as someone who is familiar with web development).

But before I do that, I feel like I should ask: Is there any kind of component strategy in bevy for a ui element to behave like a ui element on the outside, relative to its parent and siblings, and as a lower level element on the inside where you can have more fine grained control over the tranforms of its children (kind like an html5 canvas I guess)?

Apologies if my question seem a bit naive to bevy aficionados, I'm learning quite a bit, but many parts of the engine are still very unfamiliar to me.

[Magnitus-]

Actually, I see in this example that the transform was updated with the presence of a style component for an ui element to achieve rotation: https://bevyengine.org/examples/ui-user-interface/overflow-debug/

The documentation for nodebundle indicated that the transform component was automatically managed by bevy based on style, but maybe it isn't a hard rule and it is ok to overwrite it. I'll have to experiment with that.

The other component I added to spritebundle was a tiled imagescalemode component to achieve repetition of some images along an axis, but I think I may be able to use that component with an imagebundle as well which has a style component too.

So it feels not quite right, from a design perspective (it feels like ui elements should be those higher level primitives for menus), but perhaps (I will have to experiment) I can actually render all the processed art of the map using ui components and circumvent the ui/non-ui hierarchy incompatibility problem I had that way, this time (although it feels like I'll eventually hit a wall with this).

[Magnitus-]

Ok, my poc was successful using a ImageBundle instead of a Sprite and rotating it in another ui component by setting the rotation parameter in its Transform component. Also, adding a ImageScaleMode::Tiled component instance worked well with it as advertised in the documentation.

I guess the gotcha in the documentation concerning the fact that the transform is computed by bevy only applies for the translation because that is updated by bevy from the Style component, but using the other 2 transform properties is ok.

Still unsure if I'm over-using UI components beyond their intended purpose, but right now I'm unblocked so I guess I'll boldly go with it and if I hit a wall later on with a future need, I'll go back to the drawing board with this.

[Magnitus-]

An interesting quirk that I'll note here (not sure the underlying reason why) with ImageScaleMode::Tiled is that if you scale the image by playing with the Imagebundle's width/height properties in its Style component, you'll get weird tiny spaces between the repetitions.

However, if instead, you set the Style's width/height properties to be the exact dimensions of the tiled image and instead use the Transform's scale property to size the element to the desired dimension, then you'll get the desired result of a smooth tiling with no space between the tiles.

[Magnitus-]

Ok, another quirk that I didn't notice in my poc:

Using the Style's placement, the original picture would be placed as expected, but once you apply the scaling transform, it will scale in all directions irrespective of the style's directive. So you need to do some calculations to offset that.

So, for example, if your style has a left value of X_LEFT, that the image width is IMG_WIDTH and that the scaled width is SCALED_WIDTH, then the adjusted left value should be: X_LEFT + SCALED_WIDTH x 0.5 - IMG_WIDTH x 0.5 . And that will give you a scaled image that respects the style's left directive.

Starting to feel a little hacky and I'm wondering if it will break in a future version of bevy, but anyhow, that's that.

Edit: Ah, and the rotation is also applied at the center of the scaled image of course so you need to do some calculations to account for that as well to respect your style's positioning.

[Magnitus-]

Actually, after I added a little arrow debug symbol in my image, it turns out the tiling doesn't work when applying a scale transform with a ImageBundle. It was stretching, but the image is just simple enough that the stretching looked good.

Also, the style positioning + rotation transform was really hard to reason about. It could be because of a lack of understanding from my part on bevy transforms, but I got the impression there was something weird happening there.

I think I'll switch strategy and stop trying to use transforms with styles for now and just implement my own basic pseudo canvas, where I play with the z indices and positioning to place non-ui sprites on top of a ui menu.

[Magnitus-]

If anybody else with a similar issue stumbles upon this post, the zindex strategy didn't work, but this did the trick: #14816 (comment)