Skip to content

Shader Wrapper for Stylegrounds

JaThePlayer edited this page Dec 1, 2023 · 3 revisions

Shader Wrapper

The Shader Wrapper styleground allows you to apply shaders to other stylegrounds.

Setup

This guide assumes you already followed the Shader Starter Guide, and know how to add a shader to the game.

First, add a Shader Wrapper in the styleground window, like any other styleground.

  • The Shader property is the path to your shader, in the same format as in the screenwide shader trigger from the starter guide.
  • The Wrapped Tag - all stylegrounds with this Tag will be affected by this wrapper.

Then, add the Wrapped Tag you chose into the Tag property of all styles you want to edit with this wrapper. All Wrapped stylegrounds will stop rendering themselves, and the wrapper will render them instead, all at once. This means that the location of the wrapped stylegrounds within the list relative to non-wrapped styles does not matter for render order, only the location of the Wrapper itself.

Effect code

The shaders for Shader Wrappers are pretty much the same as those for Screenwide shaders. As such, the same Boilerplate Shader code should be used.

The main difference is that SAMPLE_TEXTURE(text, uv) can only get the pixels of the wrapped stylegrounds, not the actual pixel rendered on screen. This is perfect, as it means you get a fully transparent color for all pixels which don't get filled in by those styles, making it easy to mask your shader to not render over the entire screen.

float dist(float2 p1, float2 p2) {
    float2 a = abs(p2 - p1);

    return sqrt(a.x*a.x + a.y*a.y);
}

float4 SpritePixelShader(float2 uv : TEXCOORD0) : COLOR0
{
    float2 center = float2(.5,.5);
    float4 color = SAMPLE_TEXTURE(text, uv);
    float timeScaled = Time * .35;

    float d = (timeScaled % 2.) / dist(uv, center);
    color.rgb = float3(
        color.r * d,
        color.g * 1. / d,
        color.b
    );

    return color;
}
Celeste.2023-12-01.16-13-33.mp4