• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
ankhd

Advice on my CoolDownTimer effects

10 posts in this topic

Hi all.

I've been looking in to making a cooldown timer effect, When you press a button and it has the shading going around.

 

After my third go I think I found a good way to do it but some of the math like the atan2 im doing a flip on to get 360.

 

Ok I know angle's again why??? only thing I know I'm a Ex metal fabricator.

 

Any how the cooldown timer is in the pixel shader using the texture coords and I pass in a angle based on time 1 degree or more a second

depends on how fast you want it to spin(go around).

 

It looks like a mess is there a neater way of doing it.

 

What way would you try.

 

//heres the pixel shader this is my test code it works I display red for now for range between 0 and 180

and green when I flip the angle.

 

 

 

 

float4 DrawPStimer(GS_OUT pIn) : SV_TARGET

{

         float2 start = float2(0.0,0.0);//points up

         float currentangle = radians(345.0);

        //we need to turn the texture coords into a direction vector ???

        //texcoord need to be converted to its 0, 0 pos

        float2 e = float2(0.5,0.5);

        float2 t = pIn.texC - e;

        float2 p = normalize(start - t );

        float a2 = atan2(p.y, p.x);

        if(a2 <= currentangle && a2 > 0.0)

                return float4(1.0f, 0.0f, 0.0f, 1.0f);

       if(a2 <= 0)

      {

             if(a2+ radians(360) < currentangle)

                    return float4(0.0f, 1.0f, 0.0f, 1.0f);

       }

return float4(0.0f, 0.0f, 0.0f, 0.0f);

}

 

 

here is a image with the current angle set to 275

0 degrees is to the left 180 right

new image now

CoolDownTimer.jpg?psid=1

Edited by ankhd
0

Share this post


Link to post
Share on other sites

Hi. Thanks for the Ideas, I tryed them but I could not get them to work the same way with my new bit of code I could do the texc - 0.5.

your code works I ran that.

 

Heres the whole new code is there a way to use your float routine.

 

the c++ part updates the angle and converts it to rads now

/heres my new code. what tricks are there to turn this monster into a baby.??????

float2 start = float2(0.0f,0.0f);//points up


float4 sam = float4(0.0f, 0.0f, 0.0f, 1.0f);

float4 s = float4(0.0f, 0.0f, 0.0f, 1.0f);


//if we are at 360 then we just go standard colour the timer is up

if(currentangle >= radians(360.0))

{


return float4(0.0f, 0.0f, 0.0f, 0.0f);

}


//we need to turn the texture coords into a direction vector ???

//texcoord need to be converted to its 0, 0 pos

float2 t = pIn.texC - 0.5;

float2 p = normalize(start - t );

float a2 = atan2(p.y, p.x);

if(a2 <= currentangle && a2 > 0.0)

{

sam = gTex.Sample( TexS, pIn.texC ) * gSelectedColour;//the button has a selected colour add this before grey scale

s = float4(sam.r, sam.r, sam.r, gAlpha);

return s * intensity;


}


if(a2 <= 0)

{ if(a2+ radians(360) < currentangle)

{

sam = gTex.Sample( TexS, pIn.texC ) * gSelectedColour;

s = float4(sam.r, sam.r, sam.r, gAlpha);

return s * intensity;


}

}

return float4(0.0f, 0.0f, 0.0f, 0.0f);

Edited by ankhd
0

Share this post


Link to post
Share on other sites
The idea of my snippet was that you can now use that d value for further masking/lerping/whatever. Not sure I follow your code, maybe like so (after my snippet):
 
    // since you gonna use only one channel...
    float sam = Diffuse.Sample( Sampler, tex ).r * gSelectedColour.r;
    // ... swizzle that to all three channels. And combine d with alpha
    float4 s = float4(sam.rrr, gAlpha * d);        
    return s * intensity;        

PS: Please cleanup your code before posting (e.g. remove the commented statements) and use code tags wink.png
0

Share this post


Link to post
Share on other sites

Hi.

 

Thats some nice work unbird. I Thank you for your time.

 

I'm not totaly sure how your shader works but it does.

 

How would I go about making the pie shape have the original image colour and the lapsed time area grey scale.

 

I've changes it around but can't get it like my image.

 

I would really like to keep your antialiased version.

0

Share this post


