Video-Tutorial: Underwater Shader Effect

Discussion in 'Tutorials' started by TheMagician, Jun 20, 2016.

  1. TheMagician

    TheMagician Member

    Joined:
    Jun 20, 2016
    Posts:
    57
    GM Version: GameMaker Studio
    Target Platform: All (if the hardware supports shaders)
    Download: Finished Project File
    Links: Part 1 - Godray Shader --- Part 2 - Wave Distortion Shader

    Summary:
    This two-part video gives a quick overview of shaders and then uses two Shadertoy shaders (godray and wave distortion) to create a nice underwater effect.

    Tutorial:
    Check the links above to get to the two videos.

    In the first one we talk about shaders in general (just a quick overview) and then we have a look at how to adapt shaders from the website Shadertoy so they can be used in GameMaker. We walk through the most common compiler errors and how to fix them. Finally we pick a godray shader and adapt it for GM.

    In the second video we select a more complex wave distortion shader and talk about how you can feed the application surface (which contains the backgrounds and sprites) into the shader as a texture.

    In the end we have a nice underwater effect which looks much better in motion than in the following screenshot. Check out the beginning of the first video to see the end result in action.

    [​IMG]

    Have fun!
     
  2. NoobsWeStand

    NoobsWeStand Member

    Joined:
    Jun 20, 2016
    Posts:
    143
    This is fabulous!
    Thank you very much!
     
  3. Keano

    Keano Member

    Joined:
    Jun 20, 2016
    Posts:
    8
    Well Done, This was extremely helpful.
     
  4. Jaqueta

    Jaqueta Member

    Joined:
    Jun 23, 2016
    Posts:
    338
    Not only the effect is pretty nice, but the tutorial is great too!
     
  5. Silverfire

    Silverfire Member

    Joined:
    Jun 22, 2016
    Posts:
    16
    Very good tutorial with good info, thank you! I was able to apply the underwater shader to my project without difficulty.
     
  6. mattyalanestock

    mattyalanestock Member

    Joined:
    Aug 7, 2016
    Posts:
    12
    @TheMagician Because of your tutorial, I learned how to apply shaders and was able to code a similar shader! Thank you thank you!

    [​IMG]
     
    Last edited: Feb 16, 2017
  7. lolslayer

    lolslayer Member

    Joined:
    Jun 23, 2016
    Posts:
    651
    water under water?
     
    slojanko and Pingo like this.
  8. Pixelated_Pope

    Pixelated_Pope Member

    Joined:
    Jun 20, 2016
    Posts:
    766
    Pretty sure it's supposed to be a "heatwave" effect. And I think it looks pretty convincing.
     
  9. mattyalanestock

    mattyalanestock Member

    Joined:
    Aug 7, 2016
    Posts:
    12
    It's an oasis, though, I could totally see it what you mean. haha. Thank you! No, my game is not from Spongebob.
    I just think it's cool how versatile shaders can be if you learn how to use them effectively.
     
  10. lolslayer

    lolslayer Member

    Joined:
    Jun 23, 2016
    Posts:
    651
    \

    Explains, with a heatwave it shoulld also move up and down a little bit though

    And indeed, especially for 3D shaders come in really handy, you'll love it :)
     
  11. TheSly

    TheSly Member

    Joined:
    Jan 16, 2017
    Posts:
    731
    Great tutorial, thank you.

    I applied the shader to my underwater room, but the room is 2048x1024 and the view is 1280x720. I changed the post Draw shader_set_uniform_f and the rectangle both to larger resolutions, and I can get whole screen coverage, but what I want is the shader to be applied to the whole room, but not move when I move the player. I'm using the inbuilt object following in views, so not sure if that's causing me the problem.

    Any suggestions how I get the shader to not move when I move as it breaks the illusion?
     
  12. 2DKnights

    2DKnights Member

    Joined:
    Nov 6, 2016
    Posts:
    33
    Can you share how you got the wave effect to match your resolution
    ? my effect was too fine (it would wave pixels) when I went into full screen.
     
  13. LM_anthony

    LM_anthony Member

    Joined:
    Apr 10, 2017
    Posts:
    4
    Pretty cool tutorial, thanks!
     
  14. jswmusic

    jswmusic Member

    Joined:
    Jun 21, 2017
    Posts:
    10
    Sweet info cheers the lesson!
     
  15. steskle

    steskle Member

    Joined:
    Aug 8, 2017
    Posts:
    43
    It's a great tutorial, but did they change something about the shaders in Game Maker Studio 2?
    I followed it step by step but I just can't make it work.
    The screen remains black and glitchy.
     
  16. BlackRaw

    BlackRaw Member

    Joined:
    Aug 16, 2017
    Posts:
    6
    Well done, this was extremely helpful.
     
  17. Aton Yeh

    Aton Yeh Member

    Joined:
    Jan 7, 2017
    Posts:
    7
    Great! it's so useful!
     
  18. mark rob

    mark rob Member

    Joined:
    Dec 7, 2018
    Posts:
    7
    this really helps.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice