FX circle

Forum for plugin, effect and behavior programmers. Please use the Help & Support forum for help using Construct.

Post » Thu Jun 05, 2008 9:44 pm

This is a quick example of how you could use an effect to replace a sprite with a procedual texture, this fx file makes a circle. This is unfinished in as much as it could be made to do things such as having a consistant line width, allow custom colours etc.

Hope someone finds it useful

[code:3skzwxbh]// AMS_Circle
// Mikiex
// PS 2.0
// Circle Maker Example.

//#CROSS-SAMPLING : changes Tex.xy.
//#PARAM float Cwidth 0.1 : Circle line width : Circle line width.
//#PARAM float edgefuzz 0.01 : edgefuzz : Fuzzyness of the edges.


// Parameter variables
float Cwidth;
float edgefuzz;


// Foreground texture
texture ForegroundTexture;

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

// Increments 1 per frame
float frameCounter;

//These are all constants from Construct
float boxLeft;
float boxRight;
float boxTop;
float boxBottom;
float pixelWidth;
float pixelHeight;
float hotspotX;
float hotspotY;
float boxWidth;
float boxHeight;
float angle;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{

// float4 jj = tex2D(foreground, Tex.xy); //we just ignore the original image
float tx = (Tex.x-boxLeft)/boxWidth; // make the box into U coords from 0 to 1
float ty = (Tex.y-boxTop)/boxHeight; // make the box into V coords from 0 to 1
float res = distance(0.5,float2(tx,ty)); // Use the distance function to create what looks like a radial gradient
float xfuzz = boxWidth*edgefuzz; // how fuzzy do we want the x edges
float yfuzz = boxHeight*edgefuzz; // how fuzzy do we want the y edges

float SS1 = 0.5; // this sets the smoothstep position
float SS2 = 0.5-Cwidth; // this is the inside smoothstep position

res = smoothstep(SS1,SS1-xfuzz,res)*smoothstep(SS2-yfuzz,SS2,res); // the magic of smoothstep!


float4 resr = {res,0,0,res}; // we pass the result to just the red channel and the alpha channel

return resr;
}

// ConstructEffect
technique ConstructEffect
{
pass p0
{
VertexShader = null;
PixelShader = compile ps_2_0 EffectProcess();
}
}[/code:3skzwxbh]
B
1
G
4
Posts: 4
Reputation: 1,033

Post » Thu Jun 05, 2008 9:52 pm

Hey, that's pretty cool. I like the softening of the edges. Mind if I include it in the next build?
Scirra Founder
B
359
S
214
G
72
Posts: 22,951
Reputation: 178,578

Post » Fri Jun 06, 2008 9:39 pm

You're welcome to do what you want with it :D

I wish I had more time to improve it, but I thought I would post it rather than just leave it sitting on my pc doing nothing.

You might be interested in : [url:3vb9jrso]http://accad.osu.edu/~smay/RManNotes/RegularPatterns/index.html[/url:3vb9jrso]
Its a page about regular patterns using Renderman shaders but they are very similar to HLSL.

Construct is cool btw :)
B
1
G
4
Posts: 4
Reputation: 1,033

Post » Fri Jul 11, 2008 10:06 pm

I recommend a slight modification to this effect - make it white instead of red. Then when it's paired with the tint effect, it can be made any color.

Modified part: From float4 resr = {res,0,0,res}; // we pass the result to just the red channel and the alpha channel

to

float4 resr = {res,res,res,res}; // we pass the result to all the channels

The edited .fx file:

// AMS_Circle
// Mikiex
// PS 2.0
// Circle Maker Example.

//#CROSS-SAMPLING : changes Tex.xy.
//#PARAM float Cwidth 0.1 : Circle line width : Circle line width.
//#PARAM float edgefuzz 0.01 : edgefuzz : Fuzzyness of the edges.


// Parameter variables
float Cwidth;
float edgefuzz;


// Foreground texture
texture ForegroundTexture;

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

// Increments 1 per frame
float frameCounter;

//These are all constants from Construct
float boxLeft;
float boxRight;
float boxTop;
float boxBottom;
float pixelWidth;
float pixelHeight;
float hotspotX;
float hotspotY;
float boxWidth;
float boxHeight;
float angle;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{

// float4 jj = tex2D(foreground, Tex.xy); //we just ignore the original image
float tx = (Tex.x-boxLeft)/boxWidth; // make the box into U coords from 0 to 1
float ty = (Tex.y-boxTop)/boxHeight; // make the box into V coords from 0 to 1
float res = distance(0.5,float2(tx,ty)); // Use the distance function to create what looks like a radial gradient
float xfuzz = boxWidth*edgefuzz; // how fuzzy do we want the x edges
float yfuzz = boxHeight*edgefuzz; // how fuzzy do we want the y edges

float SS1 = 0.5; // this sets the smoothstep position
float SS2 = 0.5-Cwidth; // this is the inside smoothstep position

res = smoothstep(SS1,SS1-xfuzz,res)*smoothstep(SS2-yfuzz,SS2,res); // the magic of smoothstep!


float4 resr = {res,res,res,res}; // we pass the result to all the channels

return resr;
}

// ConstructEffect
technique ConstructEffect
{
pass p0
{
VertexShader = null;
PixelShader = compile ps_2_0 EffectProcess();
}
}
Moderator
B
88
S
32
G
33
Posts: 3,005
Reputation: 27,432


Return to Construct engineering

Who is online

Users browsing this forum: No registered users and 0 guests