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

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024

Комментарии • 508

  • @anhi399
    @anhi399 Год назад +524

    Your FIRST RUclips 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 11 месяцев назад +7

      Same xD guess I did already binge the whole thing

    • @IncendiaHL
      @IncendiaHL 10 месяцев назад +1

      Same

  • @user-pw9se6yf9c
    @user-pw9se6yf9c Год назад +221

    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 11 месяцев назад +5

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

    • @MCNeko6554
      @MCNeko6554 10 месяцев назад +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

  • @upta
    @upta Год назад +131

    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!

  • @heh_boaner
    @heh_boaner 11 месяцев назад +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 3 месяца назад

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

  • @aarthificial
    @aarthificial 11 месяцев назад +62

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

    • @jesscodes
      @jesscodes  11 месяцев назад +17

      Thank you so much! Love your videos too btw

    • @kamilorga6342
      @kamilorga6342 11 месяцев назад +1

      ​@@jesscodescan I get ur Instagram??

  • @Draidzeven
    @Draidzeven Год назад +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 Год назад +3

      nice tip! thx.

    • @Dysiode
      @Dysiode Год назад

      🤯

  • @toyfreaks
    @toyfreaks 3 месяца назад +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.

  • @user-js3ox6ju3q
    @user-js3ox6ju3q Год назад +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 Год назад +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 Год назад +10

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

  • @Adkit2
    @Adkit2 11 месяцев назад +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 Год назад +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.

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

  • @_stephenhubbard
    @_stephenhubbard Год назад +11

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

  • @studio_buehler
    @studio_buehler Год назад +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  Год назад +10

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

  • @PrismaticaDev
    @PrismaticaDev 11 месяцев назад +6

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

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

  • @Pallerim
    @Pallerim Год назад +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!

  • @Cebbinghaus
    @Cebbinghaus 11 месяцев назад +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 Год назад +6

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

  • @nomadicjester
    @nomadicjester 2 месяца назад

    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 7 месяцев назад

    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.

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

  • @shukarullahshah
    @shukarullahshah Год назад +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!

  • @5gonza541
    @5gonza541 11 месяцев назад +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!

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

  • @zjott4z
    @zjott4z 11 месяцев назад

    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

  • @Soraphis91
    @Soraphis91 11 месяцев назад

    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.

  • @RichardRichyRichington
    @RichardRichyRichington 2 месяца назад

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

  • @Andrew90046zero
    @Andrew90046zero 3 месяца назад +1

    Awesome to see another person doing chunk loading in Unity!

  • @_jonathancollins
    @_jonathancollins Год назад +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 3 месяца назад

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

  • @justmehere_
    @justmehere_ 11 месяцев назад

    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.

  • @RDPolarity
    @RDPolarity 11 месяцев назад +2

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

  • @IceForgeOfficial
    @IceForgeOfficial 8 месяцев назад

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

  • @dampfwatze
    @dampfwatze 11 месяцев назад +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.

  • @hahah4968
    @hahah4968 Год назад +1

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

  • @Power0fM
    @Power0fM 10 месяцев назад

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

  • @kadir0001
    @kadir0001 11 месяцев назад

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

  • @TejPandit11
    @TejPandit11 10 месяцев назад

    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 🙂

  • @darenn-keller
    @darenn-keller 11 месяцев назад +1

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

    • @jesscodes
      @jesscodes  11 месяцев назад +2

      Thanks so much, Darenn! :D

  • @yahiiia9269
    @yahiiia9269 Год назад +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.

  • @mpazik67
    @mpazik67 10 месяцев назад

    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 10 месяцев назад

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

  • @akinma
    @akinma 10 месяцев назад

    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!

  • @JoaquinMarcher
    @JoaquinMarcher 11 месяцев назад

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

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

  • @bitofalice
    @bitofalice 11 месяцев назад

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

  • @octia2817
    @octia2817 Год назад +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.

  • @i_am_set
    @i_am_set Год назад +1

    Wtf this game looks actually so good

  • @SentientNr6
    @SentientNr6 11 месяцев назад

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

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

  • @anlkoroglu3114
    @anlkoroglu3114 11 месяцев назад

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

  • @ronantremoureux3743
    @ronantremoureux3743 11 месяцев назад

    Realy cool texturing process, waiting for the next video !

  • @shadamethyst1258
    @shadamethyst1258 11 месяцев назад

    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!

  • @bike_n_fish
    @bike_n_fish Год назад

    I can suggest you a technic which is pretty cool in my opinion :
    Generate a black and white texture from code, wich is an aproximation of the shore (1 pixel can be a tile and a white pixel is a pixel between water and sand) then you can use shader graph to scale this texture in eight direction. If you generate another texture representing the ground, and you use this one to mask the previous one, you can have a growing wave of the size you want ! (You'll obviously need some tweaks to hide glitches)
    But having waves comming 5 meters from the ocean can be really cool

  • @verd7719
    @verd7719 11 месяцев назад +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.

  • @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 11 месяцев назад

      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.

  • @molehorde
    @molehorde 3 месяца назад

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

  • @guilhermeviana892
    @guilhermeviana892 10 месяцев назад

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

  • @Alex_dlc
    @Alex_dlc 11 месяцев назад

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

  • @abf94y
    @abf94y 11 месяцев назад

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

  • @SomeRandomPersonWhoDrawsStuff
    @SomeRandomPersonWhoDrawsStuff 3 месяца назад

    I can feel the hours of work put in to this game your making good 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

  • @Daragni
    @Daragni 11 месяцев назад

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

  • @vraisairs9201
    @vraisairs9201 Год назад +1

    Really great. Thanks for sharing your process

  • @samhblackmore
    @samhblackmore 11 месяцев назад

    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!

  • @unknown-kj4qp
    @unknown-kj4qp 11 месяцев назад

    I think using Shader Graph greatly improved the legibility of the explanation over showing stuff in code

  • @KevEatsCheese
    @KevEatsCheese Год назад

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

  • @Undeadrulerofearth
    @Undeadrulerofearth 10 месяцев назад

    This looks incredible, would love to see this added to Steam!

  • @erfansh1925
    @erfansh1925 Год назад

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

  • @Zectifin
    @Zectifin 11 месяцев назад

    this game is looking adorable. I would love a procedurally generated game like stardew.

  • @Rafix
    @Rafix 11 месяцев назад

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

  • @FelipeAndrade10
    @FelipeAndrade10 Год назад +1

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

  • @thommekm
    @thommekm 11 месяцев назад

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

  • @scevvin7788
    @scevvin7788 11 месяцев назад

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

  • @alexandre2bi554
    @alexandre2bi554 Год назад +3

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

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

  • @Hades948
    @Hades948 11 месяцев назад

    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.

  • @Ok_HelloThere
    @Ok_HelloThere 11 месяцев назад

    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.

  • @tribbinvw
    @tribbinvw 10 месяцев назад +1

    A near 10% like/views ratio and even more subscribers than likes with only one video.
    You're on to something here.

  • @fralid95
    @fralid95 11 месяцев назад

    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

  • @darkside3ng
    @darkside3ng 11 месяцев назад

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

  • @CubsYT
    @CubsYT 11 месяцев назад +1

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

  • @olpacheco
    @olpacheco Год назад

    This game looks so beatiful!
    Doesnt matter what it is about, just let me play it!

  • @jooch_exe
    @jooch_exe 10 месяцев назад

    Very nice and clear project, result feels believable/tangible. Now I'm curious about "Economy Evolution Simulator" 🙂

  • @bilel114
    @bilel114 11 месяцев назад

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

  • @Orblets
    @Orblets Год назад

    Excuse me! Mam Miss Mam! This is your first video? Holy crap, absolutely killed it!
    Granted a lot of what you said flew clean over my head but it was enjoyable nonetheless. Excited for updates to come!

  • @claytonharting9899
    @claytonharting9899 10 месяцев назад

    That’s an incredible shader, it looks very nice

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

  • @09AJY
    @09AJY 11 месяцев назад

    I'm ready to see more of this project !

  •  11 месяцев назад

    I'm coding a similar game since 2021. Thanks for these helpful tips (even though I don't use Unity).

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

  • @sidhenidonz
    @sidhenidonz 10 месяцев назад

    incredible! i've only ever dabbled in Unity but this makes me wanna try game dev

  • @its_appl
    @its_appl 11 месяцев назад

    Wow this is gorgeous. Cant wait to see more!

  • @mellowmind_dev
    @mellowmind_dev 11 месяцев назад

    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.

  • @jamjam.100
    @jamjam.100 10 месяцев назад

    Definitely looking forward to these videos!

  • @EthMiC_
    @EthMiC_ Год назад

    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

  • @byronmorley2907
    @byronmorley2907 11 месяцев назад

    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