Shime // Shimmer for GuiObjects

Resources Community Resources
, , , ,
#1

About

Shime is a module that allows you to create a shimmer effect on any GuiObject easily. Shime is easy to use and extremely customizable. Shime achieves this by using a gradient that is animated to create the shimmer effect, which is then applied to the GuiObject. It will automatically detect the GuiObject’s size and position to apply the proper gradient to it and will clip to the guiobject’s size, including UI Corners.

What is Shime and Shimmer?

Shime is a module that allows you to easily create a shimmer effect on any GuiObject. Shime is used to create a Shimmer class that can be used to create a shimmer effect on any GuiObject.

Shimmer may also be used to describe the Roblox’s CoreGui Shimmer module.

Why should I use Shime?

Shime is lightweight and opened-sourced, so you can easily modify it to your liking. It also has familar methods such as Shimmer:Play() and Shimmer:Pause() to control the playback state of the Shimmer, based off the TweenBase class.

Shimmer from Roblox is locked to only CoreGui meaning that normal script can’t access it. Shime allows you to create a Shimmer on any GuiObject from any script without needing Roblox Script Security privileges.

How do I use Shime?

Installation

:information_source: Note

Visit the Getting Started page more information on installation. Below is a quick summary of the installation methods.

Shime is easy to install. They are many ways to install Shime. The links below will take you to the installation method you want to use.

Install Method Asset Link
Install from Roblox Shimmer - Creator Marketplace
Install from GitHub Shime - GitHub

Usage

:information_source: Note

Visit the Usage page more information on usage, including additional code samples.

Shime is easy to use. The API is simple and easy to understand. Below is a simple code sample of how to create a shimmer effect on a GuiObject using Shime.

-- Require the Shime module
local Shime = require(game.ReplicatedStorage.Shime)

-- Create a new Shimmer and play it
local shimmer = Shime.new(script.Parent)

shimmer:Play()

Shime has many methods and properties that allow you to customize the shimmer effect to your liking. Below is a summary of all the methods, properties, and constructors for Shime.

Constructors

new(parent: GuiObject)
Returns a table containing Shimmer’s metatable. Shimmers using default parameters.
new(parent: GuiObject, time: number?, style: EasingStyle?, direction: EasingDirection?, repeatCount: number?, reverses: boolean?, delayTime: number?)
Returns a table containing Shimmer’s metatable. Shimmers using specified parameters.

Properties

Property Details
PlaybackState: Enum.PlaybackState This read-only property will return Enum.PlaybackState.

Methods

GetFrame(): Frame
The GetFrame function returns the Frame that is used to create the shimmer effect. This frame can be customized after the shimmer is created.
GetGradient(): UIGradient
The GetGradient function returns the UIGradient that is used to create the shimmer effect. This gradient can be customized after the shimmer is created.
Stop(): void
The Stop function halts Shimmer. If Shimmer:Play() is called again the Shimmer will resume interpolating towards their destination but take the full length of the time to do so.
Pause(): void
The Pause function halts Shimmer. If you call Shimmer:Play() again, the shimmer resumes playback from the moment it was paused.
Play(): void
The Play function starts Shimmer. Note that if a shimmer has already begun calling Play will have no effect unless the shimmer has finished or has been stopped (either by Shimmer:Stop() or Shimmer:Pause().

Demo

:information_source: Note

Shimmer Demo has Content Sharing enabled. You can download the demo from the Roblox website by clicking the ellipsis (...)and selecting Download.

We provide an open-source demo of Shime, you can view the demo on Roblox. Feel free to use the demo as a reference for how to use Shime and modify it to your liking.

Wiki

Shime has an official wiki. The wiki contains information on everything from installation to usage. The wiki is a great resource for learning how to use Shime.

Support

If you have any questions or concerns, please feel free to contact me. You can contact me from either replying to this topic on the DevForum or creating an issue on GitHub.

This post was adapted from Shime’s GitHub.

114 Likes
How can I make text label and have a background like this?
Free shiny gui object function
#2

Reminds me of Roblox loading screen! :+1:

5 Likes
#3

now I can mimic the roblox loading screen!!!

finally, I can create better UI for my games

125/125

3 Likes
#4

This is cool! Very well done! You should add the ability to change the color of the shimmer for more customization.

2 Likes
#5

I will definitely look to add more customizability including changing the color of the shimmer in the near future.

I can’t make any promises on what will ship in v1.0 but the chances of more properties will be likely.

1 Like
#6

Awesome module!

Definitely using it in the future.

#7

Ah yessir, was trying to find something a while ago. At last, there is a resource. Great module. 10/10

#8

Amazing module, I will def use this. However will there be any other effects in the future?

#9

Currently Shime uses UIGradients to achieve the shimmer effects so in theory you could replace it with a custom gradient.

Legacy versions utilized ImageLabels but ultimately it was ruled out in favor of UIGradients due to how I could not get the ImageLabel to clip for UICorners and such.

#10

I would rather download the module. I try to avoid requiring asset Ids mainly due to delays and the inability to do this on the client. Then of course, there’s security vulnerbilities with that, but I’m not so worried about that.

I was just about to make something like this, and this looks good!

2 Likes
#11

uuhh it doesn’t work at all :confused: it said this

Unable to find module for asset id 12958292783. Does the asset have a ModuleScript named "MainModule"?

#12

Thanks for reporting this. I will look into it.

How did you install Shime? If you can could you message me your place file or where what type of script is requiring and where the script is?

#13

Wonderful, nothing to say :+1:

#14

Actually there is an issue, as he says

require(assetId) cannot be called from a client. assetId = 12958292783

Happens when you use the require in getting started

For now it is safer for us to make the model & require it ourselves.

#15

Yeah, there’s no point in using this on the server and has no security vulnerabilities. It’s just a module that makes objects shimmer.

1 Like
#16

I will see if I can solve this very very soon. If needed I will revise documentation and installation.

For now, try using a local install of it. Aka put the module in ReplicatedStorage and require from there.

1 Like
#17

I did it on an empty baseplate and tested it in the command bar :confused: and I didn’t have the file

#18

I’ve attempted to reproduce this issue but could not get the same error to occur. Can you message me your exact steps?

Additionally, I’ve made an error on my end for the documentation. You cannot require from assetId on a LocalScript. I’m working to update the documentation to correct the error.

Apologies for the inconvenience.

#19

not working, especially on server :confused:

#20

Please check your messages. Try using a LocalScript instead of the Command Bar.