Today I added some menu buttons with a cool-ish wiggle affect when they get clicked.
This commit is a bit complicated, but essentially I added four menu buttons that you can click on. When you do click on one, it wiggles before the screen goes to that option. If you “hover” over a button, then it gets bigger. These are a few things that I believe would be needed for any game, so I was adamant to include them here.
Consider this, in any game you play, a button may be there, but dimmed out because it is not available. Or perhaps it will toggle to a different color or shape. These are pretty important things in a game’s arsenal, so I wanted to work with and on them here.
I wont bore you with all the code, but you can check out my GitLab for all the details. However, earlier, when making the water drum bobble, I said that I could have just made a separate sprite for the different halves of the drum, and moved the top half instead of making separate sprites to show the motion. Well, to put that to practice, I did that here with these buttons.
Watch what happens when you click one:
if (m_Active) {
// Since the button was pressed, let’s do some motion!
m_Motion = m_Motion + elapsedTime;
float motionCount = m_Motion;if (motionCount == 1) {
m_Position.x = m_Position.x + 2.5;
m_Position.y = m_Position.y + 2.5;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .15) {
m_Position.x = m_Position.x + 2.5;
m_Position.y = m_Position.y + 2.5;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .30) {
m_Position.x = m_Position.x – 5.0;
m_Position.y = m_Position.y – 5.0;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .45) {
m_Position.x = m_Position.x + 5.0;
m_Position.y = m_Position.y;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .60) {
m_Position.x = m_Position.x – 5.0;
m_Position.y = m_Position.y + 5.0;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .75) {
m_Position.x = m_Position.x + 2.5;
m_Position.y = m_Position.y + 2.5;
m_Sprite.setPosition(m_Position);
} else if (motionCount <= .90) {
m_Position.x = m_Position.x;
m_Position.y = m_Position.y -5.0;
m_Sprite.setPosition(m_Position);
} else {
m_Position.x = m_Position.x;
m_Position.y = m_Position.y;
m_Sprite.setPosition(m_Position);
}
} else {// What else do we need to do with this?
}
As you can see, I am using the accumulative time (given in fractions of seconds, sent every frame) to control the direction and movement of the button. As it sits now, the button goes up and right, down and left, to the right, up and left, down, and then back to center before it is done with it’s “pressed” function. You could make this random, or what every you like, I just kept it simple with a set pattern.
Interesting to note, the button doesn’t always end up perfectly back at the start this way. Why is that? Well, because every frame may take different lengths of time, it may do more frames in the up and to the right section than the number of frames it takes for the down and to the left section.
A good clean up for this would be to set the button back to it’s original position when done, rather than letting it end where it was. However, after clicking the button, the screen changes, so I didn’t need to worry about that.
Be sure to check out the game! Freestyle is more or less playable at present. Just drumming around!
Linux – keep it simple.