Hey bro's how's going?
This is a simple tutorial on how to create a simple toggle menu for your games.
First thing we need to create the first sprite that will toggle the rest of the items we will use as a menu and the touch or mouse object you want to use, preferable for mobiles is touch, for browsers mouse.
now after that part is done you need to create 2 frames, 1st frame for the menu active and the 2nd frame for the menu effect to let people know is opened, usually a darker color of the main frame color, and change the speed of animation so when we will press the button, the frames will not automatically change to the last frame without us, to want that. after we finished this step move the sprite into the top corner of your choice, either left or right of the scene.
From now on Images will be added later after the server issues are solved.
ok next step will be to create a instance variable on the sprite we just created and change the type to Boolean, name it togglemenu and false for value.
next we will create 7 more sprites, 1 for the background 3 for big buttons and 3 for smaller buttons. do not worrie we do not need to add extra frames unless u want so later on. for now lets just create the 1st sprite for the background of menu, after adding the sprite object make the size width 200 height 480 give it a green color and close the editor.
For the 3 big buttons we can duplicate the sprite for the background we just finished and change the sizes at width 136 height 32, and give them different colors so we know what is what.
For the 3 small colors lets repeat the color process as above but do the sizes at width 32 and height 32.
now we have everything we needed. lets place the 3 main big buttons above the menu background and under each other at even space. try keep a gap between them on 10 pixel and make sure u have space under the last 1 so we can move the 3 small buttons in a line with even space between.
after the placement in the scene editor, we move to the next step that is creating 1 family for the buttons animations. In this family we add all buttons sprites without the background menu button and the toggle button for the menu because it will have a different animation, add a family behavior by clicking right on the family after is created and add behavior pin.
after we have the family and the sprites arranged on screen as we want it. we go to the events page, where we will add next events and actions.
1st event : On start of layout
- add an action go to first family where we do not have the menu background included and call the pin behavior that says (pin to object) and we select as the object to be pined on the sprite for the background of menu.
2nd event: On touched object
- add a new event from the object touch, called on touched object, and select the object as is the first sprite that we will gonna use as a button to toggle the menu. after the event is added we will add 1st action from the toggle menu button and we search for toggle boolean, we choose as boolean the boolean we have it created on the sprites instance variable. 2nd action we go to the toggle menu button and add set frame, and as frame we will write the next formula without quotes " 1-self.AnimationFrame ".
3rd event: Is boolean true
- add a new event from the object toggle menu and search for is boolean instance variable set , then we add an action from the background menu sprite and search for "Set Y " and set the Y value at 250.
4th event: Is boolean false
- to be easy highlight the hole event from above (#3) and copy paste it and invert the event., after that we will edit the settings for background Y value to -1000.
5th event: On touched object
- the last event is more of an optional event, if you want to add an extra simple graphical effect to the button when they are pressed.
- add a new event from touch and search for On object touched and set the object that is touched to the family we created in first place. then add 1action from family search for " Set Scale" and change the value to 0.9 copy paste the action and edit the value to 1, the last action will be a wait action from the system, so go add a new action go to system> Wait and edit the value to 0.2 now if you play the game you will see the menu and buttons that u had in the scene disappears but if you click the toggle menu button they will appear and the toggle menu button will change its frame color. If you press any buttons when menu is visible they will have a cool simply effect of resize.
That's it hope you enjoyed this Beginner 5 events tutorial please rate and comment.
Sorry for inconvenience i could not add the images because of some temporarily Server Error. hope you managed to understand what i was talking about and if you did not, don't worrie you can still download the capx file attached.
This concludes the ending of the tutorial for How to make a Simple Toggle Menu used in floppy birds.
please leave a comment if you wold want to see more simple tutorials
you can also ask me to do one about anything you wold want to see
Edited : attached the capx to the default download.