Sliding / animated title menu items into and out of layout

Favourite 47 favourites
Tutorial written by Dan72Originally published on 23rd, October 2013 - 1 revision


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.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.


Lordshiva1948 44.3k rep

wow nice very nice thanks for sharing

Wednesday, October 23, 2013 at 9:35:10 PM
paperartist 2,359 rep

goog jobs (y)

Thursday, October 24, 2013 at 6:22:33 AM
seothen 3,699 rep

Nice tutorial, I like reading about the intricacies of some of the math involved (ie. for controlling the speeds of the sliding menu items) - definitely not stuff I would figure out on my own.

Thursday, October 24, 2013 at 2:53:01 PM
AbelaNET 14.9k rep

Thanks, an enjoyable simple tutorial

Friday, November 01, 2013 at 10:51:03 PM
lolprohacker 2,990 rep

thx, it was so helpful

Saturday, November 02, 2013 at 3:13:31 PM
Fla2014 421 rep

Obrigada, tutorial legal!

Sunday, February 02, 2014 at 6:27:03 PM
BUILDInteractive 470 rep

Nice tutorial! How did you come up with the equation though? I'd like to understand more of it and maybe come up with other equations myself. Thanks!

Thursday, May 22, 2014 at 2:50:56 AM
gfigueroa 2,209 rep

Great tutorial!!! very simple and easy to use. It looks great :) Thanks!

Sunday, May 25, 2014 at 8:01:48 PM
Tetriser 13.2k rep

Nice tutorial, just used the technique for my upcoming game.

Tuesday, June 17, 2014 at 1:25:10 PM
Madrasmadnes 2,537 rep

I didn't even read the above content. Just downloaded the capx and looked at it. Pretty easily explained in the capx itself. I was actually looking for this. Thanks a lot mate...Great job

Thursday, June 19, 2014 at 2:32:46 PM
KoolEcky 16.3k rep

@ Dan72. Another excellent tutorial from you. Appreciated!

Sunday, November 06, 2016 at 1:44:50 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.