Drop Shadow 2

This forum is currently in read-only mode.
Replies Disabled
0 favourites
  • 7 posts
From the Asset Store
Cinematic Impacts, Risers, Whooshes, Drops
$14.99 USD
320 high-quality cinematic sound effects for trailers and game scenes.
MagicSoundEffects's avatar
MagicSoundEffects

  • I've modified the Drop Shadow fx file so that you can change the distance and blur of the shadow. It gives text a nice look if you set all the paramaters to 1.

    right click and save as to download: http://www.louisferina.com/games/Dropshadow2.fx

    The code is also below in case you just want to copy and paste it into your own fx file.

    // Dropshadow 2
// David Clark (edited by Louis Ferina)
// PS 2.0

//#CROSS-SAMPLING : reads pixels it may be writing.
//#BORDER-MODE : samples pixels outside bounding box
//#PARAM float offsetX 2.0 : X Offset: X offset of dropshadow.
//#PARAM float offsetY 2.0 : Y Offset: Y offset of dropshadow.
//#PARAM float blur 5.0 : Blur : Blur amount of dropshadow.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
    Texture = (ForegroundTexture);
    MinFilter = Point;
    MagFilter = Point;
    MipFilter = Point;
};

// Parameter variables
float offsetX;
float offsetY;
float pixelWidth;
float pixelHeight;
float blur;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
    // Add the front and back pixels
    float2 Tex2 = Tex;
    Tex2.x -= offsetX * pixelWidth;
    Tex2.y -= offsetY * pixelHeight;
    float4 here = tex2D(foreground, Tex2.xy);
    float4 left = tex2D(foreground, float2(Tex2.x - pixelWidth, Tex2.y));
    float4 right = tex2D(foreground, float2(Tex2.x + pixelWidth, Tex2.y));
    float4 top = tex2D(foreground, float2(Tex2.x, Tex2.y - pixelHeight));
    float4 bottom = tex2D(foreground, float2(Tex2.x, Tex2.y + pixelHeight));

    float4 result = (here + left + right + top + bottom )/ blur;
    float4 src = tex2D(foreground, Tex.xy);
    
    result.rgb = 0;
    
    return result * (1-src.a) + src;

}

// ConstructEffect
technique ConstructEffect
{
    pass p0
    {
        VertexShader = null;
        PixelShader = compile ps_2_0 EffectProcess();
    }
}
[/code:34gvb7eh]

  • Awesome!

    At first it bugged me that blur is actually the opacity of the shadow and thought it could be a mistake.

    Then I looked at the code and realized it's within my capacities, so I fixed it. I kept opacity, so now it's a drop shadow effect with opacity AND 5-tap variable-size blur:

    // Dropshadow blurred
// David Clark (edited by Louis Ferina, Jorge Fuente-Alba)
// PS 2.0

//#CROSS-SAMPLING : reads pixels it may be writing.
//#BORDER-MODE : samples pixels outside bounding box
//#PARAM float offsetX 5.0 : X Offset: X offset of dropshadow.
//#PARAM float offsetY 5.0 : Y Offset: Y offset of dropshadow.
//#PARAM float blur 2.5 : Blur : Blur amount of dropshadow.
//#PARAM float opacity 0.5 : Opacity : Opacity of dropshadow.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
    Texture = (ForegroundTexture);
    MinFilter = Point;
    MagFilter = Point;
    MipFilter = Point;
};

// Parameter variables
float offsetX;
float offsetY;
float pixelWidth;
float pixelHeight;
float blur;
float opacity;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
    // Add the front and back pixels
    float2 Tex2 = Tex;
    Tex2.x -= offsetX * pixelWidth;
    Tex2.y -= offsetY * pixelHeight;
    float4 here = tex2D(foreground, Tex2.xy)*0.25;
    float4 left = tex2D(foreground, float2(Tex2.x - (pixelWidth*blur), Tex2.y))*0.1875;
    float4 right = tex2D(foreground, float2(Tex2.x + (pixelWidth*blur), Tex2.y))*0.1875;
    float4 top = tex2D(foreground, float2(Tex2.x, Tex2.y - (pixelHeight*blur)))*0.1875;
    float4 bottom = tex2D(foreground, float2(Tex2.x, Tex2.y + (pixelHeight*blur)))*0.1875;

    float4 result = (here + left + right + top + bottom )* opacity;
    float4 src = tex2D(foreground, Tex.xy);
    
    result.rgb = 0;
    
    return result * (1-src.a) + src;

}

// ConstructEffect
technique ConstructEffect
{
    pass p0
    {
        VertexShader = null;
        PixelShader = compile ps_2_0 EffectProcess();
    }
}
[/code:wt3j76il]

