GLSL – Gary Michael Angelone Jr.

Ripple Shader

admin — Wed, 28 Jan 2026 21:18:56 +0000

Steven asked me to write a ripple effect shader for his upcoming shmup title for android and iOS.

Steven hat mich gebeten, einen Shader mit Schmelzeffekt für sein neues Shoot 'em up-Spiel für Android und iOS zu schreiben.

Steven mi ha chiesto di scrivere uno shader con effetto a catena per il suo prossimo titolo shmup per Android e iOS.

Copy to Clipboard

sampler2D background_texture : register(s1)  = sampler_state{
    AddressU = Clamp;
    AddressV = Clamp;
};

float freq;
float speed;
float amplitude ;
float centerx;
float centery;

float effect;

struct PS_INPUT
{
    float4 p : POSITION;
    float2 v_texcoord0 : TEXCOORD0;
};

struct PS_OUTPUT
{
    float4 c     : COLOR0;
};

PS_OUTPUT ps_main(PS_INPUT input)
{
    PS_OUTPUT output;

float2 center=float2(centerx,centery);

float2 toUV = input.v_texcoord0 - center;
    float distanceFromCenter = length(toUV);
    float2 normToUV = toUV / distanceFromCenter;

float wave = cos(freq * distanceFromCenter - speed * effect);
    float offset1 = effect * wave * amplitude;
    float offset2 = (1.0 - effect) * wave * amplitude;
    
    float2 newUV1 = center + normToUV * (distanceFromCenter + offset1);
    float2 newUV2 = center + normToUV * (distanceFromCenter + offset2);
    
    float4 c1 = tex2D(background_texture, newUV1); 
    float4 c2 = tex2D(background_texture, newUV2);

output.c=lerp(c1, c2, effect);

return output;
    
}

technique tech_main
{
    pass P0
    {
        VertexShader = NULL;
        PixelShader  = compile ps_2_a ps_main();
    }  
}

Sorry, your browser doesn't support embedded videos.

GitHub Project

Melt Shader

admin — Sat, 09 Mar 2024 20:53:30 +0000

Steven asked me to write a melting effect shader for his upcoming shmup title for android and iOS.

Steven hat mich gebeten, einen Shader mit Schmelzeffekt für sein neues Shoot 'em up-Spiel für Android und iOS zu schreiben.

Steven mi ha chiesto di scrivere uno shader con effetto di fusione per il suo prossimo titolo shmup per Android e iOS.

First, we sample the foreground and background textures.

Zuerst nehmen wir Proben der Vordergrund- und Hintergrundtexturen.

Per prima cosa, campioniamo le texture in primo piano e sullo sfondo.

Copy to Clipboard

Then we prepare the warp effect.

Dann bereiten wir den Warp-Effekt vor.

Quindi prepariamo l'effetto warp.

Copy to Clipboard

Apply the effect.

Wende den Effekt an.

Applica l'effetto.

Copy to Clipboard

Sorry, your browser doesn't support embedded videos.

GitHub Project

Shield Shader

admin — Sat, 09 Mar 2024 20:12:55 +0000

Steven asked me to write a shield shader for his upcoming shmup title for Android and iOS.

Steven hat mich gebeten, einen Shield-Shader für seinen kommenden Shmup-Titel für Android und iOS zu schreiben.

Steven mi ha chiesto di scrivere uno shader per il suo prossimo titolo shmup per Android e iOS.

First, we offset the texture coordinates.

Zunächst verschieben wir die Texturkoordinaten.

Per prima cosa, compensiamo le coordinate della texture.

Copy to Clipboard

Convert the bullet angle to radians.

Wandeln Sie den Geschosswinkel in Radianten um.

Converti l'angolo del proiettile in radianti.

Copy to Clipboard

Allow the hexagonal patterns to scroll.

Lassen Sie die sechseckigen Muster scrollen.

Consenti lo scorrimento dei motivi esagonali.

Copy to Clipboard

Initialize the shield colors.

Initialisieren Sie die Schildfarben.

Inizializza i colori dello scudo.

Copy to Clipboard

Make the gradients and clip within the sphere.

Erstellen Sie die Farbverläufe und schneiden Sie sie innerhalb der Kugel zu.

Crea le sfumature e ritaglia all'interno della sfera.

Copy to Clipboard

