How would I make this background scroll?

[ScrollFrameRotation (BannedFromTheDevFrm)]

Hello Devforum! My game has a lot of scrolling backgrounds, and I want to apply one to this UI for consistency. The problem is that the background isn’t a frame, but an image.

Here’s the UI. The doodle background in the speech bubble is what I want to scroll:

Here’s my scrolling background:

So my question is, how do I make the doodles in the first UI’s speech bubble scroll like the second UI (which is a frame), while the first UI uses an ImageLabel?

[EffBeeCee]

Maybe CanvasGroups?

https://create.roblox.com/docs/reference/engine/classes/CanvasGroup

I think they have better (more performance costly) descendant clipping than regular GUI objects.

Then you can add some https://create.roblox.com/docs/reference/engine/classes/ScrollingFrame#Rotation and it will clip correctly! Ok, apparently this doesn’t correctly link to ScrollingFrame.Rotation but that’s the point of the joke.

[ScrollFrameRotation (BannedFromTheDevFrm)]

so how would i set up my hierarchy for it with a canvasgroup?

[EffBeeCee]

I’m not actually sure if this works with CanvasGroups after doing a bit of checking. I’ll let @Reditect make a solution.

---

Don’t know why I’m still trying to find a solution but you could spend a really long time making it work by manually editing the pixels of an Editable Image which I have a feeling you don’t want to do.

[Reditect]

I’d say separating the border and the thing you want to move if it’s not like that already.

I think the code you have for the scrolling effect would work the same generally. This though might be changing the UDim, if you can find a way to “mask.” Maybe Clip Descendants.

Oh, or maybe a ViewportFrame? I can’t remember if it would work, but putting a Texture and moving the offset with the viewport camera looking at the part with the texture on it.

[trigophi]

Adding on to what is said above, you can try the ViewportFrame Masking + EditableImage approach here:

@6mikael6

Images As Masks (Supports EditableImages)

---

Since a SurfaceAppearance parented to a 0 alpha mesh inherits the mesh’s masking ability, it can be used to create custom masks with images. For this method to work AlphaMode of SurfaceAppearance has to be on Transparency.

The opaque parts of the image won’t render the things behind them while the transparent parts do. A limitation though with using SurfaceAppearance is that they only support 5 or 2 levels of transparency which can create ugly transparency banding.

EditableImages can also be used as masks when you parent one under a 0 alpha mesh’s SurfaceAppearance. This way masks can be painted, animated etc.

I think what @Reditect mentioned with scrolling a Texture under a mask created by the Image and a 0 alpha mesh would work. Separate and place your image’s border so it is in a higher Z-index than the VPF that you create–Reditect also mentioned this.

[ScrollFrameRotation (BannedFromTheDevFrm)]

goodness GRACIOUS why does this have to be so complicated

[6mikael6]

Sorry for replying a little late here.
The masking method is pretty hard to understand at first but it can be used for way more complex masking than what ClipDescendants and CanvasGroups can achieve albeit without support for UIs directly.

Anyways, I made a more simple UI element for creating masked scrolling images:

---

UI element structure:
MaskImage.ColorMap is the mask image, Updater contains the modifiable attributes

Mask image used:
The transparent parts of the mask show the scrolling image while the opaque one’s carve it out

rbxm file: MaskedScrollingImage1.rbxm (9.1 KB)