This wouldn't have been possible without the original shader OR the edit. Props to David and Louis.
Also, the opacities were somewhat arbitrarily chosen, they're not mathematically correct (but they look good enough for me). Positions too are axis-aligned, which is bad. I'll update all of that once I read up on blur kernels.
Also: 5 tap only so don't go over 10 on blur size or you'll see banding. At size 2 it looks beYaootiful!

Now, this knowledge enables me to do that variable kernel-size blur I've been wanting. Coming soon!
Oh, example cap for dropshadow blurred:
[url]http://www.udec.cl/~jfuente_alba/dropshadow_blurred.cap[/url]

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • correction: opacity should be percent instead of float.

  • Hi

    I would like to modify this effect to create anew effet named :

    "Drop Isometric Shadow".

    The effect will be :

    Normal Dropshadow :

    <img src="http://blendman.free.fr/ark/construct/dropShadowNormal.jpg">

    IsoDropShadow :

    <img src="http://blendman.free.fr/ark/construct/dropShadowIso.jpg">

    Modification of the shadow :

    In fact, it seems to be easy : just to have a parameter which allow you to change the size of the shadow (in X, and Y).

    In my example, I have just change the size of Y of the shadow :

    normal 1:1

    iso 1:3 (1/3)

    So how can I do that with your code ? I have tried to do that , but it doesn't work.

    Here is the test I have made (buggued). I have add 2 news parameters :

    Size Y : it should change the Y size of the shadow, but in my code, it's buggued.

    Alpha-effect (of the original image, not for the shadow, which has opacity) : this effect allow you to change the alpha or add some effect to the image (not the sahdow)

        // Dropshadow isometric blurred
    // David Clark (edited by Louis Ferina, Jorge Fuente-Alba,)
    // PS 2.0

    //#CROSS-SAMPLING : reads pixels it may be writing.
    //#BORDER-MODE : samples pixels outside bounding box
    //#PARAM float offsetX 5.0 : X Offset: X offset of dropshadow.
    //#PARAM float offsetY 5.0 : Y Offset: Y offset of dropshadow.
	//#PARAM float sizeY 5.0 : Y Size: Ysize of dropshadow.
	//#PARAM float alpha 1.0 : alpha - effect: alpha effect of dropshadow.
    //#PARAM float blur 2.5 : Blur : Blur amount of dropshadow.
    //#PARAM float opacity 0.5 : Opacity : Opacity of dropshadow.

    // Foreground texture
    texture ForegroundTexture;

    // Foreground sampler
    sampler2D foreground = sampler_state {
        Texture = (ForegroundTexture);
        MinFilter = Point;
        MagFilter = Point;
        MipFilter = Point;
    };

    // Parameter variables
    float offsetX;
    float offsetY;
	float sizeY;
	float alpha;
    float pixelWidth;
    float pixelHeight;
    float blur;
    float opacity;

    // Effect function
    float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
    {
        // Add the front and back pixels
        float2 Tex2 = Tex;
		float2 Tex3 = Tex2;
        Tex2.x -= offsetX * pixelWidth;
		Tex2.y -= offsetY * pixelHeight;
		float4 here = tex2D(foreground, Tex2.xy)*0.25;
        float4 left = tex2D(foreground, float2(Tex2.x - (pixelWidth*blur), Tex2.y*sizeY))*0.1875;
        float4 right = tex2D(foreground, float2(Tex2.x + (pixelWidth*blur), Tex2.y*sizeY))*0.1875;
		float4 top = tex2D(foreground, float2(Tex2.x, Tex2.y*sizeY - (pixelHeight*blur)))*0.1875;
        float4 bottom = tex2D(foreground, float2(Tex2.x, Tex2.y*sizeY + (pixelHeight*blur)))*0.1875;

        float4 result = (here + left + right + top + bottom)* opacity;
        float4 src = tex2D(foreground, Tex.xy)*alpha;
				
        result.rgb = 0;
       
        return result * (1-src.a) + src;

    }

    // ConstructEffect
    technique ConstructEffect
    {
        pass p0
        {
            VertexShader = null;
            PixelShader = compile ps_2_0 EffectProcess();
        }
    }

[/code:3jw42yfp]

Thank you for help

  • Hey Guys...I am new to this. How do I take that code and apply it as a plugin in c2?

  • Hey Guys...I am new to this. How do I take that code and apply it as a plugin in c2?

    lol I have the same problem...

  • You don't. This is HLSL.

    Stuff made for CC can't be applied to C2, they're just simply different. Besides this thread dates way back to 2009, resurrecting threads this way is hardly ever fruitful.

Replies Disabled
  • 7 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)