[Model] Gif UI Element

MightyDantheman · October 14, 2021, 8:05am

This is by no means new and perhaps somebody has made a public method before, but I decided to make my own today. It was originally just for a friend to use, but I might as well make it public.

With that out of the way, let me introduce my new Gif Element:

Gif v1 (Old)

Gif Attributes(UpResNet10)(noise_scale)(Level2)(x2.000000)

Here’s the description as I’ve put it:

A “new” UI element used to for “gifs” instead of plain images.

No need to touch any code as all you’ll need is accessible via the ‘attributes’ section of its properties.

Instructions

1. Convert your gif (or video) into a sprite sheet with 0 spacing between sprites.

2. Upload your sprite sheet as a decal.

3. Copy the asset ID (different from the decal ID) and paste it into the ‘Image’ attribute.

4. Fill out the rest of the attributes with the required sprite sheet information.

The required attributes are the following:
Frames: Number of individual sprites on the sprite sheet.
Grid: The size of the sprite sheet grid (X,Y). (Number of sprites)
Size: The pixel size of the original gif (X,Y).

How to Use

AspectRatio: Toggles correct aspect ratio.
Playing: Toggles if the gif is playing (pause/resume).
Play: Triggers Play() function. (Begins playing gif from start)
Stop: Triggers Stop() function. (Stops playing gif and returns to start)
Speed: Controls the speed at which the gif plays. (Decimal: Minimum 0, maximum 1)
Looped: Toggles whether or not the gif will repeat after completion.

I’ve personally been using EzGif, but any tool will work as long as the sprite spacing is 0.

This is my first user friendly asset I’ve created in a long time. Let me know if anything is confusing or could otherwise be simplified or improved in some way.

Gif.rbxm (5.4 KB)
^ Forgot to add the download.
Also available as a model here.

Notice:
There are some known bugs that I’ve discovered while trying to iterate between multiple gifs in a sort of looping “playlist” format. When I have the time to spare, I will be rewriting this to be more script friendly.

Gif v2:

Changes:

Removed all “function” controls from the attributes.
Added Bindable functions/events instead.
Removed “AspectRatio” and “Size” attributes as they were redundant.
Replaced “Speed” attribute with “FPS” attribute.
Officially and properly script compatible (mostly tested).

Instructions

1. Convert your gif (or video) into a sprite sheet with 0 spacing between sprites.

2. Upload your sprite sheet as a decal.

3. Copy the asset ID (different from the decal ID) and paste it into the ‘Image’ attribute.

4. Fill out the rest of the attributes with the required sprite sheet information.

How to Use

Attributes:

FPS:
Controls the frames per second (speed).

Frames:
Sets the number of frames that the gif has.

Grid:
Sets the grid (X,Z) of the gif’s frames.

Image:
Sets the ImageId of the gif’s image.

Looped:
Controls if the gif will loop or not.

Playing:
Shows whether or not the gif is playing.
Also acts as a resume/pause toggle.

Functions:

Play: Gif.Play.Invoke()
Plays the gif from the beginning.

Stop: Gif.Stop.Invoke()
Stops the gif and resets it to the first frame.

Pause: Gif.Pause.Invoke()
Pauses the gif at its current frame.

Resume: Gif.Resume.Invoke()
Resumes the gif at its current frame.

Events:

AttributeChanged: Gif.Attributechanged.Event:Connect()
Fires when an attribute of the gif has changed.
Returns the name of the attribute changed.

DidLoop: Gif.DidLoop.Event:Connect()
Fires when the gif loops.

Ended: Gif.Ended.Event:Connect()
Fires when the gif has ended.

Loaded: Gif.Loaded.Event:Connect()
Fires when the gif image has loaded successfully.

Paused: Gif.Paused.Event:Connect()
Fires when the gif has paused.

Played: Gif.Played.Event:Connect()
Fires when the gif has been played (using the “Play” function).

Resumed: Gif.Resumed.Event:Connect()
Fires when the gif has been resumed (unpaused).

