Sliding / animated title menu items into and out of layout

  • 48 favourites


Attached Files

The following files have been attached to this tutorial:



Download now 98.43 KB


Download now 195.03 KB


7,497 visits, 12,984 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.


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.


  • Order by
Want to leave a comment? Login or Register an account!