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

Sdílet
Vložit
  • čas přidán 28. 08. 2024

Komentáře • 507

  • @anhi399
    @anhi399 Před rokem +522

    Your FIRST CZcams 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 Před 11 měsíci +10

      same lol

    • @aturtle9974
      @aturtle9974 Před 11 měsíci +12

      didn't even realize it was the first vid T_T

    • @mastaw
      @mastaw Před 11 měsíci +7

      Same xD guess I did already binge the whole thing

    • @IncendiaHL
      @IncendiaHL Před 10 měsíci +1

      Same

  • @user-pw9se6yf9c
    @user-pw9se6yf9c Před 11 měsíci +217

    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.

    •  Před 11 měsíci +8

      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 Před 10 měsíci +5

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

    • @MCNeko6554
      @MCNeko6554 Před 10 měsíci +2

      @ 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

  • @aarthificial
    @aarthificial Před 11 měsíci +60

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

    • @jesscodes
      @jesscodes  Před 11 měsíci +17

      Thank you so much! Love your videos too btw

    • @kamilorga6342
      @kamilorga6342 Před 10 měsíci +1

      ​@@jesscodescan I get ur Instagram??

  • @upta
    @upta Před 11 měsíci +130

    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 Před 3 měsíci +10

    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.

  • @heh_boaner
    @heh_boaner Před 10 měsíci +14

    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 Před 2 měsíci

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

  • @Draidzeven
    @Draidzeven Před 11 měsíci +83

    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 Před 11 měsíci +3

      nice tip! thx.

    • @Dysiode
      @Dysiode Před 11 měsíci

      🤯

  • @user-js3ox6ju3q
    @user-js3ox6ju3q Před rokem +48

    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
    @smellymarshmally9087 Před 11 měsíci +38

    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.

  • @Chief-wx1fj
    @Chief-wx1fj Před rokem +10

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

  • @Adkit2
    @Adkit2 Před 11 měsíci +3

    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.

  • @joepveenman
    @joepveenman Před rokem +22

    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.

  • @_stephenhubbard
    @_stephenhubbard Před 11 měsíci +11

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

  • @TimpersOliver
    @TimpersOliver Před 11 měsíci +7

    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 Před 11 měsíci

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

  • @PrismaticaDev
    @PrismaticaDev Před 10 měsíci +6

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

  • @Pallerim
    @Pallerim Před 11 měsíci +5

    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!

  • @studio_buehler
    @studio_buehler Před 11 měsíci +6

    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  Před 11 měsíci +10

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

  • @Sven-W
    @Sven-W Před 11 měsíci +8

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

  • @shukarullahshah
    @shukarullahshah Před rokem +4

    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!

  • @nomadicjester
    @nomadicjester Před 2 měsíci

    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.

  • @Cebbinghaus
    @Cebbinghaus Před 10 měsíci +4

    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. ❤

  • @thetra00
    @thetra00 Před 11 měsíci +6

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

  • @Th3-Games
    @Th3-Games Před 6 měsíci

    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.

  • @lukeskywalker7878
    @lukeskywalker7878 Před 11 měsíci +3

    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!

  • @zjott4z
    @zjott4z Před 11 měsíci

    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

  • @hann6270
    @hann6270 Před 11 měsíci +3

    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!

  • @Andrew90046zero
    @Andrew90046zero Před 2 měsíci +1

    Awesome to see another person doing chunk loading in Unity!

  • @RichardRichyRichington
    @RichardRichyRichington Před měsícem

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

  • @RDPolarity
    @RDPolarity Před 10 měsíci +2

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

  • @hahah4968
    @hahah4968 Před 11 měsíci +1

    Woww it's so impressive, hope you'll often share your game in CZcams. I'm really appealed by your game. 😮

  • @_jonathancollins
    @_jonathancollins Před 11 měsíci +1

    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!

  • @catherinew04
    @catherinew04 Před 2 měsíci

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

  • @nick-brooking
    @nick-brooking Před 9 měsíci

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

  • @5gonza541
    @5gonza541 Před 10 měsíci +3

    Before merging the colors of shalow water with the sand you could make the sand darker on the parts that have water ontop because sand becomes darker when it gets wet. Also if you wanna make it real fancy make the sand that HAD water ontop (like the edges that get periodicly water) to be darker for some time until it got dry!

  • @yahiiia9269
    @yahiiia9269 Před 11 měsíci +1

    Why is this video so professional though? Makes you look like you're in the big leagues already with your first video. Very cool.

  • @Kenjuudo
    @Kenjuudo Před 11 měsíci

    The sheer quality of this video earned my subscription. 👍

  • @IceForgeOfficial
    @IceForgeOfficial Před 7 měsíci

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

  • @mpazik67
    @mpazik67 Před 10 měsíci

    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.

  • @EmberLionGames
    @EmberLionGames Před 9 měsíci

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

  • @kadir0001
    @kadir0001 Před 10 měsíci

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

  • @inventstatestudio
    @inventstatestudio Před 11 měsíci

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

  • @JoaquinMarcher
    @JoaquinMarcher Před 10 měsíci

    Wow, I do not usually comment on CZcams videos but it left me mind-blown the fact that this is your first video, really nice content.

  • @bitofalice
    @bitofalice Před 11 měsíci

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

  • @byronmorley2907
    @byronmorley2907 Před 11 měsíci

    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

  • @st0ox
    @st0ox Před 10 měsíci +26

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

    • @tomandpug4503
      @tomandpug4503 Před 8 dny +1

      Weaksauce, leave ego out of it! Try compliments 😊! She did a great job on the video, thank her for sharing her insights and intelligence ❤

  • @justmehere_
    @justmehere_ Před 10 měsíci

    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.

  • @albingrahn5576
    @albingrahn5576 Před 11 měsíci +1

    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!

  • @alexandre2bi554
    @alexandre2bi554 Před 11 měsíci +3

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

  • @octia2817
    @octia2817 Před 11 měsíci +1

    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.

  • @darenn-keller
    @darenn-keller Před 11 měsíci +1

    Really cool video. I'm so impressed it's your first video, well done!

    • @jesscodes
      @jesscodes  Před 11 měsíci +2

      Thanks so much, Darenn! :D

  • @ronantremoureux3743
    @ronantremoureux3743 Před 10 měsíci

    Realy cool texturing process, waiting for the next video !

  • @anlkoroglu3114
    @anlkoroglu3114 Před 10 měsíci

    I've seen so many devs trying the same concept but this one is definetely the best and most unique one

  • @izaacstpierre1471
    @izaacstpierre1471 Před 11 měsíci +1

    Looks great Jess, well done. Consider using the same approach as the sea foam for making incoming waves, and break them up with some noise.

    • @jesscodes
      @jesscodes  Před 11 měsíci +1

      Great suggestion, that could look really cool

  • @Alex_dlc
    @Alex_dlc Před 10 měsíci

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

  • @RenderingUser
    @RenderingUser Před 11 měsíci +1

    This is just... beautiful. Incredible work

  • @Power0fM
    @Power0fM Před 10 měsíci

    Last week I was looking for some ideas on how to implement water in a 2d game, but all the tutorials and demos did fancy math to simulate 3d waves that was very complex and difficult to follow. This is perfect for my little project! Thank you so much for sharing!!

  • @guilhermeviana892
    @guilhermeviana892 Před 10 měsíci

    that's one of the most gorgeous games i've ever seen holy shit

  • @TejPandit11
    @TejPandit11 Před 10 měsíci

    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 🙂

  • @SentientNr6
    @SentientNr6 Před 11 měsíci

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

  • @mellowmind_dev
    @mellowmind_dev Před 10 měsíci

    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.

  • @FelipeAndrade10
    @FelipeAndrade10 Před 11 měsíci +1

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

  • @XoriniteWisp
    @XoriniteWisp Před 11 měsíci +1

    Looks fantastic. Shaders are black magic to me - I've long since realized I'll never fully get how they work - so videos like these are fascinating to me. Hoping for more along these lines!

    • @MichaelPohoreski
      @MichaelPohoreski Před 11 měsíci

      A pixel (fragment) shader is a little program that runs PER pixel. It takes in coordinates and its job is output a color.
      ShaderToy is a great place to play around with fragment shaders.
      A vertex shader transforms vertices in object space to post-projection space.

  • @patriand
    @patriand Před 11 měsíci

    really nice! love it. Amazing first video of a channel :)
    three suggestions: Lower the caustics over the deepest water as you would not see the bottom of the water where the caustics hit. 2. Add a Skyreflection layer: seeing moving clouds reflect in the water surface could give it some final extra flair? perhaps weather determened. 3 Bottom vegitation: Some grean-brown-gray coloring on the bottom, visible on medium deapths only. Probably overdoing it as it is really nice already. But fun for experimentation

  • @akinma
    @akinma Před 9 měsíci

    That is very impressive looking water. I have a soft spot for pixel graphics
    because there wasn't much else back in the day and amazes me how much
    pixel graphics are still evolving and how much variations there can still be
    found even if at first it might seem very restrictive art.
    I guess it's a bit of a choice of style, but in my eyes it looked better without
    the outline, more natural. But it's really just my opinion.
    The game graphics overall look fantastic. I see real potential here.
    I hope you are able to keep developing it!

  • @jamjam.100
    @jamjam.100 Před 10 měsíci

    Definitely looking forward to these videos!

  • @Soraphis91
    @Soraphis91 Před 11 měsíci

    great video!
    just a list of possible things to add :)
    - reflections
    - seing "through" the water (e.g. the lower body parts when swimming, fish, corals, ....)
    - different shader parameters for different water bodies, depending on size of the waterbody (e.g. separate ocean from lakes and rivers).
    - larger waves traversing over ocean awter bodies
    - the circle wave when running through water, could be more cone shaped when running vs, circular (and small / slow) when idling.

  • @Rafix
    @Rafix Před 11 měsíci

    GREEEAT VIDEOOO!!! I am learning shaders now and this video helped me A LOT!!!

  • @vraisairs9201
    @vraisairs9201 Před 11 měsíci +1

    Really great. Thanks for sharing your process

  • @SomeRandomPersonWhoDrawsStuff

    I can feel the hours of work put in to this game your making good job 👍

  • @its_appl
    @its_appl Před 10 měsíci

    Wow this is gorgeous. Cant wait to see more!

  • @TamaraMakesGames
    @TamaraMakesGames Před 11 měsíci

    I just started learning shader graphs in Unity and your video popped up on my page. I gotta say, I'm amazed! You might have just made me love pixel art. I would totally play the game when it's out

  • @uselessgamedev
    @uselessgamedev Před 11 měsíci

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

  • @humble-hedgehog
    @humble-hedgehog Před 10 měsíci

    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!

  • @isto_inc
    @isto_inc Před 11 měsíci

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

  • @Ok_HelloThere
    @Ok_HelloThere Před 10 měsíci

    I should be studying for an exam that is in couple hours right now, but instead of that I'm here watchin this interesting video about shaders.

  • @shadamethyst1258
    @shadamethyst1258 Před 11 měsíci

    This is really cool! I can see two potential issues in what you shown:
    - the world coordinates are floats, which means that you will progressively loose precision as the player moves out
    - the blurring of the texture is done on every frame, so it might lag the game a bit on weaker hardware. A way around this would be to precompute the blurred texture for every encounterable 3x3 groups of tiles, or to use a faster blurring algorithm for lower-end hardware (which probably would require you to precompute a small blur for each 1x1 tile)
    Keep this up, though, I'm looking forward to what your game is becoming!

  • @bro-rubro
    @bro-rubro Před 11 měsíci +1

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

  • @erfansh1925
    @erfansh1925 Před 11 měsíci

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

  • @StanleyKubick1
    @StanleyKubick1 Před 9 měsíci

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

  • @Hades948
    @Hades948 Před 10 měsíci

    Wow, that looks so good! A lot of game devs (myself included, admittedly) don't even bother with shaders. But when you put in the time and effort like you did, you get really great results like this! Very cool. Excited to see the game continue to progress, as well.

  • @AM-Rabbit
    @AM-Rabbit Před 10 měsíci

    This tutorial is a masterpiece. Period!

  • @i_am_set
    @i_am_set Před 11 měsíci +1

    Wtf this game looks actually so good

  • @n00ter99
    @n00ter99 Před 10 měsíci

    This art style is really great, very nice work!

  • @EthMiC_
    @EthMiC_ Před 11 měsíci

    imma be honest, i dont think ive subbed this fast before, immediatly loved the vibe, ill make an update when I finish the vid

    • @EthMiC_
      @EthMiC_ Před 11 měsíci

      enjoyed it very much, 10/10 would recommend

  • @verd7719
    @verd7719 Před 11 měsíci +1

    Good job and nice video, I really hope you will be able to figure out the current situation around Unity. It hit a lot of devs including me, so I wish you and everybody else good luck.

  • @thommekm
    @thommekm Před 11 měsíci

    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..

  • @nandomercy1
    @nandomercy1 Před 11 měsíci

    The results are really amazing.

  • @abf94y
    @abf94y Před 11 měsíci

    Looks amazing, reminds me of some of the old adventure games in the best way.

  • @obsoleteobsession
    @obsoleteobsession Před 10 měsíci

    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!

  • @pikolopikolic5567
    @pikolopikolic5567 Před 11 měsíci

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

  • @molehorde
    @molehorde Před 3 měsíci

    Great video! To use blurr for the shoreline is pretty clever. Thank you for sharing!

  • @KevEatsCheese
    @KevEatsCheese Před 11 měsíci

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

  • @scevvin7788
    @scevvin7788 Před 11 měsíci

    As a brand new dev, I love watching through devlogs that inspire me to keep going and learning

  • @CubsYT
    @CubsYT Před 10 měsíci +1

    This is awesome! Core Keeper but it's above-ground:

  • @wort3120
    @wort3120 Před 11 měsíci

    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!

  • @Daragni
    @Daragni Před 11 měsíci

    It's something beautiful. When there is an opportunity to play your game, first of all I will send my avatar to swim.

  • @jamie_dev
    @jamie_dev Před 11 měsíci

    wow your devlog is amazing. I'm from Australia too!! can't wait to see more 😊

  • @darkside3ng
    @darkside3ng Před 11 měsíci

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

  • @bilel114
    @bilel114 Před 11 měsíci

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

  • @Jazz861
    @Jazz861 Před 10 měsíci

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