if (r <= 1.0){
      final = texture2D(img,Out.xy);
      vec4 tfinal = texture2D(tex,Out.xy);

vec2 pos_ndc = vec2(2.0 * textureCoordinate.x - 1.0,2.0 * textureCoordinate.y - 1.0);
      float dist = length(pos_ndc);

// GET HIT ANGLE
        vec2 ang=textureCoordinate.xy;
        ang.xy = vec2(ang.x - 0.5, ang.y - 0.5);
        float s = sin( hitangle );
        float c = cos( hitangle );
        mat2 rotationMatrix = mat2(c, -s, s, c);
        rotationMatrix *= 0.5f;
        rotationMatrix += 0.5f;
        rotationMatrix = rotationMatrix * 2.0f - 1.0f;
        ang = rotationMatrix * ang;
        ang.xy = vec2(ang.x + 0.5, ang.y + 0.5);
        float hitf = (hit*0.5);

// MAX ALPHA
        colorA.a = 1.0;
        colorB.a = 1.0;

// FADE GRADIENT
        float step1 = 0.0;
        float step2 = 1.0 - cover;
        float step3 = 1.0;

// MIX
        final *= mix(final, colorA, smoothstep(step1, step2*( 1.0 - hitf), dist));
        final = mix(final,tfinal*colorB,ang.x*hit);
        final *= mix(blank, final, smoothstep(step2*(1.0 - hitf), step3, dist));
  }

Sorry, your browser doesn't support embedded videos.

GitHub Project

Zen Shader

admin — Tue, 04 Oct 2022 13:45:23 +0000

Steven added a feature to the game that allows the player to meditate to gain spiritual powers.
He required an effect that would express a zen state.

Steven fügte dem Spiel eine Funktion hinzu, mit der der Spieler meditieren kann, um spirituelle Kräfte zu erlangen.
Er benötigte einen Effekt, der einen Zen-Zustand ausdrücken würde.

Steven ha aggiunto una funzione al gioco che permette al giocatore di meditare per acquisire poteri spirituali.
Aveva bisogno di un effetto che esprimesse uno stato zen.

Color warping of the background seemed to fit the requirement. I started by its texture and applying the effect.

Die Farbverzerrung des Hintergrunds schien den Anforderungen zu entsprechen. Ich begann mit der Textur und wandte den Effekt an.

La distorsione cromatica dello sfondo sembrava soddisfare il requisito. Ho iniziato dalla sua texture e ho applicato l'effetto.

Copy to Clipboard

For more impact, I separated the red, green and blue color channels.

Um eine stärkere Wirkung zu erzielen, habe ich die roten, grünen und blauen Farbkanäle voneinander getrennt.

Per ottenere un effetto più incisivo, ho separato i canali di colore rosso, verde e blu.

Copy to Clipboard

Sorry, your browser doesn't support embedded videos.

GitHub Project

Tree Auto-Animation Shader

admin — Mon, 03 Oct 2022 15:16:52 +0000

David was pressed for time. Our deadline was over a year away, but there would be much pixel art to complete. Animating trees per pixel is tedious work, especially since Steven's wind code would require multiple variants for each of the then static images. They approached me, hoping for a shader solution; that they might save time.

David stand unter Zeitdruck. Unsere Deadline war zwar noch über ein Jahr entfernt, aber es gab noch viel Pixelkunst zu erstellen. Das Animieren von Bäumen pro Pixel ist mühsame Arbeit, zumal Stevens Windcode mehrere Varianten für jedes der damals statischen Bilder erfordern würde. Sie wandten sich an mich in der Hoffnung auf eine Shader-Lösung, mit der sie Zeit sparen könnten.

David era a corto di tempo. La nostra scadenza era tra più di un anno, ma c'era ancora molta pixel art da completare. Animare gli alberi pixel per pixel è un lavoro noioso, soprattutto perché il codice del vento di Steven richiedeva diverse varianti per ciascuna delle immagini allora statiche. Mi hanno contattato sperando in una soluzione shader che potesse far loro risparmiare tempo.

Knowing the artist in David would still desire control over the result, I decided to use a sampled bitmap to grade the effect so that he could adjust the effect.

Da ich wusste, dass David als Künstler weiterhin die Kontrolle über das Ergebnis haben wollte, entschied ich mich, eine gesampelte Bitmap zu verwenden, um den Effekt zu bewerten, damit er ihn anpassen konnte.

Sapendo che l'artista che è in David avrebbe comunque desiderato avere il controllo sul risultato, ho deciso di utilizzare una bitmap campionata per graduare l'effetto in modo che potesse regolarlo.

Copy to Clipboard

I hooked up the values from Steven's code for the angle, frequency and amplitude of the wind.

Ich habe die Werte aus Stevens Code für den Winkel, die Frequenz und die Amplitude des Windes übernommen.

Ho inserito i valori dal codice di Steven per l'angolo, la frequenza e l'ampiezza del vento.

Copy to Clipboard

In my main program, I pushed the pixels according to their values and applied the amount based on the alpha channel from black to white.

In meinem Hauptprogramm habe ich die Pixel entsprechend ihren Werten verschoben und den Wert basierend auf dem Alphakanal von Schwarz bis Weiß angewendet.

Nel mio programma principale, ho spostato i pixel in base ai loro valori e ho applicato la quantità in base al canale alfa dal nero al bianco.

Copy to Clipboard

The effect was a little to blurry, so I stabilized the alpha output.

Der Effekt war etwas zu unscharf, daher habe ich die Alpha-Ausgabe stabilisiert.

L'effetto era un po' sfocato, quindi ho stabilizzato l'output alfa.

Copy to Clipboard

GitHub Project