Search Unity

2D water shader pixel art HELP

Discussion in '2D' started by Irzio, Sep 28, 2022.

  1. Irzio

    Irzio

    Joined:
    Feb 25, 2021
    Posts:
    3
    Hello, I watched a video about how to use a shader in top down pixel art but the shader is in GLSL and made with Godot. Can someone help me to know how to implement this method in shader graph or some optimal way to do it in Unity? Thank you very much!

    This is the video:

    The intention is to create something very similar to this:


    And the shader code:

    shader_type canvas_item;

    uniform vec4 color : hint_color = vec4(0.16, 0.3, 0.58, 1.0);
    uniform float translucency = 0.8;
    uniform vec4 foam_color : hint_color = vec4(1, 1, 1, 0.8);

    varying vec2 vert;

    void vertex() {
    vert = VERTEX;
    }

    void fragment() {
    vec4 input = texture(TEXTURE, UV);

    if (input.a == 0.0) {
    COLOR = input;

    } else {
    // Waves/rippling
    vec2 tiled_uvs = UV * 100.0;
    vec2 displacement = vec2(
    cos(TIME * 5.0 + tiled_uvs.x + tiled_uvs.y) * 0.002,
    cos(TIME * 0.1 + tiled_uvs.x + tiled_uvs.y) * 0.002
    );

    // Below the surface
    vec4 refraction = texture(SCREEN_TEXTURE, SCREEN_UV + displacement);
    // Weird stuff happens at the 0,0 seam
    if (vert.x < 1.0 || vert.y < 1.0) {
    refraction = texture(SCREEN_TEXTURE, SCREEN_UV);
    }

    // The actual water color is a mix of the surface and below
    vec4 water = mix(refraction, color, translucency);

    // To simulate waves we alternate between the red pixels
    // and the green pixels as the white foam
    bool use_red = int(TIME) % 2 == 0;

    // NOTE: green is "on top", meaning it is closer to the rocks/shore than
    // red so we need a special case to make sure green is transparent
    if (use_red) {
    if (input.r > 0.5) {
    COLOR = foam_color;
    } else if (input.b > 0.5) {
    COLOR = water;
    } else {
    COLOR = vec4(0);
    }
    } else {
    if (input.g > 0.5) {
    COLOR = foam_color;
    } else {
    COLOR = water;
    }
    }
    }
    }
     
  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    38,752
    Go start with some shader graph tutorials, build up from there.

    If that doesn't do it, there are a LOT of water tutorials for Unity all over the interwebs.

    Be sure to select tutorials no older than a few years, ideally, unless you can recognize deprecated things.

    Tutorials and example code are great, but keep this in mind to maximize your success and minimize your frustration:

    How to do tutorials properly, two (2) simple steps to success:

    Step 1. Follow the tutorial and do every single step of the tutorial 100% precisely the way it is shown. Even the slightest deviation (even a single character!) generally ends in disaster. That's how software engineering works. Every step must be taken, every single letter must be spelled, capitalized, punctuated and spaced (or not spaced) properly, literally NOTHING can be omitted or skipped.

    Fortunately this is the easiest part to get right: Be a robot. Don't make any mistakes.
    BE PERFECT IN EVERYTHING YOU DO HERE!!

    If you get any errors, learn how to read the error code and fix your error. Google is your friend here. Do NOT continue until you fix your error. Your error will probably be somewhere near the parenthesis numbers (line and character position) in the file. It is almost CERTAINLY your typo causing the error, so look again and fix it.

    Step 2. Go back and work through every part of the tutorial again, and this time explain it to your doggie. See how I am doing that in my avatar picture? If you have no dog, explain it to your house plant. If you are unable to explain any part of it, STOP. DO NOT PROCEED. Now go learn how that part works. Read the documentation on the functions involved. Go back to the tutorial and try to figure out WHY they did that. This is the part that takes a LOT of time when you are new. It might take days or weeks to work through a single 5-minute tutorial. Stick with it. You will learn.

    Step 2 is the part everybody seems to miss. Without Step 2 you are simply a code-typing monkey and outside of the specific tutorial you did, you will be completely lost. If you want to learn, you MUST do Step 2.

    Of course, all this presupposes no errors in the tutorial. For certain tutorial makers (like Unity, Brackeys, Imphenzia, Sebastian Lague) this is usually the case. For some other less-well-known content creators, this is less true. Read the comments on the video: did anyone have issues like you did? If there's an error, you will NEVER be the first guy to find it.

    Beyond that, Step 3, 4, 5 and 6 become easy because you already understand!

    Finally, when you have errors...

    Remember: NOBODY here memorizes error codes. That's not a thing. The error code is absolutely the least useful part of the error. It serves no purpose at all. Forget the error code. Put it out of your mind.

    The complete error message contains everything you need to know to fix the error yourself.

    The important parts of the error message are:

    - the description of the error itself (google this; you are NEVER the first one!)
    - the file it occurred in (critical!)
    - the line number and character position (the two numbers in parentheses)
    - also possibly useful is the stack trace (all the lines of text in the lower console window)

    Always start with the FIRST error in the console window, as sometimes that error causes or compounds some or all of the subsequent errors. Often the error will be immediately prior to the indicated line, so make sure to check there as well.

    All of that information is in the actual error message and you must pay attention to it. Learn how to identify it instantly so you don't have to stop your progress and fiddle around with the forum.


    The purpose of this forum is to assist people who are ready to learn by doing, and who are unafraid to get their hands dirty learning how to code, particularly in the context of Unity3D.

    This assumes you have at least written and studied some code and have run into some kind of issue.

    If you haven't even started yet, go check out some Youtube videos for whatever game design you have in mind. There are already many examples of the individual parts and concepts involved, as there is nothing truly new under the sun.

    If you just want someone to do it for you, you need go to one of these places:

    https://forum.unity.com/forums/commercial-job-offering.49/

    https://forum.unity.com/forums/non-commercial-collaboration.17/

    https://livehelp.unity.com/?keywords=&page=1&searchTypes=lessons