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

Поділитися
Вставка
  • Опубліковано 19 лис 2024

КОМЕНТАРІ • 516

  • @anhi399
    @anhi399 Рік тому +546

    Your FIRST UA-cam 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!

  • @ДанилаКарпенко-ь5д

    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.

    •  Рік тому +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 Рік тому +5

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

    • @MCNeko6554
      @MCNeko6554 Рік тому +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 Рік тому +67

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

    • @jesscodes
      @jesscodes  Рік тому +17

      Thank you so much! Love your videos too btw

    • @kamilorga6342
      @kamilorga6342 Рік тому +1

      ​@@jesscodescan I get ur Instagram??

  • @heh_boaner
    @heh_boaner Рік тому +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 5 місяців тому

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

  • @upta
    @upta Рік тому +135

    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!

  • @Draidzeven
    @Draidzeven Рік тому +87

    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!

  • @toyfreaks
    @toyfreaks 5 місяців тому +12

    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.

  • @Chief-wx1fj
    @Chief-wx1fj Рік тому +12

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

  • @城南十七
    @城南十七 Рік тому +51

    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 Рік тому +40

    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.

  • @studio_buehler
    @studio_buehler Рік тому +7

    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  Рік тому +11

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

  • @Adkit2
    @Adkit2 Рік тому +4

    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.

  • @_stephenhubbard
    @_stephenhubbard Рік тому +12

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

  • @PrismaticaDev
    @PrismaticaDev Рік тому +6

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

  • @TimpersOliver
    @TimpersOliver Рік тому +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 Рік тому

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

  • @CEbbinghaus
    @CEbbinghaus Рік тому +5

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

  • @LabGecko
    @LabGecko 2 місяці тому +1

    I have no idea how much research you've done for this, but the result looks like genius level coding, and your video presentation is top notch too. Well done.

  • @Pallerim
    @Pallerim Рік тому +6

    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!

  • @Sven-W
    @Sven-W Рік тому +8

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

  • @darenn-keller
    @darenn-keller Рік тому +2

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

    • @jesscodes
      @jesscodes  Рік тому +3

      Thanks so much, Darenn! :D

  • @thetra00
    @thetra00 Рік тому +7

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

  • @5gonza541
    @5gonza541 Рік тому +4

    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!

  • @anlkoroglu3114
    @anlkoroglu3114 Рік тому +1

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

    • @LabGecko
      @LabGecko 2 місяці тому

      Not for long! 😆 I feel like we'll be seeing a lot of versions of Jess' work soon, and I'm happy for the contribution. Thanks Jess!

  • @shukarullahshah
    @shukarullahshah Рік тому +5

    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!

  • @joepveenman
    @joepveenman Рік тому +24

    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.

  • @lastotter7282
    @lastotter7282 2 місяці тому +1

    You’re AMAZING!!!!!!! Will definitely be buying your game once you’re finished, thank you for being SO helpful to the community!!!!!

  • @yahiiia9269
    @yahiiia9269 Рік тому +2

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

  • @hann6270
    @hann6270 Рік тому +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!

  • @_jonathancollins
    @_jonathancollins Рік тому +2

    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!

  • @mellowmind_dev
    @mellowmind_dev Рік тому +1

    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.

  • @nomadicjester
    @nomadicjester 5 місяців тому +1

    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.

  • @lukeskywalker7878
    @lukeskywalker7878 Рік тому +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!

  • @RDPolarity
    @RDPolarity Рік тому +2

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

  • @tsuki-dev
    @tsuki-dev Рік тому +1

    the overall aesthetic of your game is phenomenal.

  • @octia2817
    @octia2817 Рік тому +2

    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.

  • @zjott4z
    @zjott4z Рік тому +1

    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

  • @Th3-Games
    @Th3-Games 9 місяців тому +1

    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.

  • @Andrew90046zero
    @Andrew90046zero 5 місяців тому +1

    Awesome to see another person doing chunk loading in Unity!

  • @JoaquinMarcher
    @JoaquinMarcher Рік тому +1

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

  • @EmberLionGames
    @EmberLionGames Рік тому +1

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

  • @albingrahn5576
    @albingrahn5576 Рік тому +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!

  • @Power0fM
    @Power0fM Рік тому

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

  • @scevvin7788
    @scevvin7788 Рік тому

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

  • @justmehere_
    @justmehere_ Рік тому +1

    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.

  • @i_am_set
    @i_am_set Рік тому +1

    Wtf this game looks actually so good

  • @StanleyKubick1
    @StanleyKubick1 Рік тому

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

  • @FelipeAndrade10
    @FelipeAndrade10 Рік тому +1

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

  • @RenderingUser
    @RenderingUser Рік тому +1

    This is just... beautiful. Incredible work

  • @isto_inc
    @isto_inc Рік тому

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

  • @TamaraMakesGames
    @TamaraMakesGames Рік тому

    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

  • @RichardRichyRichington
    @RichardRichyRichington 4 місяці тому

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

  • @obsoleteobsession
    @obsoleteobsession Рік тому

    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!

  • @alexandre2bi554
    @alexandre2bi554 Рік тому +3

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

  • @Hades948
    @Hades948 Рік тому

    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.

  • @Kenjuudo
    @Kenjuudo Рік тому

    The sheer quality of this video earned my subscription. 👍

  • @nick-brooking
    @nick-brooking Рік тому

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

  • @humble-hedgehog
    @humble-hedgehog Рік тому

    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!

  • @dampfwatze
    @dampfwatze Рік тому +1

    A gaussian blur tends to be very expensive. It might be better, to encode some sort of distance field to the boundary of your water into your tile texture. You could do this, by procedurally calculating the distance to the nearest boundary pixel for every pixel in your texture. While doing this, you need to make sure, that only those pixels, that are exactly on the boundary are zero, so you can color them differently in your shader. You can do all this once and save those textures to a file for use in your game.
    One caviat is, that you might not be able to do this with your current tile layout, because distances might be influenced by neighboring tiles. Then you would need different tiles for different neighbors, potentially increasing your tile count and complexity immensely.

  • @EthMiC_
    @EthMiC_ Рік тому +1

    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_ Рік тому

      enjoyed it very much, 10/10 would recommend

  • @bro-rubro
    @bro-rubro Рік тому +1

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

  • @pikolopikolic5567
    @pikolopikolic5567 Рік тому

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

  • @catherinew04
    @catherinew04 5 місяців тому

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

  • @bitofalice
    @bitofalice Рік тому

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

  • @hahah4968
    @hahah4968 Рік тому +1

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

  • @samhblackmore
    @samhblackmore Рік тому

    Wow what a difference that made adding the height map to the water shader so we get the impression of shallow water above the sandy beach gently sloping down into the depths of the sea. When you contrast that with a flat blue water texture it's just so much better!

  • @shadamethyst1258
    @shadamethyst1258 Рік тому +1

    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!

  • @uselessgamedev
    @uselessgamedev Рік тому

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

  • @byronmorley2907
    @byronmorley2907 Рік тому

    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

  • @danacosta5237
    @danacosta5237 Рік тому

    Insane quality for a first video! Awesome work!

  • @XoriniteWisp
    @XoriniteWisp Рік тому +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 Рік тому +1

      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.

  • @IceForgeOfficial
    @IceForgeOfficial 10 місяців тому

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

  • @TheGameLecturer
    @TheGameLecturer 11 днів тому

    That blur subshader graph is gonna be useful to me ! I'am glad I saw this, very instructuve.

  • @DKRSpeedline
    @DKRSpeedline Рік тому

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

  • @KippySmith1231
    @KippySmith1231 Рік тому

    I struggle so much in shader graph; I really can't wrap my head around how people can figure out just what you need to do in order to get a certain effect, so this just seems like wizardry or alchemy to me, but it was inspiring to watch.

  • @abf94y
    @abf94y Рік тому +1

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

  • @n3ppy632
    @n3ppy632 Рік тому

    Holy moly the art style looks amazing 🤩

  • @anonimowelwiatko4455
    @anonimowelwiatko4455 Рік тому

    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 :)

  • @mr_clean575
    @mr_clean575 Рік тому +1

    Looks really cool, excited to see more

  • @jacksaenz2591
    @jacksaenz2591 Рік тому

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

  • @BadgerBadgerBadgerBadger
    @BadgerBadgerBadgerBadger Рік тому

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

  • @Effectlife
    @Effectlife Рік тому

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

  • @CSurf3r
    @CSurf3r Рік тому

    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.

  • @kadir0001
    @kadir0001 Рік тому

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

  • @mpazik67
    @mpazik67 Рік тому

    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.

  • @inventstatestudio
    @inventstatestudio Рік тому

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

  • @deltametaYT
    @deltametaYT Рік тому

    Keep it up Jess! I think you'll get a lot of followers with this kind of video. I speak for many of us when I say we'd love to see how your game progresses if you want to keep sharing these kind of videos :).

  • @CoderDonut
    @CoderDonut Рік тому

    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.

  • @TejPandit11
    @TejPandit11 Рік тому

    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 🙂

  • @OriginalJetForMe
    @OriginalJetForMe Рік тому +1

    Your vide production skills are 🤌🏼

  • @izaacstpierre1471
    @izaacstpierre1471 Рік тому +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  Рік тому +1

      Great suggestion, that could look really cool

  • @thoughted6069
    @thoughted6069 Рік тому +1

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

  • @SentientNr6
    @SentientNr6 Рік тому

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

  • @Alex_dlc
    @Alex_dlc Рік тому

    Really enjoyed the video! I’m glad UA-cam recommended it!

  • @Ribiveer
    @Ribiveer Рік тому

    I'm loving this video! You have a really natural and clear way of explaining things, and your game is looking amazing already! I'm really looking forward to seeing more.
    I also have a suggestion for something that I think every pixel art game should do!
    In the video, you mentioned that you scale the water texture up, floor it, and then scale it down to create a pixel art look, and I always love when a pixel art game makes use of mosaic effects like those. There is a way to get that for free for everything on screen: if you set up the camera(s) in such a way that you render the screen to a Render Texture in a low resolution and then scale it up with point sampling, you'll have that mosaic effect for everything, including rotated sprites! It also sneakily helps with performance, as the heavy lifting of the graphics happen at a resolution much lower than that of the real screen, instead rendering to a tiny "virtual screen". There is a built-in Unity package that does this as well, 2D Pixel Perfect, though I don't know for sure whether that fits your needs exactly or if you want more control over the camera. For instance, I saw you zooming the screen in and out, and I'm unsure how easy it is to change the screen resolution on the fly like that.
    At any rate, keep up the awesome work!

  • @Tharky
    @Tharky Рік тому

    Holy cow this is amazing! Stunning work!

  • @bewilderedlearningevolving
    @bewilderedlearningevolving Рік тому

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

  • @blonkasnootch7850
    @blonkasnootch7850 2 місяці тому

    Is this real?! How can a dev log be so perfect?! This is the most encouraging and motivating channel i have ever seen ♥️

  • @fedend_
    @fedend_ Рік тому

    The water looks so nice that I just want to look at it endlessly

  • @clavesi
    @clavesi Рік тому +2

    Wow, this looks so good! Only issue I have is all the different values- I think I’d go mad adjusting them to get a “perfect look”, haha. You made this look so easy!

  • @joelmulder
    @joelmulder Рік тому

    This looks amazing!
    Although I was pretty shocked when I saw this is your only video, the quality is fantastic!
    Looking forward to hopefully more in the future!