There is a build on itch if you want to interact with it: https://lysard.itch.io/hk-hud-fan-recreation I remade the hollow knight HUD in unity with shader graph, vfx graph, dotween and unity's UI system.
Everything was set up in the canvas with screen space camera. I first just cut out the assets from a screenshot of the game and later made new UI assets in illustrator.
I suspected the original hud was using frame by frame animation with a mask and just moving it up and down. This is because the fluid movement looks the same every time. I wanted to try to make a shader because it even if it takes longer to set up, it means later I can tweak it however I want, add colours, texture, etc. without having to reanimate things or make multiple animators which are less optimized that programming. I wanted to avoid the animator and use dotween.
This was my first time doing a shader graph effect myself. I couldn't find much help online but bits and pieces of info across forms and figuring out how to piece them together. So I am not sure how good the shader is.
---Fluid in shader graph + dotween + vfx
- Animated fill with dotween and shader graph
- Scrolling noise in the y and using that to change offset of a UV. It made wave patterns.
- Changed noise values (dotween) to distort the wave height and length with dotween to give a fall and rise effect when increasing/decreasing
- I decided to add an outline to the fluid for glow effect, using offsets and animating alpha values
- Plugged all this into the alpha
- Played bubble particles whenever fluid went down at certain values
- Animated the eyes y scale when fluid was above or below eye level
- Played particles and made them spawn from the middle of the Soul UI element in a circle. This is when soul goes from unusable to usable.
I decided how to work in vfx graph for the first time. Otherwise I would have to make a bunch of separate default particle systems. I could add multiple particle effects one after another in one graph.
---Masks
-Made 3 vfx graphs, decreasing, increasing and final mask shake and particles
-Decrease:
flipbook for mask break
delay and then the slash which is a bunch of diagonal particles with random x and y offset slightly. Also a subtly diagonal splatter.
delayed final particles falling with gravity
-Increase:
Dotween mask scale in the x
Particles velocity vertical up and down. Slows down over lifetime
Colour and size change over lifetime
-Shaking:
Just random shaking in dotween being looped.
Easy particles that move up and scale over time.
Process breakdown video
Showcase