How I Made Pixel Art Water Trails - Godot Visual Shader
Ойындар
Hi! My name is Jess and I’m a software developer from Australia. Thank you so much for the support on my last video, I was seriously blown away! This is a follow-up technical devlog where I explain how I created water trails and also how I made the sprites “go in the water”.
There are not many resources available on these topics for 2D games - if you have any other ideas on how to create pixel art water trails I would love to hear them!
My game (currently called “Interscape”) is a top-down 2D pixel-art style sandbox that uses procedural generation, inspired by games like Stardew Valley, Minecraft and RimWorld. I’ve been working on it in my spare time for a few years in Unity but recently I decided to port everything over to Godot.
Learning how to use Godot has been challenging but incredibly rewarding. And it really is quite good for 2D games - I have been pleasantly surprised by how easy some things turned out to be compared to Unity (e.g. tilemaps). I’m still in the process of porting everything over but it isn’t as painful as I expected.
Edit 12th Jan 2024: Looking for project files? I have uploaded the water shader and water trail shader for Godot here github.com/jess-hammer/2d-pix...
Timestamps
0:00 Intro
0:38 Creating a line trail
1:50 Ripple shader
3:57 Sprite depth
5:45 Bobbing movement
5:58 End
Music
/ @madisonjamessmithmusi... ← Awesome composer, go check him out!
pixabay.com/music/upbeat-spac...
pixabay.com/music/beats-untit...
Пікірлер: 139
I DEFINITELY am smart enough to understand all of this
I love following this! Amazing progress, thanks for explaining it all so clearly! -H.
@benmakesnosense
8 ай бұрын
Uau I love your videos, so neat that you also follow small game dev channels. Sjukt :D
@ZeroEmpires
5 ай бұрын
Why do I keep seeing you everywhere? :P
@BadGalG
Ай бұрын
Hi
@purplelord8531
23 күн бұрын
hello Hansi!
Loved writing the some of the music in this video for you! Game looks amazing as always!
Really cool to see some developers like you actually putting in the work and just switching engine. I really respect that even if it comes with tradeoffs like like a longer dev cycle or some missing features. I must admit I have been too comfortable just leaving everything as is and have been procrastinating feasibility experiments for some time. I should really start work on this as well because complaining about unity is one thing but at the end of the day actually doing something about it is the only effective way of affecting change.
I barely started making game - previously I was "just" an artist for many, many years. I know very little about coding but thanks to people like you I was able to made quite a few things already. Hope you will share more of your knowledge ;) And good luck with your game!
Instead of using a RenderTexture/SubViewport ... - Get the WorldPosition of the current Pixel (PxWp). Get the WorldPosition of the object pivot (OWp) (which I hope is always the start of the line) - Instead of Sampling UV, sample only the U part of the UV and vor the V part, get the "length(PxWp - OWp)". maybe you need to scale some of the results by how large a pixel is relative to the world units. I also have not tested it, but I feel like "it should work"
This is really cool. Looking forward to the next devlogs!!
So relaxing and inspiring. Keep up the good work, Jess.
Such attention to details! Congrats very inspiring work
Such a cool effect!! I love seeing advanced stuff like this for Godot. Keep it up!
It looks so beautiful! Also the video is so well made, thank you for showing all the details and explanation!
Looks fantastic, Jess. Great start to your channel, you explain every step you've taken very intuitively.
This is pretty amazing stuff. Love the attention to detail. It really gives so much life and character to your game!
Thanks for giving so many insights. I am not even doing game dev (for now), but still how you approach problems and present it is super interesting. Also, somehow you manage to have non-annoying, relaxing background music 🙂 Good luck and inspiration for developing your game, it looks very promising!
This is incredible! I've been looking around for Godot videos like this, you've earned a sub
Absolutely awesome, great content! I learnt a lot from watching this video, subscribed and can't wait for more.
Wow, this looks just gorgeous! It's a very challenging task to create a beautiful pixel-art effect based on meshes!
I just found your channel via this video and I find it very interesting and clear in its explanation of techniques and the gamedev process. Thank you, looking forward to see more videos about your gane development and especially your approach to the incredible Godot engine.
Wow! Amazing explanation and video editing! The game looks really nice, congrats :)
This is incredible! Glad to see you joining the Godot train. Welcome! Your dev logs are fantastic! Would love to know how you've gone about setting up the shader for your trees.
This project looks amazing! I’m just starting with Godot and game dev in general so seeing other people’s work like this is very inspiring. Keep at it!
This is really cool! Seems like a nice robust system. Also great video :)
Great video, really appreciate the explainations and why you implemented things the way you did
Hey Jess! Really great video, so cool to see you doing awesome work in Godot after (presumably) not that long! Subbed!
wow, this looks gorgeous! also, I love how you show your progress and different things that did and didn't work. I feel like seeing all the intermediate steps and tweaking it to something that looks great is super interesting. also super cool that you went for a generic approach that works with all creatures, I feel like keeping something like that in mind early is usually easier than trying to shoehorn it into something that is already 100% done but also a bit too specific
Thank you! This is gorgeous, well presented, and enjoyable 😊
Such a great video, Jess! Keep up the awesome work :)
Looks great! Very well done
Beautiful and clear explanations, what a talented coder and artist you are! I wish you the best success, thanks a lot for sharing these tips with us!
This looks great! Easy to understand explanation. You make me wanna boot up my project that I've been avoiding for the last month
just happened to stumble upon this vid, did not expect to get a very insightful devlog content, thank you for this!
Really cool Devlog Jess! 😊 With the music and everything, it's definitely relaxing (even though you're talking code 🤭). I think that water trail has gone great, good job!
Amazing video ! And the result is soooo nice
this is just beautiful!
great video, enjoyed seeing the effect evolve as it was being developed rather than just jumping to the end showing the final effect. Interested to see how the game evolves as thus far it looks very unique
This is so creative! I love it!
Awesome! Pure gold your videos!
Amazing, I can't wait to play in your game! :) Also, your videos are fanstastic
looks really nice! Great work
You did it again... Looks real good!
Love the code snippets, made it much easier to understand!
Great job, I really like your explanations! Keep up the good work!
Super cool video Jess! Glad to see talented developers switching to Godot! 🥳
I'm learning shaders, and I want to do something very similar, so thank you so much for putting this together. You've helped me a ton!
First video I've seen of yours and I'm astounded by the level of detail that you go into! I've been using Godot 3 for my projects, but seeing a lot of the things I'm missing out on, I might have to switch t o4.0 very soon. Great pacing, and mood overall as well. Subbed!
Stunning bit of creative techArt, can't wait for more!
Amazing job! Looks so good!
Stunning!
This is cool ❤❤ i love your water shader
This is gorgeous, just started my own devlog, this inspires 👊
the last tip about sprite depth using the mask was very helpful thank you!
Love this channel, keep it up!
I love seeing these smart solutions
It looks so good!
Awesome! Thank you very much.
this is so cool! you've earned my subscription!~
Looks awesome! I'm really excited to see someone who uses Godot's visual shader editor, as its really hard to find Godot resources that don't do shaders completely in code
Wow this is wonderful!
Looks very good!
that looks great! good luck!
Just discovered your channel, thank you for the great video!
This is incredible.
This looks so good.
Amazing!!!
Great effects!
Wonderful. I’m still surprised for your out of the box thinking.
you can also use canvasgroup, use it as parent node. and pixelate the canvasgroup node to avoid uv distortion of Line2D
@Sylfa
6 ай бұрын
A CanvasGroup is barely any faster than a Viewport (15% in some tests) and then you have to run extra shader code to do what the lower resolution gave you cheaply before. In short, that might actually be slower than the Viewport implementation. Make sure to profile your code.
Hooray for Godot! :D
this looks absolutely amazing! brilliant work! devduck sent me :)
Very nice solution. 👍As for Godot, in your future vids it'd be amazing if you could comment on differences of note as you discover them. 🙏I've been looking at it and people seem to love it for 2D but less so 3D, so I think I'm gonna have to ride out the Unity profiteering craziness.
Very nice effect. Another way to do it is to draw velocity vectors around the moving objects into a RT. Then in your water shader you can sample this RT to discord the uv for instance.
Great video again, hope you will post a bit more often.
You're amazing!
You are so smart, this is so cooool
Your channel is gold.
Niceee look so good
Super inspiring!, Now I need to learn shaders hahaha
Good luck with the port to godot!
This just looks like black magic to me, really cool stuff
May want to make a function that stops subviewport from rendering at all when the character is on land, just to save performance (since every creature has one).
wait this is sick
TYSM THANK YOU SO MUCH
More Godot tutorials please Jess !
Wao yr talented. Amazing work
Nice! I love godot
Awesome work. Love the clever solutions you've come up with :D Thanks for sharing the deets
Fresh :)
pro.. so good
This looks gorgeous! Very well done. One thing - if you're using _process for this, would you get varying lengths/behaviours on your trail depending on what refresh rate monitor you're using?
i like the art style and colors.. really chill mood. wouldnt a semi transparent sprite animation get the same effect, easier? without all the processing that has to be done every frame?
if you're using a tilemap for the water to apply the material shader on would you need a separate one for the land/sand etc.?
that's cool
I love this tutorial i'm not using right now. but godot yet i focus in a more easy engine like gdevelop/construct but i was thinging about start in godot
what a beutiful game ❤
I'm definitely stealing this shader for my own project 😂
just as a side note, viewports are pretty heavy in terms of performance and really should be used as a last resort. although for your use case it would be fine, godots render server system often leaves... memory bandwidth issues when dealing with larger more complex scenes. but yea, cheers looks amazing for sure!
@Sylfa
6 ай бұрын
Have a look at Raffaele Picca's talk "Viewports: An Overview #GodotCon2023" he did some tests and concluded that they aren't nearly as bad as people assume. In particular, they are comparable to a CanvasGroup. Obviously, you can't expect the game to run well if you replace every scene root with a Viewport or anything, but you shouldn't consider them to be a last resort. I saw someone that used Viewports to actually optimise and make the game run faster for instance.
thanks for this cool video may i ask, why switched from unity to Godot ?
How to create water effect in video in godot? Can you say something about that? Thanks
If the cow is not fully submerged, would it have 4 ripples for each leg?
How do you recreate the pixelart water shader in Godot?