A fading tattoo on character?

I saw this cool thing someone made and I was wondering if anyone has a clue of what they did. I think the tattoo is a model, but I’m not sure. How does it slowly fade up, and glow like that?
https://gyazo.com/b315525beea3c08794a4358833ba9923

I couldn’t find any places online that has something like this, or maybe I just don’t know what to search. I’m more concerned on how this person was able to fade into visibility in the up the arm. Any clues?

It may have been created with decals.
image
Decals have all the properties that you would be looking for

transparency looks even on the whole image. Color fades with gradient. I’d image a white png with alpha transparent background using the new color gradient instance to feature the visible tattoo areas. Arm bevel is actually smooth shaded single intermediate 45* face so 3 surface guis aligned to the arm perhaps. Why not ask them?

I didn’t know decals could do that. And I kind of lost the owner of this work as it was just something I saw on discord, but I’m sure I can find him or her.

actually, this image that I saw was posted by another user who didn’t know who the owner was. So, I guess the owner of this work is out of the question.

SurfaceGui with ImageLabel + UIGradient. The UIGradient’s properties are then tweened to create this cool effect.

This isn’t likely done with decals as decals have one set color. To use decals, you would need an image for each frame. That’s very costly to the client and especially low end devices. Plus, making an image for each frame takes a long time.

I never thought about Image labels at all. Although I did figure it wasn’t decals, because there was no way it would fade that smoothly up the arm.

One question however. How exactly would I place the ImageLabel on the character, like in the gif? Aren’t GUIs suppose to be ON the client’s screen?

Other GUI types exist, Surface GUIs for example. These are visible on the surface of Parts.

1 Like
local TweenService = game:GetService('TweenService')

local Image = game.StarterGui.SurfaceGui.ImageLabel
local UIGradient = Image.UIGradient

local goals = {Transparency = NumberSequence.new
    {
        NumberSequenceKeypoint.new(0,1),
        NumberSequenceKeypoint.new(1,0)
    }
}
local tweenInfo = TweenInfo.new(1,Enum.EasingStyle.Linear,Enum.EasingDirection.In)
local tween = TweenService:Create(UIGradient,tweenInfo,goals):Play()

The error said : 15:10:20.897 - TweenService:Create property named ‘Transparency’ on object ‘UIGradient’ is not a data type that can be tweened

Is the transparency property for UIGradient not tweenable with TweenService?

You cannot Tween a NumberSequence or its Keypoints, but you can tween the UIGradient’s Offset.

local UIGradient = script.Parent.SurfaceGui.ImageLabel.UIGradient
local TweenService = game:GetService("TweenService")

UIGradient.Transparency = NumberSequence.new(0, 1)

-- Looping tween
local tweenInfo = TweenInfo.new(5, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, false, 0)

UIGradient.Offset = Vector2.new(-1, 0)

local goal = {
	Offset = Vector2.new(1, 0)
}

local tween = TweenService:Create(UIGradient, tweenInfo, goal)
tween:Play()

Achieves this, possibly something close to what you’re after?

1 Like

When I run the game, I’m able to see it on the sever. When I play with my character however, my player isn’t able to see it on the server. What and how exactly do I send what I need through a remoteEvent in order for the clients to see the tattoos changing???
This is the script I have so far, and it works. No errors. I just don’t know what I’m suppose to pass through the parameters and how to receive it on the client side.

--[Server script in ServerScriptService]
--[I rotated the UIGradient -90 so that it transitions up the arm]
local tattoo = game.StarterGui.SurfaceGui.Tattoo
local UIGradient = tattoo.UIGradient

local TS = game:GetService('TweenService')
local TI = TweenInfo.new(3,Enum.EasingStyle.Linear,Enum.EasingDirection.Out,0,true,4)
local offset1 = {Offset = Vector2.new(0,-1)} --[Finishing position - finish at the top]
local create = TS:Create(UIGradient,TI,offset1)
local startingPos = Vector2.new(0,1) --[Starting position - start from the bottom]
local addWait = 2

UIGradient.Offset = startingPos

--[a recursive function so I can see it repeat]
local function appear()
	create:Play()
	create.Completed:wait(addWait)
	appear()
end

appear()

and how do I make it glow, like neon-like…

Looks like your surface gui isn’t on a character…? I’m not quite certain how it’s even appearing in the first place under StarterGui. Try putting it on your Dummy’s LeftArm or something, so it’s a descendent of workspace.
If the tattoo is supposed to appear when the player presses a certain key or something, you would handle only that input on the client, and fire a remote event to the server to change the appearance of the tattoo, using the Player instance’s (automatically passed from the remote event) character.

-- LocalScript
player presses key:Connect(function()
    remoteEvent:FireServer()
end)
-- Server Script
remoteEvent.OnServerEvent:Connect(function(player)
     local character = player.Character
     if character then
        -- make the tattoo on the character's arm appear/glow/etc
    end
end)

As for the neon glow bit, I’m not too sure. It looks like there might be a second UIGradient that’s coming up slightly, overlapping the tattoo for a couple seconds, then going back down (offset?). I’m a bit busy right now, but I’ll try and get a working example in a couple hours and let you know how it goes! :slight_smile:

1 Like

I just realized I had it under StarterGui and not in workspace, but the adornee of the SurfaceGui was set to the LeftUpperArm. No wonder I couldn’t see it. And I will try doing that “press a key to make tattoo appear” thing, since I’ve realized my mistake. I’ll also try figuring out that neon glow bit. :face_with_monocle:

I was able to make it look neony. I had to save the images as a white color and then set the LightInfluence property to 0. So, thank you for your help

1 Like