Tweening Color with Back style makes weird behaviors -- Color3 overflow/underflow related

Bug Reports Engine Bugs
,
#1

Tweening a color using EasingStyle Back makes “back” moment of the curve unexpected colors instead of clamping, due to Color3 overflow/underflow rules.

When dealing with Tween for color, when the value exceed 1, it will reset to zero, leading to graphic incoherence when merging this behavior with the Back easing style. It’s the same when the value is negative, the values comes back to the far edge.

This leads to visual incoherence for the user when dealing with tweens for example. Here is the code used:

--!strict

local TweenService = game:GetService("TweenService")
local myPart = script.Parent

myPart.Color = Color3.new(.3, .3, .3) -- from gray...
local myTween = TweenService:Create(myPart, TweenInfo.new(1, Enum.EasingStyle.Back), {
	Color = Color3.new(1, 0, 0) -- ... to red
})

task.delay(5, myTween.Play, myTween)

and here is a video to show the behavior:

this is not a real problem with the engine since it’s the “expected” behavior, but this post is either to make a special case for the tween, or change the way Color3 overflow/underflow is handled, since it’s not right for a user.

Expected behavior

Expected behavior would be clamped values (maxed out to 1, and the less you can have is 0) but right now, the values reset to 0 from the beginning when it’s too high, and goes back to 1 when it’s too low.

this example on the “Run a command”:

local x = Instance.new("Part"); task.defer(x.Destroy, x); print(Color3.new(1.1)); x.Color = Color3.new(1.1); print(x.Color)

actual behavior:

  16:20:55.074  1.1, 0, 0  -  Edit
  16:20:55.075  0.0941176, 0, 0  -  Edit

expected behavior:

  16:20:55.074  1.1, 0, 0  -  Edit
  16:20:55.075  1, 0, 0  -  Edit

another behavior could be revert values, so the overflow (here 0.1) is substract to the value like that:

  16:20:55.074  1.1, 0, 0  -  Edit
  16:20:55.075  0.9, 0, 0  -  Edit

this makes the back tween more smoother on the transition with Back for example.

here is an example of what it can look like with Back

A private message is associated with this bug report

1 Like
#2

I did some investigating to understand what is going on.

I actually expected it to exceed the 0-1 range without wrapping. I remember this functionality exist for Decal.Color3 property and some other properties.

Turns out part colors specifically will wrap, when you try setting them to an out-of-range color, and that the tween specifically is just tweening the Color3 type as expected.

I used this code to see color tween as expected on a Texture/Decal.

x=game.Selection:Get()[1] game:GetService('TweenService'):Create(x,TweenInfo.new(5,Enum.EasingStyle.Linear),{Color3=Color3.new(2,1,1)}):Play()

The Color property for parts probably should not wrap, and instead clamp the to the range.

#3

this doesnt use the Back property, and that’s the real issue, the back property have a specific behavior to go beyond 1, that’s why i originally make the post, so it have to overflow, that’s the real issue

1 Like
#4

When you use the Back easing style, it is expected to go past the goal value and then come back. The TweenService does this. You can see it work as expected when using it on Decal.Color3 property. The unexpected wrapping is specifically happening on Part.Color property. It seems it doesn’t have to do with tweening, but the setter function for the Color property on this object.