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

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ต.ค. 2024

ความคิดเห็น • 514

  • @anhi399
    @anhi399 ปีที่แล้ว +536

    Your FIRST TH-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!

    • @blazingpotato642
      @blazingpotato642 ปีที่แล้ว +10

      same lol

    • @aturtle9974
      @aturtle9974 ปีที่แล้ว +12

      didn't even realize it was the first vid T_T

    • @mastaw
      @mastaw ปีที่แล้ว +7

      Same xD guess I did already binge the whole thing

    • @IncendiaHL
      @IncendiaHL ปีที่แล้ว +1

      Same

  • @ДанилаКарпенко-ь5д
    @ДанилаКарпенко-ь5д ปีที่แล้ว +228

    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 11 หลายเดือนก่อน +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 ปีที่แล้ว +66

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

  • @upta
    @upta ปีที่แล้ว +134

    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 ปีที่แล้ว +85

    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 ปีที่แล้ว +3

      nice tip! thx.

    • @Dysiode
      @Dysiode ปีที่แล้ว

      🤯

  • @toyfreaks
    @toyfreaks 4 หลายเดือนก่อน +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.

  • @城南十七
    @城南十七 ปีที่แล้ว +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.

  • @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 4 หลายเดือนก่อน

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

  • @Chief-wx1fj
    @Chief-wx1fj ปีที่แล้ว +12

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

  • @LabGecko
    @LabGecko หลายเดือนก่อน +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.

  • @lastotter7282
    @lastotter7282 หลายเดือนก่อน +1

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

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

  • @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

  • @PrismaticaDev
    @PrismaticaDev ปีที่แล้ว +6

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

  • @_stephenhubbard
    @_stephenhubbard ปีที่แล้ว +12

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

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

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

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

  • @thetra00
    @thetra00 ปีที่แล้ว +7

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

  • @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

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

  • @nomadicjester
    @nomadicjester 4 หลายเดือนก่อน +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.

  • @Th3-Games
    @Th3-Games 8 หลายเดือนก่อน +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.

  • @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

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

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

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

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

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

  • @JoaquinMarcher
    @JoaquinMarcher ปีที่แล้ว +1

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

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

  • @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 👏

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

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

  • @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 หลายเดือนก่อน

      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!

  • @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

  • @EmberLionGames
    @EmberLionGames 11 หลายเดือนก่อน +1

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

  • @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

  • @RDPolarity
    @RDPolarity ปีที่แล้ว +2

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

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

  • @RichardRichyRichington
    @RichardRichyRichington 3 หลายเดือนก่อน

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

  • @tsuki-dev
    @tsuki-dev ปีที่แล้ว +1

    the overall aesthetic of your game is phenomenal.

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

  • @StanleyKubick1
    @StanleyKubick1 11 หลายเดือนก่อน

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

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

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

  • @nick-brooking
    @nick-brooking 11 หลายเดือนก่อน

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

  • @IceForgeOfficial
    @IceForgeOfficial 9 หลายเดือนก่อน

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

  • @DKRSpeedline
    @DKRSpeedline ปีที่แล้ว

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

  • @BadgerBadgerBadgerBadger
    @BadgerBadgerBadgerBadger ปีที่แล้ว

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

  • @catherinew04
    @catherinew04 4 หลายเดือนก่อน

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

  • @danacosta5237
    @danacosta5237 ปีที่แล้ว

    Insane quality for a first video! Awesome work!

  • @FelipeAndrade10
    @FelipeAndrade10 ปีที่แล้ว +1

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

  • @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

  • @Andrew90046zero
    @Andrew90046zero 4 หลายเดือนก่อน +1

    Awesome to see another person doing chunk loading in Unity!

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

  • @kadir0001
    @kadir0001 ปีที่แล้ว

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

  • @uselessgamedev
    @uselessgamedev ปีที่แล้ว

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

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

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

  • @jamie_dev
    @jamie_dev ปีที่แล้ว

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

  • @Rafix
    @Rafix ปีที่แล้ว

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

  • @inventstatestudio
    @inventstatestudio ปีที่แล้ว

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

  • @RenderingUser
    @RenderingUser ปีที่แล้ว +1

    This is just... beautiful. Incredible work

  • @abf94y
    @abf94y ปีที่แล้ว +1

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

  • @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

  • @pikolopikolic5567
    @pikolopikolic5567 ปีที่แล้ว

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

  • @alexandre2bi554
    @alexandre2bi554 ปีที่แล้ว +3

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

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

  • @Kenjuudo
    @Kenjuudo ปีที่แล้ว

    The sheer quality of this video earned my subscription. 👍

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

  • @AltamishM
    @AltamishM ปีที่แล้ว

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

  • @ronantremoureux3743
    @ronantremoureux3743 ปีที่แล้ว

    Realy cool texturing process, waiting for the next video !

  • @DanielPBullis
    @DanielPBullis ปีที่แล้ว

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

  • @n3ppy632
    @n3ppy632 ปีที่แล้ว

    Holy moly the art style looks amazing 🤩

  • @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 🙂

  • @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

  • @jeba1215
    @jeba1215 11 หลายเดือนก่อน

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

  • @Alex_dlc
    @Alex_dlc ปีที่แล้ว

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

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

  • @hahah4968
    @hahah4968 ปีที่แล้ว +1

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

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

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

  • @blonkasnootch7850
    @blonkasnootch7850 29 วันที่ผ่านมา

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

  • @mr_clean575
    @mr_clean575 ปีที่แล้ว +1

    Looks really cool, excited to see more

  • @n00ter99
    @n00ter99 11 หลายเดือนก่อน

    This art style is really great, very nice work!

  • @Tharky
    @Tharky ปีที่แล้ว

    Holy cow this is amazing! Stunning work!

  • @jacksaenz2591
    @jacksaenz2591 ปีที่แล้ว

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

  • @patriand
    @patriand ปีที่แล้ว

    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

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

  • @KevEatsCheese
    @KevEatsCheese ปีที่แล้ว

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

  • @scevvin7788
    @scevvin7788 ปีที่แล้ว

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

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

  • @akinma
    @akinma 11 หลายเดือนก่อน

    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!

  • @Solanaar
    @Solanaar ปีที่แล้ว

    First of all these are some really cool techniques I am definitely stealing for my water shaders! Secondly I LOVE THE COLORS OF YOUR GAME. Idk if you know color theory or have an amazing sense for color but I am in love. They are so atmospheric and soothing, really great stuff.

  • @i_am_set
    @i_am_set ปีที่แล้ว +1

    Wtf this game looks actually so good

  • @fralid95
    @fralid95 ปีที่แล้ว

    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

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