Public Group

# Buttons like Starcraft?

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

## 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 on other sites
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 on other sites
Wah soz, i mean 0:20 ;F This buttons moving on screen from left and right. How to make it?

##### 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 Movmentif(there has be 1 second since last update)   //or Alternative{    //Move the Image x Pixels on the X-Axis   }//Change Text Color on mouseOverif(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 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 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 on other sites
Quote:
 Original post by ShadowDancer90I 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 on other sites
Ach, sorry we posted in this same time ;D

Thanks for your help! What kind of algorithm is it?

##### Share on other sites
You could also make them decelerate by using a sine function.

##### 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;}

1. 1
2. 2
3. 3
Rutin
12
4. 4
5. 5

• 26
• 10
• 9
• 9
• 11
• ### Forum Statistics

• Total Topics
633695
• Total Posts
3013382
×