A property for flipping GUI images

Okay, so what this request is about is a property that “flips” an image.
This is pretty much only for aesthetic purposes.
Example:

Dog Flip.jpg

I think a boolean would be good enough for this.

My primary example use case would be a “dueling” GUI, with characters being on the left/right side and the character(s) on the right side having the image flipping property set to true.

Some questions I imagine you asking:

  • Couldn’t you just upload the image pre-flipped?
    For user-created assets, yes. Where this property would especially come in handy is for site images such as the character thumbnail. Currently all of these assets are very left-centric, and developers have to design the rest of the interface with this in mind. I imagine adding a property to flip images is better than creating new web APIs just for image orientation purposes.

  • What if you want the image to be flipped vertically?
    Set the suggested property to true and set the rotation to 180
    OR
    Implement the property as an enum with 3 values: “Normal”, Horizontal", and “Vertical” flip.

Thoughts? :hidere:

21 Likes

You can already do this with ImageRectOffset and ImageRectSize. Examples of horizontal/vertical flipping of first cool image I could find in catalog: (420x420 pixels original)

84 Likes

That’s interesting behavior, I would never expect ImageRectSize to work with negative values.
At the very least, this information should be added to the wiki. I do believe a property would simplify the process though; especially if you want to use an image sheet at the same time as flipping an image.

3 Likes

I think what we have right now with ImageRectOffset and ImageRectSize is very powerful and does not require any abstraction such as the property that you suggest. It is also possible to use this method for part of a spritesheet as well, not just the entire image, so I’m not sure what you mean with “simplify”.

If you have a spritesheet with an image between (10,20) and (60,70) (with size (50,50)) and you want it horizontally flipped, then you simply do ImageRectOffset = 60, 20 and ImageRectSize = -50, 50. If you want it vertically flipped, it’s ImageRectOffset = 10, 70 and ImageRectSize = 50, -50. If you want it flipped in both directions, it’s ImageRectOffset = 60, 70 and ImageRectSize = -50, -50.

5 Likes

These properties are very powerful indeed, no arguing on that point.
But with a powerful toolset comes some confusion, especially if there is no info on it.
By “simplify”, what I mean is this: Having a negative size for anything just doesn’t make much sense.

I posted the very same suggestion on the regular ROBLOX forums months ago, getting several pages of replies, and not a single person knew that you could flip the image using ImageRectSize. I also messaged a few developers who I knew were pretty good with GUIs and images, getting the same answers. So as stated above, there should at least be more information on the wiki about these properties. A property is way less useful to me now that I know you can already do it, but would still provide clarity to the end user.

9 Likes

Is there a way to do this while using ScaleType Slice?

3 Likes