Intro
In this tutorial, I am going to show you how to slide in title menu items and two layout transition types when a menu item is clicked: hard cut layout change or smoother slide out and layout change.
First of all, create a new project.
Load the following menu items 1 to 4 as sprites into Construct 2:
rename them to sIntro, sPly1, sPly2 and sCredits.
Place them sequentially from top to bottom, no need to manually align or adjust them - Construct 2 will help us doing that.
Select all 4 buttons/items and with the right mouse button select
Align -> Edges -> Left
after that
Align -> Space -> Vertically
and finally
Align -> Window -> Center horizontal
You can do the realignment of menu item buttons outside of the window borders in two ways.
Way 1 (not used in this tutorial):
Click on the first and third items and move them outside of the layout (position x: -160), do the same to the right with the second and fourth items (position x: 800).
Way 2 (used here):
Use events to reposition the items at start of layout, setting sIntro and sPly2 to -160 and sPly1 and sCredits to 800:
Sliding in the buttons
With the following formula the corresponding object "Self" will move towards window center (at x=320). While the object is far away, it moves fast towards the center. Getting nearer to the window center, the movement speed is diminished. To raise the item sliding speed, lower the 10 to a lower number, to slow down the movement, take a number higher than 10.
Self.X (320-Self.X)/10
You can play around with the item positions even in y direction. A formula for this:
Condition: System -> On every tick
Action: Set position -> x: Self.X (320-Self.X)/10 and y: Self.Y (94-Self.Y)/10
You need to think of the correct y-position of the individual items, though:
94 for sIntro, 188 for sPly1, 281 for sPly2 and 375 for Credits…
Jump to other layouts and transport global variables
Insert in the layout 1 the mouse object.
Go to the projects panel and insert two new layouts with their corresponding event sheets.
Rename them to "IntroLayout" and "GameLayout".
Insert in the event sheet a global variable called playerAmount.
Now we'll add some mouse events so when a menu item is clicked, the layout is changed.
Condition: Mouse -> On object "sIntro" clicked
Action: System -> Go to layout "IntroLayout"
Condition: Mouse -> On object "sPly1" clicked
Actions: System -> Set value -> playerAmount to 1
System -> Go to layout "GameLayout"
Condition: Mouse -> On object "sPly2" clicked
Actions: System -> Set value -> playerAmount to 2
System -> Go to layout "GameLayout"
We'll neglect sCredits item for now. If you want, create a new layout "CreditLayout".
If you run the game, any click on the first three menu items and the layout change will work - you'll be confronted with a white screen.
In the two new layouts "IntroLayout" and "GameLayout", insert in each a text object and a OK-button object.
a) in the Text object property Text, remove "Text" and set Horizontal alignment to Center.
b) in the OK Button property, set Text from "OK" to "Back to main menu" (adjust the button's width)
In the event sheet, insert the following events:
Condition: System -> On start of layout
Action: Text -> set text to "Introduction"
Condition: On Button clicked
Action: System -> Go to layout 1
Do the same with "GameLayout" as above with IntroLayout!
a) Insert a Text object Text2 and a Button Button2
b) Insert in the event sheet the same code as above.
In the event sheet 3, change the start of layout action to the following:
Set text to "We'll play with "&playerAmount&" player(s)!"
Now run the game. Awesome, it'll all work as expected! See the first .capx file available for download.