Haider In this lecture, we'll be making our games main menu. So let's talk about the behavior of the menu buttons. First of all, this line indicates the exposition of the button. So now let me explain how the buttons will work. When you hover your mouse over a button, it should move smoothly to the right. And you should go back when you move your mouse away.

So we'll do this by creating a variable called target x. That variable will store the target x position for the button, so the button will smoothly move towards that target. So by default, the target x will be equal to xR. xR is the starting exposition of an instance. So when the mouse enters the button, target x will be set to xR plus 24. So the button will smoothly move there.

Now when the mouse leaves target x will be reset to xR, so the button will roll back to its original position. And we'll also have to program the buttons to move towards The target position as it's not automatic. So let's get to it. Here I've imported sprites for the three menu buttons. So the first one is the play button. The second one is the Help button.

And the third one is the quit button. So all of their origins should be set to top left. Now in the backgrounds I've also imported a background image for the menu. Now we'll right click in the workspace and close all the open windows. And now I'll go to rooms or right click on the room and rename it to Rm game. And now we'll create a new room.

I'll name it our menu. So this will be the main menu room. So I'll drag it and put it above our game. This way it'll open first when the game starts. Now I'll go to the properties. I'll change the room size to 280 by 720.

Now we'll click on the background layer here and assign a background image. Now I'll close it. And now I'll go to objects. First I'll create a new group called menu. In this group, I'll create an object and name it oh button parent. So this will be the parent object for all the menu buttons.

So we'll come back to this object later. For now I'll create a new object and name it over in play. This is the play button, so I'll assign the sprite to it. Now I'll add an event so I'll go in the mouse and select left breast. This event will run when you click your mouse on the button. So here I'll search go to an ad to go to room action.

This action changes the room. So I click here and select RM game. Now when you click on the Play button, the RM game room will open And the game will start. Now I'll add another object in the menu group, I'll name it over to hell. I'll assign the sprite I won't add a mouse event here because the Help button does nothing for now. Now I'll add another button object.

I'll name it overdone exit I'll set the sprite. Now here I'll add a mouse left pressed event. Here we need to add the exit game action. So this button will simply exit the game. And now we go back to our button parent. I'll open the parents menu, we want to add the other button objects as children.

So I'll select the three button objects by using the shift key. Then I'll drag them and drop them into the children area. So now all of these objects have overdone parent as they are Parents. Now we'll open the menu room and place the buttons. And now we'll close it. Now we'll add the creative and I'll add the Assign variable action here.

I'll create the variable target x and set its value to the starting exposition of the instance, in this case is where you base it in the room. Now I'll add an event. I'll go on the mouse and select mouse enter. This event runs when the mouse enters the stances area. So this way you can know whether the mouse is hovering over the instance. Now a lot of the Assign variable action, I'll enter target x here, I set its value to extra plus 24.

Now we'll click on Add event go into mouse and select mouse leave. This controls when the mouse leaves chances area Now I'll add the Assign variable action here, our reset target X to extra. Now our target exposition is being set correctly, so we need to make the button moves smoothly towards it. So for that I'll add the step event. To make the button move smoothly from x, which is a current exposition to target x, which is a target exposition, we need to get the difference between the two values. So I'll add the Assign variable action, I'll create a variable called diff.

This variable will store the difference between target x and x. So as you can see, we subtracted x from Target X to get the difference. So now if you add the difference to x, you'll get target x. Now let's see if that works. So I'll add another assign variable action here. In the name I'll enter x in the value I'll enter Dave, and our market as Urdu So after we difference will added back to x.

So in the end, x will become equal to target x. And that will happen immediately without a nice moment. So to show you a run the game. Now if I hover over the buttons, you can see that they immediately move to the target x. This happens because we add the complete difference back to the x. Now to make it move smoothly towards the target x, we only need to add a part of the difference to the x.

So instead of adding the complete difference to the x, we can add say 10% of it. So Easter, the X will move 10% towards the target x. So when it gets closer, it also moves slower because the difference is smaller that point. So this way, you get a smooth effect where it starts faster and slower. So I multiply the diff value here by 0.1. So now only 10% of the difference will be added to the x.

Now we'll start the game You can see that the buttons are moving very smoothly. Now we'll click on Play and the game will start. But if I click on quit the game ends. So that's it for this lecture. Now let's move on to the next one. We will make our game over screen.