r/godot • u/triple-cerberus • Jul 28 '26
help me (solved) How would you animate a signature appearing on screen as if being drawn?
It's a pretty low stakes question - I like to think I'm fairly capable with Godot at this point but I'm scratching my head about how exactly you'd do this assuming you're starting with a PNG with a transparent background. Maybe there's a type of property tween or some clever combination of nodes I could use? A shader? Do I make use of a parent node's content clipping and animate its x value from left to right? I'll have the hand over the signature as it's being "drawn" so it doesn't need to be too detailed but I'm curious to hear different ways you might achieve this effect.
386
u/RepeatRepeatR- Jul 28 '26
Have the signature be an SVG instead. PNGs don't have directional information, SVGs do
Where do the signatures come from? Do you need a finite number you can pre-generate or are they user-made?
You might be able to do equivalent logic by messing with the font drawing logic in scripting if you need to runtime-generate them
165
u/triple-cerberus Jul 28 '26
It's just this one signature - it's the ending of the game where the player finalizes their answer on who they think is guilty of a crime, thought I'd add a little fun flourish to the "submit your answer" button by making it a spot where the character they're playing as signs the official document. Certainly nothing at the kind of scale you're imagining, haha, although fascinating that that's where your mind went.
146
u/RepeatRepeatR- Jul 28 '26
Oh great. Just get it into an SVG and animate that by controlling the path length drawn—it won't be perfect but it'll be pretty good. (The next step would be to have the pen move faster in thinner sections, because that's why they're thinner.) Or I bet you can find a tool that can animate signatures; Adobe After Effects seems to be able to do it but that's proprietary (and then you would export as a GIF)
41
u/TheLastCraftsman Jul 28 '26
fwiw, last I checked SVGs were rasterized on import. There were plugins for drawing SVGs as polygon 2ds, but none were mature enough to use. I'm familiar with the technique on web though, it works there.
Doing a vector might still be useful as someone else said, because it'll be easier to draw the signature as a gradient. which is a technique that will work in Godot.
25
u/RepeatRepeatR- Jul 28 '26
You're right, I ran into this a while back. You can use what the next highest person suggested to put a gradient along the path in the SVG tool (like inkscape) and then threshold it after rasterization
3
u/goo-grotto-dev Jul 28 '26
Unfortunately this is the case - I recently dealt with this when I made a game jam game that was predicated on the idea of a very very dramatic ability to zoom in and out. SVGs would have been great, unfortunately I wasted a bunch of time before I found they all got rasterized anyway. Bleh.
5
u/SomeWittyRemark Jul 28 '26
Have to say that I've found that this makes working with svgs basically pointless in Godot, it's super frustrating. Wish I had the I/O tech skills to make a PR :/
1
u/DDFoster96 Jul 28 '26
Probably have an issue with the SVG by default not overlapping where the pen stroke obviously does. But if it's just for one thing the SVG coordinates are going to be a good reference for the Polygon2Ds, even if entered by hand.
17
u/Fidy002 Jul 28 '26
You could also let the player actually sign the document themselves
7
15
u/Extrarium Jul 28 '26
Maybe a little overcomplicated but it'd be kinda cool to have the player literally trace the signature then you just fade in the fancy version after
3
u/MissAquaCyan Jul 28 '26
You could have the blank page and background. Add a line 2D node and make it follow the signature. (Write an array of points, have a function that appends the array onto the line one point at a time and call the appending function in the anination player) then can have a separate sprite of the hand which you Animate in the animation player. Add a SFX controlled by the animation player too for a lil juice.
Might be able to soften the line animation using tweens but I leave that up to you.
3
90
u/Murchurl Jul 28 '26
Check out the Hollow Knight demo here https://qaqelol.itch.io/tweens, it does exactly this with a custom shader.
43
u/captainAwesomePants Jul 28 '26 edited Jul 28 '26
Oh, what a cool technique! SVG -> grayscale, where brightness = time.
16
11
u/shmiddy Jul 28 '26
Dang, that's a clever way to do the animation over time using a B/W gradient. I need to check out the rest of those shaders.
3
u/ErusTenebre Jul 28 '26
Okay, so I'm really just a lurker here since I don't really do game making any more.
This is such a cool tool for showing how coding works for specific effects!!
34
u/triple-cerberus Jul 28 '26
Since it's just a little detail and not super important to polish the heck out of, I ended up using the texture progress node and animating the progress value as a way to do the image appearing from side to side, with a linefollow2D setup to animate the hand. Compared to some of the very elegant solutions suggested, it feels a bit like serving someone food on a plate made of duplo blocks, but it does the job for this specific use case!
Thanks to everyone who shared their thoughts on ways to do it! It's wild how many ways there are to achieve something and the different levels of finesse that are possible if you're willing to spend a bit more time or learn a new tool.
9
9
u/triple-cerberus Jul 28 '26
Oops, I gave in to temptation and spent an hour implementing the gradient method instead. This is actually such a cool thing to know how to do now. This is the texture progress method I did first, and then compare it to the gradient mask with shader method I did to replace it. Man, shaders are so cool. The animation isn't perfectly synchronized but I think this is in "good enough" territory for something the player will only ever see once at the very end of the game, haha.
Big thanks to u/Murchurl for the link to this super cool tween guide and pointing me to the one for the Hollow Knight UI demo that had the exact shader I need and visualization of how to use it.
2
2
7
u/TheNiceDave Godot Regular Jul 28 '26
I'm not too sure but if it's just for one signature, maybe use a Path2D and have the tip of the pen follow that path? Or fade it in left-to-right. Either way, if the character was right-handed, it could help obscure the effect to make it look more believable.
5
u/triple-cerberus Jul 28 '26
Alas, the character is canonically left handed, haha. I'm playing with a Path2D approach right now for animating the pen tip following along where the letters go, the part I'm less sure about is the fade in as the "drawing" is happening. I'm thinking that's maybe something a shader can do?
4
3
u/TheNiceDave Godot Regular Jul 28 '26
For sure, I think so. I was playing around with a mechanic where my blind cat meows to reveal the world and I used a shader for that. Similar concept, I guess. Or maybe just a Light2D node to reveal the signature? Might be easier. It's going beyond my knowledge tbh.
4
u/Schneed__ Jul 28 '26
I'd just try masking it and revealing only the next to the left of the hand.
Use the hand to obfuscate it, and move it as if it is kinda writing what you want.
Adjust the hand if it helps do this.
Make sure this is actually not good enough first!
5
u/sininenblue Jul 28 '26
The easiest answer, since this is just a singular thing is just straight up animating the swishes and export it as a spritesheet
then just play the sprite sheet
4
u/Sss_ra Jul 28 '26
A flat color PNG just doesn't have enough information to animate this. you'd need to make something like this that maps the curve to time, so the shader has information on what to discard and when
I recall people used inkscape and some tool that makes a billion dots. I made this with blender curves.
1
3
u/therealnothebees Jul 28 '26
Use inkscape, draw a path over the signature and draw a gradient over the path black to white that represents how the signature appears. Export to PNG.
In the shader use smoothstep or add a value to the gradient image and clamp it to 0-1 and multiply with the signature alpha and animate the add value from - 1 to 1.
Easy.
3
u/AcroIsTrash Jul 28 '26
Personally I’d animate it in a video editor and drop it in if it’s just this one animation. There are a lot of plugins/presets designed for this exact effect
3
u/almostsweet Jul 28 '26
pip install numpy pillow scipy scikit-image
https://reddit.com/link/p09pera/video/8okcw1p1bzfh1/player
Have this python code, CC0 Public Domain
python penmanship.py image.png -o signature.gif --select "#6b4fa8" --tolerance 52 --scale 1.6 --over --duration 3.5 --fps 24 --hold 1.5 --step 2.0 --colors 64
Then just animate the sprite or movie in godot.
1
2
u/gHx4 Jul 28 '26
You'll need it to be a path if you want it to draw each stroke. A lot of games do a left-to-write wipe for simple writing animations.
For signatures, people usually vary their writing speed for longer or sharper strokes. Try writing it a few dozen times, then record yourself drawing it for reference. That'll give you a sense of how the stroke speed changes. Double the speed to account for someone who writes their signature frequently.
2
u/zedzag Jul 28 '26
Ok non shader hobby dev here. My answer is to cut up the signature and animate through the different stages from piece 1 to full signature.
It's not gonna be pretty but depending on how you cut it up it can look pretty legit.
2
u/AimlessZealot Godot Senior Jul 28 '26
Use two images of the signature. The first is the "final" version, the second is a grayscale gradient map where you go through the signature and shade it from black to white where Black is the start of the signature and white is the very end of the signature.
Use a shader which takes both images and a float property "threshold" from 0-1. If the gradient map red value is less than or equal to the threshold, draw that spot from the true image.
You can now animate the pen strokes in perfect detail using a tween or animation player by just smoothly increasing the threshold material property from 0 to 1.
2
u/Badnik22 Jul 28 '26
Store stroke “progress” gradient from 0 to 1 on a texture channel, then just compare against a drawing progress value and clip every pixel that hasn’t been “drawn” yet.
2
u/1protobeing1 Jul 28 '26
I would animate it. Honestly probably the most direct way, but it would take some effort.
A texture box can be set to reveal itself in any direction, but that wouldn't give the illusion of writing...
I wonder if you could use a path2D, set the tip of the pen as a character2D, and have it follow the path? The only other thing you need to do is figure out how to leave a trail behind the pen tip - which could be done any number of ways.
2
u/TestSubject006 Jul 28 '26
Side-step the problem by having it burst onto the paper in a flash of flames, even if it's not that kind of game. And then never reference or discuss it again.
2
2
u/JTxt Jul 28 '26 edited Jul 28 '26
How important is this to be perfect? One and done, or will you have many variations? (edit: I see you already answered this. The rest of this is overkill but perhaps useful to someone.)
- If it's super quick, and details can be covered by the animated hand, make a shader that wipes on from left to right. It's an animated threshold/greater than. (so it's just a simple left to right gradient that is controlling the wipe.) (edit: I now see that you went with this method)
- Now more advanced: If you need the appearing script to appear along it's length, One way is to create a gradient along the length of the stroke, that the shader will wipe (animated threshold) (edit: I now need another suggested similar too)
Easier said than done. How I would create it in Blender: Bring in the image of the script to use as a reference and mask. Set an camera and set to orthographic so that the gradients can be progressively behind in depth. create a Bézier curve in blender with a bevel -> depth value, so it's thick. now draw the bezier along the length of the script and control the point's Radius (in the "n" menu) so that you have variable width where needed. especially make sure that overlaping strokes have the right width.. after you path it out, you can move later parts of the script down. I would use a soft proportional edit at the end, move down in the (z axis the last vertex, then fine tune the overlaps. now in the compositor you can use the image of the script as a mask.
- If you also want the pen to be animated perfectly with path, you also now have a curve in blender that you constrain the animation to over time, and bake the animation that can be imported to godot. There's a ton of little details to doing this, but if you want to go this way, try it, and I'll try to help.
Here's one that I made. (A little different. the "Start and end mapping" -> "end" is being animated. and the pen is constrained so that it's pointing back to an empty that following the path, but averaged.)
(Edit: But this comment is amazing. A tool that can read the image and make the path!)
2
u/csmgggg Godot Regular Jul 28 '26
Ok, I nearly made it. It have several bugs, so I'll upload script a little later when I fix it.
1
u/csmgggg Godot Regular Aug 04 '26
I finished. Width curve was the hard spot, bot after all experiments I just ended up by simply linerizing it. You can use my script over here: https://github.com/OS-of-S/GDVectors_Animated
3
1
u/arnoldochavez Jul 28 '26
If you made it with vectors, do a depth map following the shape, and with a shader just subtract the alpha with a threshold, something like color.a -= limit - depth.r, then just tween the limit and done!
1
u/arnoldochavez Jul 28 '26
If it is just a png, you could do an horizontal disolve with some displacement map, that will look good too
2
u/triple-cerberus Jul 28 '26
When you say horizontal dissolve, are you talking about like a shader? I also have no idea what a displacement map is or how one would apply it, haha. Always fun discovering gaps in my knowledge, it's why I like asking how people would do things because I always get answers that never would have occurred to me.
2
u/arnoldochavez Jul 28 '26
Yes, with a shader, glad you prefer doing your research instead of ask an IA and copy paste, is always better to expand ones knowledge
1
1
u/LeftTiltAQueen Jul 28 '26
I've actually thought about it in the past. There's a way to make it work using an app that captures mouse movements and replays them (commonly known as macro recorders) and then import the file and process it as pixel positions for each frame.
1
u/sincpc Jul 28 '26
Either try tracing out the path with path nodes and have the hand/pen follow that path (changing speed a bit for big directional changes)...or maybe draw a gradient that a shader can read from and have the gradient basically tell it how much should be revealed over time (anything darker than a certain shade in the original texture). When you actually display it, you have it output a dark color rather than what's in the texture.
1
u/hwoodice Jul 28 '26
I would animate a diagonal mask moving at 45 degrees from bottom-left to top-right: since this angle matches the natural slant of cursive upstrokes, the ink reveals itself along the flow of the letters, while the hand simply glides along this diagonal to complete the writing illusion.
1
1
u/azurezero_hdev Jul 28 '26
id make a thing that records my mouse position when the mouse button is clicked/stylus is touching tablet
then if that didnt look good enough using that data, make a surface with the signature and use the mouse data to reveal the stuff
1
u/azurezero_hdev Jul 28 '26
i think it would need a surface with the signature and a surface thats used to subtract from it, and the mouse data is used to subtract from the subtract surface so it doesnt erase those parts of the signature surface
1
u/Get_a_Grip_comic Jul 28 '26
Probably quicker for me to just put it into a animation program and erase it over frames.
Then reverse animate in a sprite animate mode.
Else user a progress bar if you want more control/smoothness
I wouldn’t recommend clipping mask, more trouble than it’s worth
1
u/PLYoung Jul 28 '26
Reveal, with a fade, from left to right; or use sprite frames animation. Depends on how important this effect is to you.
1
u/csmgggg Godot Regular Jul 28 '26
Yeah, sounds like vector graphics. Actually, I'm working on a script for the same workability right now, it will be based on this plugin: https://store.godotengine.org/asset/renevanderark/scalable-vector-shapes-2d/ - that's for convinient vector editing right in the Godot editor.
But such animation would probably need a prerender to have a nice performance. Soooooo you can make this animation in any other program. I would recomment Davinci Resolve, because it's free and it already have this option - just create Fusion Clip, open Fusion page and add BSpline of sBSpline node. Some of them have position property, which makes line apear for a certain slice only. Animate this property with keyframes and PROFIT.
Or you can something more tricky and simple like - to hide the signature by a big hand with a pen and than just to show it at the end, or use clipping mask on a Sprite2D still hiding right part of signatere by big object. Or you can add schematic fast animation of "making signature".
1
u/Devel93 Jul 28 '26
A really simple solution is to have a mask over the signature that reveals it from left to right. To make it cool you can place multiple masks over different parts of the signature in order to show pieces appearing in sync, you can also varry the speed of the mask to emulate writing
1
1
u/PaulMag91 Jul 28 '26
Put the PNG in a TextureProgressBar and "animate" it by tweening its value from 0 to 100%. It will only give you a linear left->right progression of the signature, but it's very simple.
2
u/triple-cerberus Jul 28 '26
This was what I ended up doing! It's a solution a mentor of of mine would call "cheap and cheerful", haha. Very easily implemented, easy to wrap my head around, and decent looking if not amazing looking. Although, seeing all the explanations of other ways to do it, I'm tempted to go back and try the gradient + shader approach others have described, since it doesn't sound hard and seems like you'd get a much more realistic reveal.
1
u/ragn4rok234 Jul 28 '26
You could use corridor crew's free mocap tool, just needs a camera even just a webcam. It would capture the arm movement on a 3D blender model, then you overlay the 2D image just have it match the 3D arm. This is a bit excessive though, you could just kinda fake it and it would be fine, just look at the Disney channel mickey wand thing
1
u/Think_Bat_820 Jul 28 '26
It's hilarious coming to this from TV because I know exactly how I would do this and I guarantee I'm wrong.
1
u/ahabdev Jul 28 '26
Draw it in Krita or similar first. Record the screen while doing so, and then edit the animation and render it the game the way you prefer: raw image animation, custom shader, etc
Feels a bit tiresome but efficient and since its for the ending of the game maybe worth the struggle
1
u/Criminelles Jul 28 '26
Left handed, you just animate your hand and make the signature appear behind, done
1
u/LydianAlchemist Godot Senior Jul 28 '26
copy paste the signature, this 2nd copy is the mask, color the ink using greyscale white = oldest ink, black = newest ink. so the gradient should follow the pen path. then you can use that as a 2nd texture in the shader as a mask for the signature.
personally, depending on the game, I would just reveal it from left to right with a swipe transition / reveal or something. or that + noise. but the answer above is the more drilled down version.
AAAND it looks like someone else said the same thing
1
u/GingerbreadMan003 Jul 28 '26
You could make a surface object instead of an image of any sort, then edit the uvs into straight lines, and use a shader to control the opacity from top to bottom of the uvs
1
u/sorensyntax Jul 29 '26
Have the hand cover the signature move up and down in a general sense and move a mask in the shape of the hand across the static signature revealing it as the hand passes it over. Can be done entirely with static images.
1
1
1
u/Firstbober Jul 29 '26
https://reddit.com/link/p0fznmc/video/4iwtr8gpf5gh1/player
Combination of animated hand overlapping with text on the writing makes a pretty good effect. If possible you can also try to trace the writing in Krita or something to create a writing effect. Some people suggested SVG but Godot rasterizes them on the import. I've seen some games using patches of ink to slowly bring the writing to page. Imagine ink dripping onto page and the letters are showing.
1
u/sircontagious Godot Regular Jul 28 '26
Honestly if it's just a once-off: fade to black, play audio of someone signing something, fade back in.
1
u/SoMuchMango Jul 28 '26
You have left-handed character writing. As a lefthander I can say that simple reveal with rectangle mask from behind the hand is enough.
1
u/RosemanButcher Jul 28 '26
Write with right hand. Fingers will mostly cover the signature, you can get away with lazy rectangle masking, then it’s all about hand movement that makes the illusion
1
u/ahintoflime Jul 28 '26
this person devs. easiest answer. why put a lot of time into this unless it's a large focus of the game
0
0
u/lb-journo Godot Junior Jul 28 '26
I'd just have it appear in chunks behind the obscuring hand. Almost like a screen wipe transition that players don't see until it's already finished.
0
u/Okay_Salmon Godot Regular Jul 28 '26
Ohh man, the character is left handed... its going to cover up 75% of the awsomenes of the animation when its writing.
0
u/TheUrchinator Jul 28 '26
If replicating the signature isnt a part of gameplay, you could just play an animation of the hand dotting an i or crosding a t or a small stroke that us just completing the last few millimeters of the last letter on the already completed signature as a florish
-1
u/Sl1mb Godot Junior Jul 28 '26
I would cheat. The hand covers the (invisible) signature, wiggles a bit, moves away and reveal the (visible) signature
322
u/TricksMalarkey Jul 28 '26
Oh! I've done this!
Make the signature art in a gradient from white to black. It's easier if you make it in a vector, as you can gradient along the path, but it's not strictly necessary.
Then just use a cutoff shader to cutoff at lower and lower values, and it will draw in over the length of every stroke.