How I Created 2D Pixel Art Water - Unity Shader Graph

Ойындар

Welcome to my very first KZread Video!! My name is Jess and I’m a software developer from Australia. In this video I showcase the water I made for my game and all the juicy technical details behind it.
My game (name tbd) is a top-down 2D pixel-art style sandbox that uses procedural generation, inspired by games like Stardew Valley and Minecraft. I’ve been working on it for a few years now so I thought it was about time to start sharing some progress! Would love to hear what you think so far :)
Timestamps
0:00 Intro
1:43 Creating the tiles
2:08 Height map gradient
6:07 Caustic texture
10:16 Specular highlights
11:59 Sea foam
13:28 ✨ Final result ✨
Want to download and try the shader yourself? I've made the files available on GitHub here:
github.com/jess-hammer/2d-pix...
Gaussian blur subgraph:
forum.unity.com/threads/urp-s...
Music from:
pixabay.com/music/beautiful-p...
pixabay.com/music/beats-untit...
pixabay.com/music/upbeat-spac...
pixabay.com/music/ambient-won...
pixabay.com/music/upbeat-atmo...
pixabay.com/music/beats-close...
pixabay.com/music/beats-aesth...

Пікірлер: 500

  • @anhi399
    @anhi39910 ай бұрын

    Your FIRST KZread video??? And here I was ready to binge your whole channel. Your game reminds of me One Our One Life in all the best ways and I can't wait to see what you develop it into. Goodluck!

  • @blazingpotato642

    @blazingpotato642

    10 ай бұрын

    same lol

  • @aturtle9974

    @aturtle9974

    10 ай бұрын

    didn't even realize it was the first vid T_T

  • @mastaw

    @mastaw

    9 ай бұрын

    Same xD guess I did already binge the whole thing

  • @IncendiaHL

    @IncendiaHL

    8 ай бұрын

    Same

  • @user-pw9se6yf9c
    @user-pw9se6yf9c10 ай бұрын

    If there is a day cycle in the game, adjusting the color of the water can be an incredibly powerful technique for creating an atmosphere. It is awesome.

  • 10 ай бұрын

    Same with if seasons change, similar to how the environment changes beautifully in Stardew Valley! I'd love to see that implemented in a more dynamic game like this.

  • @TheRanguna

    @TheRanguna

    9 ай бұрын

    Oh man, having an orange tint for sunset would look amazing! Kinda like 13:45

  • @MCNeko6554

    @MCNeko6554

    8 ай бұрын

    @ Yes! A game with real seasons like Stardew/Rimworld but with the kind of gameplay found in Minecraft-type games. Minecraft gets 1000x better with a dynamic seasons mod. I can't wait for more videos and updates on the game XD I'm already hooked

  • @heh_boaner
    @heh_boaner9 ай бұрын

    It's amazing how techniques invented 4 decades ago are still in use today. Specifically, the scrolling Perlin noise. I hope someday I could bring innovation like that to this industry.

  • @mrtruman4339

    @mrtruman4339

    Ай бұрын

    Well, you can become a mathematician or a computer science researcher. Maybe you discover something like that one day. Also, NIKO ONESHOT.

  • @upta
    @upta10 ай бұрын

    How on earth is this your first video? This is legitimately top-tier quality with interesting content and engaging presentation. Exceptionally well done, definitely earned a subscribe from me!

  • @toyfreaks
    @toyfreaksАй бұрын

    Good editing and organic voice-over sync up to hijack both hemispheres simultaneously and deliver A LOT of information. So well conveyed as to make an old hack want to go back and make a game.

  • @Draidzeven
    @Draidzeven10 ай бұрын

    Great work! The reason there's no built in blur though, is that generally blurring in shaders is really expensive: it's just a lot of texture reads, especially for a good quality blur. I'd suggest given that you're already doing this as a tile set, that you also prepare pre-blurred tiles to represent the foam gradient. One fun thing to try: you can pack both the sharp outline and the blurred gradient into the same texture by using different color channels, say red for sharp and green for blur. You get them both at the same time in the same texture read "for free," then unpack them using a split node!

  • @Klamir

    @Klamir

    10 ай бұрын

    nice tip! thx.

  • @Dysiode

    @Dysiode

    10 ай бұрын

    🤯

  • @aarthificial
    @aarthificial9 ай бұрын

    The final result looks absolutely stunning! Also huge congrats on the first video, it's extremely well done!

  • @jesscodes

    @jesscodes

    9 ай бұрын

    Thank you so much! Love your videos too btw

  • @kamilorga6342

    @kamilorga6342

    9 ай бұрын

    ​@@jesscodescan I get ur Instagram??

  • @Chief-wx1fj
    @Chief-wx1fj10 ай бұрын

    The specular highlights was a really nice touch, it sold it a lot

  • @user-js3ox6ju3q
    @user-js3ox6ju3q10 ай бұрын

    It's the best water shader I've ever seen. It's amazing that you are both good at coding and art. This video is really helpful to me and I'm looking forward to your next video.

  • @smellymarshmally9087
    @smellymarshmally908710 ай бұрын

    Please produce more content like this; it's truly impressive. The audio quality and graphics are top-notch! Also, consider creating tutorials for both beginners and advanced developers.

  • @st0ox
    @st0ox9 ай бұрын

    Stop being so professional and amazing right from your very first video. This really hurst my ego. Please Stop!

  • @PrismaticaDev
    @PrismaticaDev9 ай бұрын

    Great work - a nice blend between detail and that nostalgic pixel-art vibe!

  • @TimpersOliver
    @TimpersOliver10 ай бұрын

    as a pixel artist i love watching people make pixel art games and the dev work. its crazy this is your first video. please make more! the art on this game looks so so nice.

  • @TimpersOliver

    @TimpersOliver

    10 ай бұрын

    adding a soft glow to the white highlights on the water might give it a dreamy sort of effect hehe

  • @studio_buehler
    @studio_buehler10 ай бұрын

    Very nice! I feel heavy Sebastian Lague influences and I like it. Up there in terms of production quality as well as explaining complicated subject matter.

  • @jesscodes

    @jesscodes

    10 ай бұрын

    Thank you so much! He is definitely a huge inspiration to me

  • @shukarullahshah
    @shukarullahshah10 ай бұрын

    Thank you so much for the detailed devlog. Please keep sharing insights from both a developer's and designer's perspective, and continue to share the solutions you come across. Your content is highly valued and appreciated!

  • @Adkit2
    @Adkit29 ай бұрын

    I love the attention to detail for the aesthetics here, showing that both technical skill in coding as well as artistic vision need to work together for a videogame to be made well.

  • @Sven-W
    @Sven-W10 ай бұрын

    The specular highlights look great. Very eye catching! The gradient also integrates very nicely into the desaturated color palette, great composition!

  • @_stephenhubbard
    @_stephenhubbard10 ай бұрын

    One of the best 2D pixel water shaders I've ever seen!

  • @thetra00
    @thetra0010 ай бұрын

    what an amazing DevLog, very well made! And your game looks amazing! Keep up the nice work!

  • @lukeskywalker7878
    @lukeskywalker787810 ай бұрын

    Amazing video! I love watching dev logs of individual developers and this was incredibly engaging! I hope you make more; I look forward to seeing your progress!

  • @RDPolarity
    @RDPolarity9 ай бұрын

    Wow, this is incredible and so well put together. Always awesome to see more Aussie indie devs.

  • @hann6270
    @hann627010 ай бұрын

    This is literally perfect timing. I'm currently working on a water shader for my own 2D topdown game and a few weeks ago I couldn't find any videos showing what i needed. Great video!

  • @Pallerim
    @Pallerim10 ай бұрын

    This was awesome. Not enough Devlogs go into this level of detail with explanations and reasoning. Thanks for creating this, it must have been a lot of work. And the end result looks so good!

  • @NathanSimmonds
    @NathanSimmonds10 ай бұрын

    Spectacular. Great effects, thanks a lot for the detailed video. Looking forward to seeing more of your game.

  • @danacosta5237
    @danacosta52379 ай бұрын

    Insane quality for a first video! Awesome work!

  • @alexandre2bi554
    @alexandre2bi55410 ай бұрын

    Amazing work ! Really inspiring, i love your approach and the visual is stunning

  • @kadir0001
    @kadir00019 ай бұрын

    This is such a nice and professional video. Sparkled some creativity inside to me. I’m waiting next videos.

  • @catherinew04
    @catherinew04Ай бұрын

    This is absolutely amazing, I can't wait to see more progress in future uploads :)

  • @n00ter99
    @n00ter998 ай бұрын

    This art style is really great, very nice work!

  • @DKRSpeedline
    @DKRSpeedline9 ай бұрын

    You have an excellent eye for beautiful graphics. The technical part is very fascinating as well. Great video. Thanks for sharing!

  • @ronantremoureux3743
    @ronantremoureux37439 ай бұрын

    Realy cool texturing process, waiting for the next video !

  • @AltamishM
    @AltamishM9 ай бұрын

    Wonderful stuff! Really enjoyed seeing your process. Thanks so much for sharing it in detail. Keep up the great work 🙌

  • @Jazz861
    @Jazz8619 ай бұрын

    Thank you for such a nice video and good hints on how to deal with water! :) I like your art style and palette!

  • @RenderingUser
    @RenderingUser10 ай бұрын

    This is just... beautiful. Incredible work

  • @IceForgeOfficial
    @IceForgeOfficial6 ай бұрын

    I learned so much on shader graph, you did an amazing job describing your process! Also this game looks beautiful!

  • @Cebbinghaus
    @Cebbinghaus9 ай бұрын

    This is way too high quality for a first video. Very impressed with the shaders and the game looks amazing. I will absolutely keep tabs on this devlog. ❤

  • @levilukeskytrekker
    @levilukeskytrekker10 ай бұрын

    This is so awesome! This project looks absolutely amazing. Really beautifully edited video, too-can't believe this is only your first!

  • @jeba1215
    @jeba12158 ай бұрын

    That looks amazing so far! What a great job you’ve done!

  • @pikolopikolic5567
    @pikolopikolic55679 ай бұрын

    The water looks amazing! Excited to see more of this project in the future!

  • @its_appl
    @its_appl9 ай бұрын

    Wow this is gorgeous. Cant wait to see more!

  • @wort3120
    @wort31209 ай бұрын

    What a well made Video, I loved it!! Makes me want to start with shader graph's too just by seeing what you did thanks!

  • @jacksaenz2591
    @jacksaenz25919 ай бұрын

    I love your art style! I can't wait to see more dev logs for this game!

  • @joepveenman
    @joepveenman10 ай бұрын

    This is really impressive. Making shaders like this is away a lot of work and you did an amazing job. The rest of the game looks also very impressive. 8 directional characters, some beautiful looking trees, the use of noise on things like grass and the fantastic sprite work. This is very impressive both from a technical standpoint as form a creative one. I wish you the best of luck and look forward to the next update.

  • @inventstatestudio9730
    @inventstatestudio97309 ай бұрын

    Creative approach to problem solving! Looks fantastic. Inspired me to work on my game more.

  • @obsoleteobsession
    @obsoleteobsession9 ай бұрын

    Wow, that's some of the most beautiful pixel art water I've ever seen. You're a master at this. Keep it up - can't wait to see how this game develops!

  • @albingrahn5576
    @albingrahn557610 ай бұрын

    Looks really good! Also making it the shader graph equivalent of open-source by showing the final graph at the end is very much appreciated, we need more devlog/tutorial hybrids like these!

  • @EmberLionGames
    @EmberLionGames8 ай бұрын

    That's the best water shader for pixel art I've seen I think. Great job!

  • @octia2817
    @octia281710 ай бұрын

    Wow - extremely cool. As others have said, I was ready to watch the rest of your videos, and was disappointed that there's none yet! Definitely subbed.

  • @Th3-Games
    @Th3-Games5 ай бұрын

    The quality of your video's are exceptional Jess! It's truly inspiring. I've been struggling having any energy to spend on the youtube side of my development journey, but you truly seem like an icon of the right way to manage your game progress.

  • @nomadicjester
    @nomadicjester25 күн бұрын

    Your whole concept here is magnificent. The gradation in the water came out perfect and the trail effect is spot on. Awesome work cant wait to see more.

  • @bilel114
    @bilel1149 ай бұрын

    Loved the work and the video quality! Great stuff. Made me want to go back to my side project.

  • @bitofalice
    @bitofalice9 ай бұрын

    This is looking fantastic! Really well explained and interesting video, such clever solutions! Would love to see more of your development, and good luck!

  • @nick-brooking
    @nick-brooking7 ай бұрын

    Look at the PROGRESS! This looks incredible, can't wait for more videos

  • @Alex_dlc
    @Alex_dlc9 ай бұрын

    Really enjoyed the video! I’m glad KZread recommended it!

  • @mellowmind_dev
    @mellowmind_dev9 ай бұрын

    This is the most beatuiful 2D water I have ever seen, that's for sure! Really excited to see what's next for your project, I think the visual foundation is already extremely solid.

  • @KevEatsCheese
    @KevEatsCheese10 ай бұрын

    glad to see your first video got some nice traction. Good luck on your journey :)

  • @isto_inc
    @isto_inc10 ай бұрын

    hot diggity damn. That's a solid first video. loved the technical depth without it getting boring. keep up the good work 👏

  • @StanleyKubick1
    @StanleyKubick18 ай бұрын

    what an incredible debut video. I enjoyed all of that and think the results speak for themselves

  • @byronmorley2907
    @byronmorley29079 ай бұрын

    I'm developing a similar style game at least a year behind you and boy I have a lot to learn, this looks great, keep it up cant wait to see where this goes

  • @FelipeAndrade10
    @FelipeAndrade1010 ай бұрын

    I am so glad KZread recommended this, the video is very professional AND the concept is awesome, I am starting a stardew valley inspired game myself

  • @BadgerBadgerBadgerBadger
    @BadgerBadgerBadgerBadger9 ай бұрын

    Love your style. Amazing that this is your first video. Please keep them coming.

  • @darkside3ng
    @darkside3ng9 ай бұрын

    Amazing work. I love the mesmerizing look of your game :) :) Congratulations.

  • @fralid95
    @fralid959 ай бұрын

    Keep up the good work! You're off to a great start! I'm looking forward to the new video on the game. I want to buy it already

  • @humble-hedgehog
    @humble-hedgehog9 ай бұрын

    Technical videos tend to get boring really fast, but this one I watched from start to finish. Clear breakdown of your process, great editing and awesome result. Looking forward to future videos!

  • @dudemanphat
    @dudemanphat10 ай бұрын

    This is a really great video! Thank you and I look forward to the next.

  • @stickyyserum
    @stickyyserum10 ай бұрын

    Love the content! Getting into game development as a side project and this is really inspiring. Can’t wait to see more updates

  • @erfansh1925
    @erfansh192510 ай бұрын

    this was some high quality video. i really enjoyed watching it and i will wait for the next one.

  • @jamjam.100
    @jamjam.1008 ай бұрын

    Definitely looking forward to these videos!

  • @thommekm
    @thommekm9 ай бұрын

    Wow, your game looks awesome and I like the idea! And technically this video is very informative and fun to watch - good job, keep it up! Looking forward to your next video..

  • @_jonathancollins
    @_jonathancollins10 ай бұрын

    I'm leaving a comment here so I can remember I was your 808th subscriber. Your channel is going to explode with more high quality content like this! Great job showing off shader graph. It's an area I haven't looked into very much yet, but with what I see here, I can't wait to dig in deeper!

  • @Effectlife
    @Effectlife8 ай бұрын

    I am really excited to see where this is headed. It already looks awesome! Keep going! ❤

  • @seanloughran6714
    @seanloughran67149 ай бұрын

    That was amazing! I learned a ton and you taught in such a clear manner. Great work, can't wait to see what else you come up with!

  • @d_ogo
    @d_ogo10 ай бұрын

    it's so genius and yet so well explained i started to learn recently and you took away my shader anxiety

  • @bewilderedlearningevolving
    @bewilderedlearningevolving10 ай бұрын

    Thanks for breaking it down this makes so much more sense now. Looks fantastic!

  • @SentientNr6
    @SentientNr69 ай бұрын

    Very impressive, I now am curious to know more about how you develop your game and the game itself. This video is top!

  • @n3ppy632
    @n3ppy63210 ай бұрын

    Holy moly the art style looks amazing 🤩

  • @anonimowelwiatko4455
    @anonimowelwiatko44559 ай бұрын

    I really love final result. It really took a lot of work to make shaders create something appealing. Thanks for sharing and good luck with your journey :)

  • @s-aluma-r
    @s-aluma-r8 ай бұрын

    Great video! I'm looking forward to the next part!

  • @CoderDonut
    @CoderDonut9 ай бұрын

    WOW! This is great! And pixel water art is so hard to make look good (I've tried my own). Thanks for going so in depth about the shaders and explaining the video card bit, too. That pink water at the end is seriously the most gorgeous pixel art water I've seen.

  • @CSurf3r
    @CSurf3r10 ай бұрын

    Your water looks amazing! The experiment with different colors makes me hope to see a day/night cycle at some point. This was really inspiring.

  • @Kenjuudo
    @Kenjuudo10 ай бұрын

    The sheer quality of this video earned my subscription. 👍

  • @rubygraves978
    @rubygraves97810 ай бұрын

    Great summary. Keep it going, you're making a good job with it. Also it's nice to see chunks in a break out/tutorial video.

  • @TejPandit11
    @TejPandit118 ай бұрын

    A phenomenally well made video! The problem and solutions are intricate and well explained, and you also considered CPU/GPU performance optimization while reconsidering moving the height map as a segmented texture. This video makes me wanna dive into trying the shader graph for my future experiments too. Thanks for the amazing video, I can't believe that it is your first. I have a lot to learn 🙂

  • @vraisairs9201
    @vraisairs920110 ай бұрын

    Really great. Thanks for sharing your process

  • @Thepewdiepiebro5
    @Thepewdiepiebro59 ай бұрын

    This is so well made, educational and just awesome. Keep it up ✨️

  • @mr_clean575
    @mr_clean57510 ай бұрын

    Looks really cool, excited to see more

  • @mpazik67
    @mpazik678 ай бұрын

    Great video! Happy to see another game dev project from Australia. I would love to play your game with my wife. Please keep us posted on your channel if you ever present your game at any conference.

  • @nandomercy1
    @nandomercy19 ай бұрын

    The results are really amazing.

  • @MrMiguelfigueira
    @MrMiguelfigueira8 ай бұрын

    Amazing work, beautiful game and great video!

  • @do_it_like_rei
    @do_it_like_rei10 ай бұрын

    It looks great!!! Please keep us updated ❤ and don’t give up on it!!

  • @afrancis7475
    @afrancis747510 ай бұрын

    This deserves a lot more views and subs. I just subbed, this content is soo good ♥♥♥

  • @bigmistqke
    @bigmistqke9 ай бұрын

    Beautiful water and really great video!!

  • @RichardRichyRichington
    @RichardRichyRichington7 күн бұрын

    This is an amazing display of so many different skills in one video.

  • @Tharky
    @Tharky10 ай бұрын

    Holy cow this is amazing! Stunning work!

  • @justmehere_
    @justmehere_9 ай бұрын

    HOLY thank you so much for this video, so many other shader videos are either super generic (which is perfectly fine to learn from but hard to expand) or super secretive. Particularly i had the same problem at 8:12 for a game of mine and had no idea how i could fix it, and your solution is PERFECT. This video's super informative and the game's beautiful, I'm definitely checking it out.

  • @zjott4z
    @zjott4z9 ай бұрын

    Ok,I'm gonna be honest,I find your video trying to learn shaders,but now,I just saw the entire video and I LOVE IT,thanks for beeing my new favorite channel

  • @uselessgamedev
    @uselessgamedev10 ай бұрын

    This is awesome! It's rare to see a good looking pixel art water shader that actually looks pixel art. Good job

  • @marjiqueen8877
    @marjiqueen887710 ай бұрын

    Looks awesome! Can't wait to play it when it comes out! Great work!

  • @Festivejelly
    @Festivejelly8 ай бұрын

    That looks bloody lovely!

  • @thoughted6069
    @thoughted606910 ай бұрын

    The game looks awesome, cant wait to see more content.

Келесі