Tokeru | Fading as simple as ABC

tokeru 溶ける

Fading as simple as ABC, created by octomatics (GitHub: octale) and 7kayoh


Repository | Roblox Model | Available as a Wally package "octale/wally"


Introduction

tokeru (溶ける) is the Japanese word for dissolve. Filmmakers use the term dissolve to describe the transition that involves either fade in or fade out. That’s the meaning of the name of this project.

Start fine-tuning your UI with tokeru, rather than having UI appears instantly, have them appear with an animation instead! Aside from that, you can also combine tokeru with tweens/springs to build much amazing transitions, such as fade and scale up.

tokeru is also capable of doing fade effects on other instances, such as: BasePart, Sound, Decal, Texture, et cetera, basically anything that has a Transparency modifier in it.


API Reference

tokeru

tokeru(mono, direction, duration: number) → tokeruTweens

Apply the fading effect to a Mono (object), see the method below on how to create a Mono. For direction, use either tokeru["in"], or tokeru["out"], in means fade in, out means fade out. Duration is the time taken for tokeru to fade.

tokeru.newMono(objects: {Instance}) → mono

Creates a new Mono (object) for tokeru, used for fading.

tokeru[“in”]

A symbol, represents fade in.

tokeru[“out”]

A symbol, represents fade out.


tokeruTweens

tokeruTweens:Connect(fun: function))

Fires the defined function when the tokeru effect is completed.

tokeruTweens:Wait(duration: number?)

Halts the code until the tokeru effect is completed, the optional duration parameter is if you want to wait a bit more after completion.

tokeruTweens:Pause()

Pauses the tokeru effect.

tokeruTweens:Resume()

Resumes the tokeru effect.

tokeruTweens:Cancel()

Cancels the tokeru effect.

tokeruTweens:Destroy()

Destroys the tokeru effect, similar to tokeruTweens:Cancel()


Example

code


local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Packages = ReplicatedStorage.Packages
local tokeru = require(Packages.tokeru)

local mono = tokeru.newMono({workspace})

wait(2.4)
tokeru(mono, tokeru.out, 0.6):Wait(1.2) -- fade out, 1.2s, wait for completion and wait 1.2 seconds
tokeru(mono, tokeru["in"], 0.6) -- fade in, 0.6s

video


Installation

tokeru can be installed with Wally, simply add tokeru in your Wally configuration for the project.


tokeru = "octale/tokeru@0.0.5"

or by using the Roblox Model provided in this thread: Link

License

tokeru is licensed under MIT license

20 Likes

helo!

i’m wondering how performant tokeru is when tweening large amount of objects at the same time? asking this as it doesn’t seem you split up the input when the size is very large so the game would end up hanging and stuttering for a bit when the fade operation is started

1 Like

Tokeru has a linear time complexity, but as the optimisation from Luau (they have optimised the iteration of tables in Luau), the linear time complexity is not a huge concern.

About the tween however, the performance drawback should not be that awful to be noticed by human eyes.

Tokeru is supposed to be for mid-scale instances, not something as large as a map, as unexpected performance issues from the lower-end may occur.

Tween is, not the same as how spring works in Studio, spring uses the events from RunService (heartbeat iirc), but tween does not. I forgot how does the tweening work in Roblox, either it is fully Luau or its implementation done in CPP

2 Likes

Just added UIStroke support and ability to use other easing to the source code, the update will be deployed to both Wally and Roblox Marketplace today.

Also added support for Smoke/Fire/ParticleEmitter/Sparkles/Trail/Beam

How is this an error:
Error

That’s weird, this bug has been fixed before the release, the package in Roblox Model is probably outdated, hold on for a second…

Noticed a new bug, has been resolved. Thanks.