Link to post
Share on other sites
Easy. Though to increase contrast I'd also darken it a bit
    // [ AA code like before ]	
    // original color
    float3 color = Diffuse.Sample(Sampler, tex).rgb;
    // grayscale version (aka intensity calculation)
    float gray = dot(color, float3(0.3, 0.59, 0.11));
    // darken 
    gray *= 0.6;
    // lerp the two colors.
    return float4(lerp(color.rgb, gray.rrr, alpha), 1);

PS:

I'm not totaly sure how your shader works but it does.

Shall I explain ?
2

Share this post


Link to post
Share on other sites

Hey again.

Yeah if you have the time my self and anyone who finds this post would love to here the facts behind the Magic.

 

I have 1 more question.

The cooldowntimers pixel shader is in a second pass and I am leaving the angle as a trigger not to render any thing and Im using this here

//needed here this pixel shader is called in a second pass and when the angle is 360 we don't render any thing at all
if(currentangle >= (360.0))
{
	clip(-1);
	return  float4(0.0f, 0.0f, 0.0f, 1.0f);//never gets here now
}


is it ok to use the clip function in this way.????

 

Heres the product I like it.......

CoolDownTimer2.jpg?psid=1

 

I've updated the shader

//this here needs the angle in degrees passed in to the shader
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
float4 DrawPStimer(GS_OUT pIn) : SV_TARGET
{
 // antialias transition width in pixels
    float Transition = 2.5;
    //pixel in texel size. Assuming we have a GUI-typical pixel perfect 
    // ortho projection this is just 1.0/width of your rectangle.
    float PixelSize =1.0/128.0;//image width

//if we are at 360 then we just go standard colour the timer is up
//needed here this pixel shader is called in a second pass and when the angle is 360 we don't render any thing at all
if(currentangle >= (360.0))
{
	clip(-1);
	return  float4(0.0f, 0.0f, 0.0f, 1.0f);
}

    // normalized point coordinate (2D homogenous for plane evaluation) 
    float3 p = float3(pIn.texC - 0.5, 1);	
    
    // first plane for 2D plane equation (a*x + b*y + c), depends on the cooldown angle
    float3 plane1;
    sincos(radians(-currentangle), plane1.x, plane1.y);//flipped here
    // plane offset to avoid later bleed (just found through trial and error by playing with tweak UI)
    float offset = lerp(0, 2 * Transition, saturate(currentangle / 180.0 - 1));
    // c value of plane equation:
    plane1.z = offset * PixelSize;
    
    // estimate distance to plane using pixel size
    float dist1 = dot(plane1, p) / PixelSize;
    // ... to calculate a anti-alias transition value
    float fade1 = saturate(dist1 / Transition);
    
    // second plane, fixed (horizontal)
    float3 plane2 = float3(0, -1, 0);	
    float dist2 = dot(plane2, p) / PixelSize;
    float fade2 = saturate(dist2  / Transition);
    
    float alpha;
    [flatten]
    if(currentangle < 180.0)
    {
    	// intersection of the two masks
    	alpha = min(fade1, fade2);
    }
    else
    {
    	// union of the two masks
    	alpha = max(fade1, fade2);		
    }
    // uncomment the following line if you want to see both planes in action
    // alpha = (fade1 + fade2) * 0.5;	
    
    // use this alpha for some effect, here just fade to black
    float4 color = gTex.Sample(TexS, pIn.texC);
    //return float4(color.rgb * alpha, 0.5);//gAlpha
//new gray scale around elapsed
//area the pie shape is image colour
// grayscale version (aka intensity calculation)
    float gray = dot(color, float3(0.3, 0.59, 0.11)) * intensity;
    // darken 
    gray *= 0.6;
    // lerp the two colors.
    return float4(lerp(color.rgb, gray.rrr, alpha), gAlpha);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
0

Share this post


Link to post
Share on other sites

Hey Thanys everyone.

 

excellent work on the explanation.

 

I'll do the clip(359.999 - currentangle); thing I reacon.

 

Why.??? the button image is drawn in the first pass. when the user presses the button it gets set to 1 degree and a buttonevent activated which does the timer update.

 

I have removed the gs it was there when I was trying the cool down by building circles(but I needed a packman). My google never showed me them links. I always use bad search terms.

 

Remove all my stuff and you would have a nice tutorial... cheers all.

Edited by ankhd
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0