Jump to content
  • Advertisement
Sign in to follow this  
ShadowDancer90

Buttons like Starcraft?

This topic is 3256 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Somebody knows, how they made it(i mean buttons in ex. server selecting menu)? It isn't "position += 5", it's smthing diffrent. Look on this video, from 20:00: http://www.youtube.com/watch?gl=PL&hl=pl&v=r4ijwtGCaRg

Share this post


Link to post
Share on other sites
Advertisement
I'm not sure exactly what you're talking about (that video is only 7:00 long, so there's no "20:00") but my guess about what you're talking about is that they simply have two different images - an "unclicked" and a "clicked" image.

Share this post


Link to post
Share on other sites
You mean, how do they Get The Buttons to move in Fluently from Left to Center, Right to Center?

Just Move the Image a certain Number of Pixels every Frame, untill its in the position you want it.


//Fluid Movment
if(there has be 1 second since last update) //or Alternative
{
//Move the Image x Pixels on the X-Axis

}

//Change Text Color on mouseOver
if(The Mouse is Over the Image) //use the Rectange and MousePosition
{
Draw the Button using a Different Texture
}
else
{
Draw it using the Same Texture
}


Share this post


Link to post
Share on other sites
Oh, I see what you mean, like how they move in and out. Yeah, I'd say it's just position.x +/- 5 or whatever. They slow down as they reach the final location, so they probably just apply a deceleration when it gets close. Some pseudocode (simplified to just one direction, but it'll be same for both directions):


// curr = current position
// final = final position (where we want it to end up)
// dt = frame time (so 100*dt would result in a movement of 100 pixels per second)
float update(int curr, int final, float dt)
{
int distance = final - curr;
if (abs(distance) > 100) {
// more than 100 pixels, no deceleration
return (100 * (distance / abs(distance)) * dt);
} else {
return distance * dt;
}
}

Share this post


Link to post
Share on other sites
I know, but hmm it's diffrent. U can watch it on video. At start it moveing, but later slow down. But it isnt just Speed -= 5... I think it's some kind of function

Share this post


Link to post
Share on other sites
Quote:
Original post by ShadowDancer90
I know, but hmm it's diffrent. U can watch it on video. At start it moveing, but later slow down. But it isnt just Speed -= 5... I think it's some kind of function
Did you check my pseudocode? They just apply a deceleration when the buttons get close to their desired location.

Share this post


Link to post
Share on other sites
I think you're looking for 'ease' functions (ease-in, ease-out, ease-in-ease-out). These are usually simple non-linear mappings over a normalized range. There are different functions you can use for this; here are some examples (copy-and-pasted from my current project):

float EaseIn(float t)
{
return std::sin((t - 1.0f) * cml::constantsf::pi_over_2()) + 1.0f;
}

float EaseOut(float t)
{
return std::sin(t * cml::constantsf::pi_over_2());
}

float EaseInEaseOut(float t)
{
return (-std::cos(t * cml::constantsf::pi()) + 1.0f) * 0.5f;
}

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!