Drop Shadow 2

Post your own tutorials, guides and demos.

Post » Thu May 21, 2009 4:00 pm

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: [url:34gvb7eh]http://www.louisferina.com/games/Dropshadow2.fx[/url:34gvb7eh]
The code is also below in case you just want to copy and paste it into your own fx file.

[code:34gvb7eh]
// 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]
B
77
S
49
G
24
Posts: 346
Reputation: 16,909

Post » Fri May 22, 2009 2:27 am

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:
[code:wt3j76il]// 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:wt3j76il]http://www.udec.cl/~jfuente_alba/dropshadow_blurred.cap[/url:wt3j76il]
B
3
S
2
G
4
Posts: 1,445
Reputation: 4,665

Post » Fri May 22, 2009 8:22 am

correction: opacity should be percent instead of float.
B
3
S
2
G
4
Posts: 1,445
Reputation: 4,665

Post » Wed May 12, 2010 10:53 am

Hi

I would like to modify this effect to create anew effet named :
"Drop Isometric Shadow".

The effect will be :

Normal Dropshadow :

IsoDropShadow :


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)

[code:3jw42yfp] // 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 :D
B
2
S
1
G
2
Posts: 23
Reputation: 846

Post » Fri Mar 15, 2013 7:41 am

Hey Guys...I am new to this. How do I take that code and apply it as a plugin in c2?
B
11
S
2
Posts: 65
Reputation: 1,396

Post » Sun Apr 28, 2013 3:06 pm

[QUOTE=E2GameStudios] Hey Guys...I am new to this. How do I take that code and apply it as a plugin in c2?[/QUOTE]

lol I have the same problem...
B
16
S
5
G
3
Posts: 47
Reputation: 2,276

Post » Sun Apr 28, 2013 5:53 pm

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.
B
11
S
2
G
3
Posts: 100
Reputation: 2,150


Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 1 guest