Skip to content

Instantly share code, notes, and snippets.

@belzecue

belzecue/1-pico8-godot-shader.shader

Forked from stephanbogner/1-pico8-godot-shader.shader
Created November 28, 2024 15:29
Show Gist options
  • Save belzecue/17704fe12490740bdd30839508444c86 to your computer and use it in GitHub Desktop.
Save belzecue/17704fe12490740bdd30839508444c86 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @stephanbogner stephanbogner revised this gist Jun 12, 2021. 1 changed file with 5 additions and 9 deletions.
    14 changes: 5 additions & 9 deletions 1-pico8-godot-shader.shader
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,6 @@ shader_type canvas_item;
    uniform float shaderStrength = 1.0;

    // The colors which all colors will be mapped to, in this case the PICO8 color palette (https://lospec.com/palette-list/pico-8-secret-palette)
    // Use the .html file in this gist to generate that from any list of HEX colors (e.g. gorgeous palettes at https://lospec.com/palette-list)
    // --- The color pallette ---
    uniform vec4 color_1 = vec4(0, 0, 0, 1.0);
    uniform vec4 color_2 = vec4(0.114, 0.169, 0.325, 1.0);
    @@ -52,21 +51,18 @@ void fragment(){
    vec4 colors[32] = {color_1, color_2, color_3, color_4, color_5, color_6, color_7, color_8, color_9, color_10, color_11, color_12, color_13, color_14, color_15, color_16, color_17, color_18, color_19, color_20, color_21, color_22, color_23, color_24, color_25, color_26, color_27, color_28, color_29, color_30, color_31, color_32};
    // ---------------------------

    vec4 temp = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);
    // If used on a viewportContainer:
    // vec4 temp = textureLod(TEXTURE, UV, 0.0);
    // Via https://docs.godotengine.org/en/stable/tutorials/viewports/custom_postprocessing.html#single-pass-post-processing
    vec4 current_color = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);

    float min_diff = 1000.0;
    vec4 min_color = vec4(0.0, 0.0, 0.0, 1.0);
    vec4 shader_color = vec4(0.0, 0.0, 0.0, 1.0);

    for(int i=0; i < colors.length(); i++){
    float curr_dist = distance(colors[i], temp);
    float curr_dist = distance(colors[i], current_color);
    if(curr_dist < min_diff){
    min_diff = curr_dist;
    min_color = colors[i];
    shader_color = colors[i];
    }
    }
    vec4 new_color = min_color * shaderStrength + temp * (1.0 - shaderStrength);
    vec4 new_color = shader_color * shaderStrength + current_color * (1.0 - shaderStrength);
    COLOR.rgb = new_color.rgb;
    }
  2. @stephanbogner stephanbogner revised this gist Jun 9, 2021. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions 1-pico8-godot-shader.shader
    View file
    Original file line number Diff line number Diff line change
    @@ -53,6 +53,9 @@ void fragment(){
    // ---------------------------

    vec4 temp = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);
    // If used on a viewportContainer:
    // vec4 temp = textureLod(TEXTURE, UV, 0.0);
    // Via https://docs.godotengine.org/en/stable/tutorials/viewports/custom_postprocessing.html#single-pass-post-processing

    float min_diff = 1000.0;
    vec4 min_color = vec4(0.0, 0.0, 0.0, 1.0);
  3. @stephanbogner stephanbogner revised this gist Jun 9, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 1-pico8-godot-shader.shader
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    shader_type canvas_item;

    // The shader strength which between 0 (not applied) and 1 (fully applied) because I want to fade the shader in and out
    // Can be changed from node `via get_material().set_shader_param("shaderStrength", newValue)`
    // Can be changed from node via `get_material().set_shader_param("shaderStrength", newValue)`
    uniform float shaderStrength = 1.0;

    // The colors which all colors will be mapped to, in this case the PICO8 color palette (https://lospec.com/palette-list/pico-8-secret-palette)
  4. @stephanbogner stephanbogner revised this gist Jun 9, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions 1-pico8-godot-shader.shader
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,7 @@ shader_type canvas_item;
    uniform float shaderStrength = 1.0;

    // The colors which all colors will be mapped to, in this case the PICO8 color palette (https://lospec.com/palette-list/pico-8-secret-palette)
    // Use the .html file in this gist to generate that from any list of HEX colors (e.g. gorgeous palettes at https://lospec.com/palette-list)
    // --- The color pallette ---
    uniform vec4 color_1 = vec4(0, 0, 0, 1.0);
    uniform vec4 color_2 = vec4(0.114, 0.169, 0.325, 1.0);
  5. @stephanbogner stephanbogner revised this gist Jun 9, 2021. 2 changed files with 0 additions and 0 deletions.
    0 pico8-godot-shader.shader → 1-pico8-godot-shader.shader
    View file
    File renamed without changes.
    0 z-get-shader-code-snippet-for-godot.html → 2-get-shader-code-snippet-for-godot.html
    View file
    File renamed without changes.
  6. @stephanbogner stephanbogner renamed this gist Jun 9, 2021. 1 changed file with 0 additions and 0 deletions.
    0 get-shader-code-snippet-for-godot.html → z-get-shader-code-snippet-for-godot.html
    View file
    File renamed without changes.
  7. @stephanbogner stephanbogner created this gist Jun 9, 2021.
    130 changes: 130 additions & 0 deletions get-shader-code-snippet-for-godot.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,130 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Generate shader code snippets for use in Godot</title>
    </head>

    <body>
    <h1>Generate shader code snippets for use in Godot</h1>
    Note! Edit the color palettes used in the source code of this html

    <h3>The code for the block with "// --- The color pallette ---"</h3>
    <textarea id="output_palette" style="max-width:600px; width:100%; height: 300px;"></textarea>
    <h3>The code for the block "// --- Referencing the colors ---"</h3>
    <textarea id="output_referencing" style="max-width:600px; width:100%; height: 100px;"></textarea>

    <script type="text/javascript">
    const pico8ColorPalette = [
    '#000000',
    '#1D2B53',
    '#7E2553',
    '#008751',
    '#AB5236',
    '#5F574F',
    '#C2C3C7',
    '#FFF1E8',
    '#FF004D',
    '#FFA300',
    '#FFEC27',
    '#00E436',
    '#29ADFF',
    '#83769C',
    '#FF77A8',
    '#FFCCAA',
    '#291814',
    '#111D35',
    '#422136',
    '#125359',
    '#742F29',
    '#49333B',
    '#A28879',
    '#F3EF7D',
    '#BE1250',
    '#FF6C24',
    '#A8E72E',
    '#00B543',
    '#065AB5',
    '#754665',
    '#FF6E59',
    '#FF9D81',
    ]

    const gameBoyPalette1 = [
    '#032824',
    '#285936',
    '#FD5070',
    '#FCDFEA'
    ]

    const gameBoyPalette2 = [
    '#E1F0E8',
    '#A9C0B1',
    '#527869',
    '#193030'
    ]

    const otherPalette = [
    '#FC7E1C',
    '#EBCD9E',
    '#562342',
    '#A78163',
    '#A9CC98',
    '#2C503C'
    ]

    getCodeForPalette(pico8ColorPalette)

    function getCodeForPalette(palette) {
    let outputPalette = '';
    let outputReferencing = 'vec4 colors[' + palette.length + '] = {';
    let variables = [];
    for (let index in palette) {
    const hex = palette[index];
    const rgb = hexToRGB(hex);
    const colorVarName = 'color_' + roundTo(Number(index) + 1)
    const rgbShader =
    outputPalette += 'uniform vec4 ' + colorVarName + ' = vec4(' + roundTo(rgb.r / 255) + ', ' + roundTo(rgb.g / 255) + ', ' + roundTo(rgb.b / 255) + ', 1.0);\n'
    variables.push(colorVarName)
    }
    outputReferencing += variables.join(', ');
    outputReferencing += '};'
    document.getElementById('output_palette').value = outputPalette;
    document.getElementById('output_referencing').value = outputReferencing;
    }

    function roundTo(value, precision = 3) {
    const multiplier = Math.pow(10, precision);
    return Math.round(value * multiplier) / multiplier;
    }

    //Via https://www.tutorialspoint.com/hexadecimal-color-to-rgb-color-javascript
    function hexToRGB(hex) {
    let r = 0,
    g = 0,
    b = 0;
    // handling 3 digit hex
    if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
    // handling 6 digit hex
    } else if (hex.length == 7) {

    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
    };

    return {
    r: +r,
    g: +g,
    b: +b
    };
    }
    </script>
    </body>

    </html>
    68 changes: 68 additions & 0 deletions pico8-godot-shader.shader
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    // Adapted from "How to Limit Color Output with Shaders in Godot"
    // By TheBuffED
    // On https://www.youtube.com/watch?v=Scrdv4oSeNw

    // Type of shader https://docs.godotengine.org/en/3.0/tutorials/shading/shading_language.html#shader-types
    shader_type canvas_item;

    // The shader strength which between 0 (not applied) and 1 (fully applied) because I want to fade the shader in and out
    // Can be changed from node `via get_material().set_shader_param("shaderStrength", newValue)`
    uniform float shaderStrength = 1.0;

    // The colors which all colors will be mapped to, in this case the PICO8 color palette (https://lospec.com/palette-list/pico-8-secret-palette)
    // --- The color pallette ---
    uniform vec4 color_1 = vec4(0, 0, 0, 1.0);
    uniform vec4 color_2 = vec4(0.114, 0.169, 0.325, 1.0);
    uniform vec4 color_3 = vec4(0.494, 0.145, 0.325, 1.0);
    uniform vec4 color_4 = vec4(0, 0.529, 0.318, 1.0);
    uniform vec4 color_5 = vec4(0.671, 0.322, 0.212, 1.0);
    uniform vec4 color_6 = vec4(0.373, 0.341, 0.31, 1.0);
    uniform vec4 color_7 = vec4(0.761, 0.765, 0.78, 1.0);
    uniform vec4 color_8 = vec4(1, 0.945, 0.91, 1.0);
    uniform vec4 color_9 = vec4(1, 0, 0.302, 1.0);
    uniform vec4 color_10 = vec4(1, 0.639, 0, 1.0);
    uniform vec4 color_11 = vec4(1, 0.925, 0.153, 1.0);
    uniform vec4 color_12 = vec4(0, 0.894, 0.212, 1.0);
    uniform vec4 color_13 = vec4(0.161, 0.678, 1, 1.0);
    uniform vec4 color_14 = vec4(0.514, 0.463, 0.612, 1.0);
    uniform vec4 color_15 = vec4(1, 0.467, 0.659, 1.0);
    uniform vec4 color_16 = vec4(1, 0.8, 0.667, 1.0);
    uniform vec4 color_17 = vec4(0.161, 0.094, 0.078, 1.0);
    uniform vec4 color_18 = vec4(0.067, 0.114, 0.208, 1.0);
    uniform vec4 color_19 = vec4(0.259, 0.129, 0.212, 1.0);
    uniform vec4 color_20 = vec4(0.071, 0.325, 0.349, 1.0);
    uniform vec4 color_21 = vec4(0.455, 0.184, 0.161, 1.0);
    uniform vec4 color_22 = vec4(0.286, 0.2, 0.231, 1.0);
    uniform vec4 color_23 = vec4(0.635, 0.533, 0.475, 1.0);
    uniform vec4 color_24 = vec4(0.953, 0.937, 0.49, 1.0);
    uniform vec4 color_25 = vec4(0.745, 0.071, 0.314, 1.0);
    uniform vec4 color_26 = vec4(1, 0.424, 0.141, 1.0);
    uniform vec4 color_27 = vec4(0.659, 0.906, 0.18, 1.0);
    uniform vec4 color_28 = vec4(0, 0.71, 0.263, 1.0);
    uniform vec4 color_29 = vec4(0.024, 0.353, 0.71, 1.0);
    uniform vec4 color_30 = vec4(0.459, 0.275, 0.396, 1.0);
    uniform vec4 color_31 = vec4(1, 0.431, 0.349, 1.0);
    uniform vec4 color_32 = vec4(1, 0.616, 0.506, 1.0);

    // ---------------------------

    void fragment(){
    // --- Referencing the colors ---
    vec4 colors[32] = {color_1, color_2, color_3, color_4, color_5, color_6, color_7, color_8, color_9, color_10, color_11, color_12, color_13, color_14, color_15, color_16, color_17, color_18, color_19, color_20, color_21, color_22, color_23, color_24, color_25, color_26, color_27, color_28, color_29, color_30, color_31, color_32};
    // ---------------------------

    vec4 temp = textureLod(SCREEN_TEXTURE, SCREEN_UV, 0.0);

    float min_diff = 1000.0;
    vec4 min_color = vec4(0.0, 0.0, 0.0, 1.0);

    for(int i=0; i < colors.length(); i++){
    float curr_dist = distance(colors[i], temp);
    if(curr_dist < min_diff){
    min_diff = curr_dist;
    min_color = colors[i];
    }
    }
    vec4 new_color = min_color * shaderStrength + temp * (1.0 - shaderStrength);
    COLOR.rgb = new_color.rgb;
    }