Stopped: Gif.Stopped.Event:Connect()
Fires when the gif has been stopped (using the “Stop” function).

Example:

I’ve personally been using EzGif, but any tool will work as long as the sprite spacing is 0.

Download:
Gif.rbxm (8.5 KB)

Model:

Please let me know if you find any bugs or issues. I’m also open to any suggestions.

Other Resources:

Area Sound Kit
API Service
Explorer Info
Fallen Character/Parts Recall Height
And more…

nanosph · October 14, 2021, 8:25am

Wrong section. It must be put in resources.

MightyDantheman · October 14, 2021, 8:30am

Is there a way to manually move a thread, or will I have to repost it?

(Although I still am looking for feedback.)

nanosph · October 14, 2021, 8:35am

Go to editing and change the topic to resources.

Reeflexed · October 14, 2021, 8:55am

its good but how do i add borders to gif and can you explain all very detailed

MightyDantheman · October 15, 2021, 1:58am

What kind of borders? Do you mean the gif itself or the gif frame? A visual would probably help me understand more.

Reeflexed · October 15, 2021, 12:57pm

gif frame that is static dude …

MightyDantheman · October 16, 2021, 3:58am

My Gif UI element is the same as any other UI element for the most part. Just put it inside a frame like you would an ImageLabel or edit its properties.

octav20071 · October 18, 2021, 7:32am

I feel like the Stop and Play properties are useless, since you can set Playing to true or false.

MightyDantheman · October 18, 2021, 8:55am

The same could be said about audio, which is was what I was essentially trying to replicate. Play and stop will both return the gif to the first frame. Perhaps it won’t be useful for most, but I figure that having that option for the few that might use it is better than not.

One use may be to synchronize gifs, or perhaps create a sort of gif “playlist”.

octav20071 · October 18, 2021, 9:00am

You could go for the Sound Instamce properties. IsPlaying could be the only property that affects the playing action. Anyhow, it’s confusing.

MightyDantheman · October 18, 2021, 9:01am

But my attributes are the same as Sound, unless you’re suggesting that I rename the “Playing” property to “IsPlaying”. The use case is the exact same for either.

SoCalifornian · October 18, 2021, 10:00am

From my standpoint the problem is that you’re replicating the behaviour of a Method with an Attribute

We don’t see the Methods within the properties window - so if you’re trying to replicate the Sound structure then those shouldn’t be “properties” at all and rather a part of a class where those Methods can be called (and where gifs can be controlled)

MightyDantheman · October 19, 2021, 8:08am

Is there a way to create a custom class that I’m unaware of? I’m not sure of how I can attach a function to an object without the use of something like a bindable event or perhaps a module. But neither seem as clean as simply setting an attribute to true, in my opinion.

SoCalifornian · October 20, 2021, 1:59am

If you’re going to replicate a Method as a Property: don’t. I meant through a Class returned by a Module not a Custom Roblox Datatype (which does not exist)

Stick to the Playing attribute, it makes everything less cluttered and makes behaviour straight forward and less spread out.

MightyDantheman · October 20, 2021, 3:42am

I suppose I could, but I feel like that complicates things a bit more. I can understand how it might look cluttered with what seems more more options than necessary, but my thought was that I wanted everything you need to be directly available with the very first instance (the “Gif” Frame object).

Functionally, I don’t really think it’s an issue as it automatically sets the bool to false and works as intended. If having Play and Stop functions as attributes is indeed actually making things overly confusing, then I might reconsider that.

Though for the time being, even if somebody doesn’t read the instructions, it seems like they could figure it out considering that Play and Playing are similar in that they both continue playing the gif, albeit at different points. Same with Stop and unchecking Playing.

However, if Roblox ever adds custom class support or at least some method of attaching functions similar to attributes, which according to these recent RDC keynotes, I feel like they would. If that is indeed the case, I would most definitely switch to that without a doubt.

MightyDantheman · June 14, 2022, 7:50pm

Gif v2 is officially released.
(Please let me know if you find any bugs as it’s a complete rewrite)