Fading screen is really slow for mobile devices

Help and Feedback Scripting Support
#1

I’m currently making my game mobile compatible. This has proven simple enough for most of the GUIs, however when fading between screens for tablets/phones, it can be very slow.

Here’s how the fade looks like on computer (and should look):
https://gyazo.com/0bb732cfeb4184679d30fd4e86cefc22

Here’s how it looks on mobile (and often even slower):
https://gyazo.com/a7cdf46fa1f083497ea5f7288f4aff58

The fade is sometimes so slow, it can sometimes take a whole 3 minutes to complete the fade, which I definitely do not want for my game!

Any tips to fixing/improving this?

#2

Could you show the code that you do for fading? It is most likely a mistake with the code.

1 Like
#3

Every fading item is done along the lines of:
image

I’m pretty sure the code is fine - it’s just the speed at which it runs for mobile devices which is the issue.

#4

wait() does not take a fixed amount of time. Code that yields using wait() will run again in about 2 frames of time, but depending on performance and other work that you are doing during the fade, this means it could take significantly longer on mobile devices, since they typically perform less well.

You should use the actual elapsed time, or use TweenService for convenience, if you want a fade that lasts for a consistent amount of time regardless of performance.

PS: there is probably another reason why your game runs as slow as it does on mobile to begin with if you are really seeing fades like this take >3 minutes.

4 Likes
#5

Okay thanks, I’ll see if correcting the wait time works.

Also, how would you go about doing this? I’ve never come across TweenService for fading GUIs.

#6

You create a Tween using TweenService for both Pic1 and for Pic2, where you set the target ImageTransparency for Pic1’s tween to 1, and the target ImageTransparency for Pic2’s tween to 0. Then you play both at the same time and wait for one of them to complete.

https://wiki.roblox.com/index.php/API:Class/TweenService
https://wiki.roblox.com/index.php?title=API:Class/Tween
https://wiki.roblox.com/index.php?title=API:Class/TweenBase/Completed

2 Likes
#7

Awesome thanks - changing wait() to wait(1/60) fixes the problem. I’ll have a look into the tween service now to see if that makes it smoother.

#8

wait(1/60) does not solve your problem, wait(x) will yield in multiples of 2 frames until x time has passed. So you should still be dealing with the same issue if you do that. You need to do a while loop where you set the ImageTransparencies on every frame and then only stop once a certain amount of time has elapsed. A for-loop with a fixed amount of iterations and a fixed x for wait(x) where x is a small number will not run within a consistent amount of time when performance changes.

2 Likes
#9

How would that look roughly?

Also, is it more effective to use TweenService or that?

#10

Warning: untested code below, may have minor mistakes

Raw method:

local start = tick()
local length = 0.5 -- length of fade

while true do

   -- value between 0 (start) and 1 (end)
   local t = math.clamp((tick() - start) / length, 0, 1)
   
   gui.Shop.Characters.Pic1.ImageTransparency = t
   gui.Shop.Characters.Pic2.ImageTransparency = 1 - t

   if t == 1 then
      break -- end reached
   end

   game:GetService("RunService").RenderStepped:wait()
   
end

Using TweenService (cleaner solution):

local TweenService = game:GetService("TweenService")

-- create fades:
local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Linear)
local tween1 = TweenService:Create(gui.Shop.Characters.Pic1, tweenInfo, {ImageTransparency = 1})
local tween2 = TweenService:Create(gui.Shop.Characters.Pic2, tweenInfo, {ImageTransparency = 0})

-- start the fading (does not wait until done):
tween1:Play()
tween2:Play()

-- wait until fade is done:
tween1.Completed:wait()
-- or tween2.Completed:wait(), in this situation it doesn't matter which
6 Likes
#11

That’s great, thanks! I better start fixing all my code now!