Correct way to sustain Origin behaviour while having transformations applied from a different axis

[approachcircle]

I have a new button class FlashingButton which overrides the default button class for my project BlackjackButton so that it can display a Box which scales and fades out behind it to achieve a basic flashing effect. I would like the flashing button to be anchored at the bottom right of the parent container, which is just the main menu Screen in this case, but setting the Origin property to be the bottom right will have the transformations applied from its bottom right predictably, which in my case looks kinda weird. The fix I thought of would be to set the Origin property to the center so that the transformations apply correctly like so, and then offset the button's X and Y positions using half its width and height respectively to negate the effects of the origin being centered instead of the same as its BottomRight anchor using the following code:

rematchButton.OnLoadComplete += d => { d.X -= d.Width / 2; d.Y -= d.Height / 2; };

(unsure if it needs to be bound to OnLoadComplete, but it felt like the safest bet to ensure I don't use a width which is incorrect or null due to the drawable not being loaded fully.)

This works obviously, but it feels kinda weird and janky to me, so is there a better way to accomplish this? Any advice would be appreciated, and let me know if I need to attach .cs files or anything.

[smoogipoo]

Code for reference: https://github.com/approachcircle/Blackjack/blob/511fdd33c827d438528ce0f24073a59f81131659/Blackjack/Blackjack.Game/FlashingButton.cs

As far as I can gather, the issue is related to autosize. When the flashing box comes visible, it starts contributing to the autosize layout of the button causing it to become bigger as a whole.

The best guidance I have to fix this is to prefer RelativeSizeAxes when possible and move the masking to an inner layer, as so:

public partial class BlackjackButton : ClickableContainer
     private void load()
     {
         disabledColour = Colour4.DarkGray.Darken(1);
-        Masking = true;
-        CornerRadius = 5;
-        AutoSizeAxes = Axes.Both;
-        InternalChildren =
-        [
-            new Box
-            {
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                Size = ButtonSize,
-                Colour = BackgroundColour
-            },
-            new SpriteText
-            {
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                Text = Text,
-                Font = FontUsage.Default.With(size: 20),
-            }
-        ];
+        Size = ButtonSize;
+        InternalChild = new Container
+        {
+            RelativeSizeAxes = Axes.Both,
+            Masking = true,
+            CornerRadius = 5,
+            Children =
+            [
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = BackgroundColour
+                },
+                new SpriteText
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Text = Text,
+                    Font = FontUsage.Default.With(size: 20),
+                }
+            ]
+        };
         Enabled.BindValueChanged(e =>
         {
             Colour = e.NewValue ? Colour4.White : disabledColour;

As for FlashingButton, you'll need to apply Masking and CornerRadius there too, as well as you can use RelativeSizeAxes = Axes.Both instead of specifying Size if you wish.

It's not required, but you could also remove ButtonSize altogether and use Size directly, setting the default value in the constructor.

[approachcircle]

Thanks a lot! This did fix the issue, but it makes me think that there are probably certain side-effects/intended behaviours which I do not know about regarding RelativeSizeAxes. Are there any other effects to a Drawable that it causes aside from just allowing you to set the Size property using values from 0 to 1 to describe how much space it takes up relative to the parent's size?

I've read through the wiki page about the coordinate and layout system a few times but maybe there are some things I don't understand yet still.

[smoogipoo]

I can't really think of any side effects off the top of my head apart from implementation quirks - if you try to use it on Sprite you might have to do something like:

new Sprite
{
    RelativeSizeAxes = Axes.Both,
    Size = Vector2.One
}

But that's more an issue with o!f than a side effect. In fact I can think of more side effects with auto size so I would always recommend inverting the hierarchy to use relative size if possible.

[approachcircle]

Ah okay, in future i'll try and use relative size over auto size.

One more question is where did you suggest I set masking and corner radius to for the flashing button? Setting Masking to true and CornerRadius to 5 in FlashingButton.load() causes the flashing box to not appear, and the same effect goes for doing the same thing in BlackjackButton.load().

[smoogipoo]

Create a new container wrapping it with the masking properties like in my example. Masking will prevent rendering outside the container, which is why you can't set it on the button itself.

[approachcircle]

Got it, thanks.