Dynamically desaturating a sprite

[quasi slate]

Hello, I'm trying to "gray out" an element of my UI by desaturating it at runtime. I know that I'll need to use shaders for it, however I have never used shaders before.

More specifically, I want to desaturate the icon by say 80% on demand, without having to manually create pre-desaturated sprites.

This is how I currently draw the sprite on the UI:

function draw_skill_icon(skillID, xPos, yPos) {
    var spriteIndex = asset_get_index("s_skill_icon_" + skillID);
    var xyOffset = 1.1;
    var uiScale = global.uiData.scale;

    xPos = xyOffset * uiScale + xPos;
    yPos = xyOffset * uiScale + yPos;

    draw_sprite_ext(spriteIndex, image_index, xPos, yPos, image_xscale*uiScale, image_yscale*uiScale, image_angle, image_blend, image_alpha);
}

The attachment shows how the UI looks in game, it's made up of 3 layers in this order:

1. skill slot, (border and background)
2. skill icon (drawn using function above)
3. slot overlay (drawn over the skill icon)

Any tips on how I could implement this effect using shaders?

[deft flicker]

one of the easier shaders to write

https://www.youtube.com/watch?v=C0jKInZgcQw

this is the shader

shader_set_uniform_f(shader_get_uniform(Desaturation, "desaturateStrength"), desaturate_ammount)
draw_sprite...

shader_reset()

Desaturation is the shader asset name
desaturate_ammount is whatever variable in your code that determines desaturation amt

make sure you copy the shader code exactly
shaders aren't as forgiving as GML