Introduction
Menu screens in games always have multiple buttons that navigate you to the game, options menu, controls menu, etc. When I started building my first game I made a new object for every single button, because they all had to do something else. Soon my objects tab was spammed by these buttons and tons of events, no good since I was still using the Free Edition of Construct 2. In this tutorial I will show you a way to do this with much less objects and events.
Preparations
For this tutorial we're going to make a menu screen with buttons that direct the player to the game itself, a controls screen and a options screen. First of all create four layouts called 'Menu', 'Game', 'Controls' and 'Options'. Here I gave each layout a different color and a heading using a text object, but you can do whatever floats your boat. Don't forget to create a Mouse or Touch object (or just both!) depending on what platform you're going to make your game for. A mouse object CAN also have a touch input, just check the box inside the properties.
Making the buttons
Let's create a Text object that will function as the buttons. Double-click the layout and add the Text object. Give it the name 'Button' or something similar and edit the properties it if you want to. Copy-paste it a couple o'times, get them lined out and change the text in their properties to titles for your pages (best is the same as the name of your layout, that makes work more organized) If you want to have Sprites with images functioning as buttons sure do that, it won't make a difference :D
Now the technical stuff. All the buttons are the same object, but they have to do different things. Select all the objects at once by clicking the Button object in the objects tab.
Add an Instance variable using the next steps:
1. Click on the Instance variables option in the properties sidebar.
2. Add a new Variable.
3. Name the Variable 'GoToLayout' or something similar.
4. Make sure you choose the Text type, otherwise the whole system won't work.
5. You may leave the Initial Value empty right now. Save and close the editor and change the Initial value of each Button object to the corresponding Layout. Note, Symbols and Capitals do matter!
Now get to the Event sheet. We can do everything we need in just one event! Make sure all the Layouts use the same Event sheet! Add the event:
Mouse - On Left/Right button Clicked on Button --> System - Go to layout by name
or:
Touch - On Touched Button --> System - Go to layout by name (!)
In the 'Go to layout by name' action you must fill in an expression. Type in:
'Button.GoToLayout'. This means that when we click on an button, the game will go to the layout with the same name as the GoToLayout value of the button. It will end up looking like this:
And guess what, now it works! Try running the game and click/touch any of the Button objects. You will get yourself stuck on another screen, since there aren't any Buttons over there too redirect you to the main menu. Add one that navigates you back to the menu, you won't need my help for that anymore. I also included the .capx for this tutorial, feel free to check it out!
Thanks for reading. When I see you, I'll give you a cookie!
Joeriri