How to create a Gradient Sky Background for a 2D game in Unity (Shader Graph)

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

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

  • @tyh7388
    @tyh7388 2 года назад +5

    Exactly what I was looking for and it was easy to follow. Thanks a million!

  • @dominikstolarz2452
    @dominikstolarz2452 2 года назад +2

    Hi, this great tutorial, really appreciate it! I like that you explain every single thing you do, and this makes it easy to follow. Also you have a really calm voice haha

    • @ShapedByRainStudios
      @ShapedByRainStudios  2 года назад

      Thank you so much for the kind words and I'm really glad you found the tutorial helpful! I'm quite new to voiceover - so the 'calm voice' compliment means a lot, haha! 😁

    • @dominikstolarz2452
      @dominikstolarz2452 2 года назад

      @@ShapedByRainStudios Hi Trever, I have actually one question. After changing graphics pipeline to URP, Some basic sprites that have default materials (and this cannot be changed) are not rendering properly. In the end I had to resign with gradient. Do you have any solution to that?

    • @ShapedByRainStudios
      @ShapedByRainStudios  2 года назад

      @@dominikstolarz2452 Hey! To my knowledge, I don't believe there's a way to make a non-URP material (like the default sprite material) work with the URP. I could be wrong with that statement, but I know that I personally wasn't able to find a way when upgrading my own project and ended up converting everything over to URP materials.
      With that said, I also haven't come across a situation where the materials cannot be changed like you mentioned. Is there a specific reason to your project that you can't change them? Or are they just greyed out / seem like they can't be changed?
      If it's the latter, you might be able to change them still even though it doesn't seem like it at first glance. It depends on what you're creating a material for though and might require some Google searching.
      Here's a video that goes over upgrading an existing projects materials to the URP that I think explains it well. It might help with understanding why this happens with the URP and maybe even will give an idea of how you might be able to fix it in your project - ruclips.net/video/nB0r0c-SIVg/видео.html
      There are also materials in the Package/Universal RP/Runtime/Materials folder called Sprite-Lit and Sprite-Unlit that will work well for replacing the default material for sprites - assuming you can figure out how to change the material.
      Anyways - I hope that helps a bit! 🙂

    • @dominikstolarz2452
      @dominikstolarz2452 2 года назад

      @@ShapedByRainStudios Thank you for detailed answer. And when it comes to materials - every option is greyed out, cannot be selected. Anyway I think I will handle it someway. Thank you

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

    Awesome tutorial! Thank you, sir. Easy to follow. As you follow the tutorial, you should play with the different nodes to get a better grasp on their effects :)

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

    I love you for this thank you

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

    10:35 i was wondering, how to keep the new material lit by the global light source? once i drag and drop the new gradient material in the inspector, the tiles material changes to this gradient material. any suggestions?

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

      So basically i am trying to apply the gradient material as well as the sprite-lit-default material to the tile.

  • @cadafinn
    @cadafinn 4 месяца назад

    en un proximo tutorial nos puede enseñar como seguir el background al jugador como al inicio del juego

  • @uscn_
    @uscn_ Месяц назад

    the background in my game just stayed neon pink even after trying multiple times what do i do

  • @Felipe-yt5se
    @Felipe-yt5se 3 года назад +2

    If you guys having problems with the shader adapting to different screen sizes just change both position nodes (in shadergraph) to "view". Material parameters that work well for me are:
    TopOrigin 1.7
    BottomOrigin -7.4
    TopSpread 10
    TopColor 9

    • @Anerisian
      @Anerisian 2 года назад

      Try the UV node instead of position.

    • @Felipe-yt5se
      @Felipe-yt5se 2 года назад

      @@Anerisian Thanks this completely solved my issue. Works great for mobile devices

  • @ynoPyzarC
    @ynoPyzarC 3 года назад +1

    Thanks!

  • @Jono1982
    @Jono1982 3 года назад +1

    Could you please teach me how to add simple clouds next.

    • @ShapedByRainStudios
      @ShapedByRainStudios  3 года назад

      I don’t think I’ll get around to making a video for this too soon, but I’ll keep it in mind! 🙂 If you’re looking to do clouds like in the first clip of this video, it’s mostly a ‘Gaussian blur’ effect on a bunch of white ovals. I used Paint.NET to create the ovals and do the blur, which is a free program that’s kind of similar to Photoshop. I hope that helps a bit!

    • @Jono1982
      @Jono1982 3 года назад

      @@ShapedByRainStudios Would it be possible to make white clouds with a transparent background and overlay it on the gradient skybox so anywhere there are clouds become a darker colour?

    • @ShapedByRainStudios
      @ShapedByRainStudios  3 года назад

      @@Jono1982 Yup! That's actually exactly how I'm using it in those first couple clips of the video. 🙂 The clouds are just an overlay that sits in front of the background sprite.

  • @TheAsbj0rn
    @TheAsbj0rn 3 года назад +2

    This is a great tutorial and my material looks perfect, but when I apply it to a Quad it stays pitch black no matter what :/

    • @ShapedByRainStudios
      @ShapedByRainStudios  3 года назад

      Thank you for the kind words! 🙂
      My first thought is maybe it has something to do with lighting in the scene? Double check that your light source is effecting the layer that the Quad is on. Playing around with your light source and the Quads layer might be a good starting point for troubleshooting. It's also worth noting that you might need to use a different light type than I do in this tutorial, since I'm not sure if a Quad will get effected by the 2D lights.
      I also vaguely remember having a similar issue where the material was only showing up on one side of the thing I applied it to. So for example, you can try panning around your Quad to see if it's on the other side and then rotate it if it is (assuming you haven't already checked that out).
      I hope one of those things helps. Best of luck!

    • @TheAsbj0rn
      @TheAsbj0rn 3 года назад +1

      @@ShapedByRainStudios thank you for your response. I had set the positionelement to world space instead of local, so the gradient followed 0,0,0 and my quad was way below. It works now, thank you!

  • @ngjiayi2705
    @ngjiayi2705 2 года назад

    Have anyone tried making a gradient sky background that changes over time?