How to make a menu

Learn how to make certain types of games and use gameEditor.

How to make a menu

Postby koala » Tue Apr 21, 2015 3:58 am

Hi, friends! :D

I am making a small pop-up menu in game Tablic.
Use Script Reference to learn more about functions and variables used in this tutorial.

Let's set option's look in the menu.

First we need to color it.
Add one Canvas Actor named field.
Image
Set desired dimensions of field.
Image
Now we are going to set its color. Right click on actor and choose Actor Control.
Image
Add Event Create Actor.
Image
Add Action Script Editor.
Image
To color field, add this code:
Code: Select all
int i;

setpen(0, 128, 0, 0, 1); // pen's color: green, transparency: 0, size: 1

// coloring
for (i = 0; i < width; i++) {
    moveto(i, 0);
    lineto(i, height);
}
However, it is much better to use this code:
Code: Select all
erase(0, 128, 0, 0);
as LcL kindly suggested. 1. post
Choose Add and Immediate Action.
Image
Click Game Mode. Now field looks like this:
Image

Second, we need to set field's title.
Add Normal Actor and name it title.
Image
It looks like this:
Image
To add name to it, right click on title actor and choose Actor Control.
Image
Choose Text.
Image
For now, write TITLE.
Image
Let's choose True Type.
Image
Let's set:
- File: trebuc.ttf
- Size: 20
- Color: white (default)
- Style: Normal (default)
- Soft: Yes
Image
Press OK.
Now you can see Font you have chosen.
Image
Click OK and close Actor Control.
Move title on field.
Image
Menu option now looks like this:
Image

Third, we need to transform field and title into a functional button. We can add script to these actors, or we can add a new one, and add script to it. We will add a new actor.
Add Filled Region Actor called button.
Image
Its dimension needs to be same as field's dimension.
Image
button must cover field and title, so its Z Depth must be greater than field's and title's. It is by default set to maximum, which is what we need.
Image

We have set an option's look. Now lets set menu.
Add Canvas Actor and name it menu.
Image
Set its dimensions.
IMPORTANT: Set upper-left corner of menu where it should be, relative to field, title and button.
Image
Let's set menu's color.
Right click on menu and choose Actor Control.
Image
Add Event Create Actor.
Image
Add Action Script Editor.
Image
Add this code:
Code: Select all
int i;

setpen(255, 255, 255, 0, 1); // pen's color: white, transparency: 0, size: 1

// coloring
for (i = 0; i < width; i++) {
    moveto(i, 0);
    lineto(i ,height);
}
However, this is better way to fill the canvas:
Code: Select all
erase(255, 255, 255, 0);
Thanks LcL! 1. post
Add as Immediate Action.
Image
Set Z Depth to minimum, or at least below Z Depth of other actors.
Image
Now our menu looks like this:
Image

There's one more reason why menu exists, beside better look. It will stick together all actors of menu, so when you move menu actor, all other actors move with it, and that way you move the entire menu.
To do this right click on any actor and choose Actor Control.
From the Name choose field.
Image
Set its Parent to menu.
Image
Same thing do for title and button.
Now you can move menu and all actors will move with it.

Now we need to make more menu options. Let's make five options total.
To do that, first right click on any actor and choose Actor Control. Then from Name choose field. We are going to make its clones.
Choose Clone.
Image
Choose Array.
Image
Set these attributes:
- Vertical count: 5
- Distance between clones: Manual
- Vertical distance: 50
Image
Do same for title and button and adjust menu's size. We now have menu with five options.
Image
It looks like this:
Image

We made clones of actors field, title and button. Names of those clones are:
- field.0, field.1, field.2, field.3, field.4
- title.0, title.1, title.2, title.3, title.4
- button.0, button.1, button.2, button.3, button.4
Changing one of these actors will change all its clones.
Clones differ in their clone names. clonename = nameactor.cloneindex

However, we can change one title without changing all other titles, so let's do it.
Right click on any actor and choose Actor Control. From Name choose + in front of title.
Image
Then choose title.0.
Image
Change its Text to RESULT/CARDS.
Other titles we can change to:
- title.1 - OPTIONS
- title.2 - NEW GAME
- title.3 - MAIN MENU
- title.4 - EXIT
This is the result of changes:
Image

We should add some animation to our menu.
Right click on any button and choose Actor Control.
Add Event Mouse Enter.
Image
Add Action Script Editor.
Image
We will need Global Variable in which we will write the name of clone we want to animate.
Go to Variables.
Image
Then go to Add.
Image
Set it to String and name variable nameClone and then Add it.
Image
Write this code:
Code: Select all
sprintf(nameClone, "field.%d", cloneindex);

getclone(nameClone)->x += 10;

sprintf(nameClone, "title.%d", cloneindex);

getclone(nameClone)->x += 10;

This will move field and title 10 pixels to the right every time mouse enters adequate button.
sprintf(nameClone, "field.%d", cloneindex); - This function first makes string "field.[some_number]". Value of [some_number] depends on cloneindex. Cloneindex is index of button that is receiving Event Mouse Enter. If you put mouse on second button, cloneindex will be 1, because name of this clone is button.1. That index will be added to string. String is then written in the nameClone.
getclone(nameClone)->x += 10; - Function getclone() has an argument, string, which is the name of clone we want to access. Function returns pointer to that clone. With ->x we access clone's horizontal coordinate, and with += 10 we increase it by 10 pixels, which moves field 10 pixels to the left.
Same thing has been done with title.

We need to return option to the right when mouse leaves it. We need to do almost the same thing as previous.
Right click on any button, choose Actor Control, Add Event Mouse Leave, Add Action Script Editor and write this code:
Code: Select all
sprintf(nameClone, "field.%d", cloneindex);

getclone(nameClone)->x -= 10;

sprintf(nameClone, "title.%d", cloneindex);

getclone(nameClone)->x -= 10;
The only difference is that instead + there is -. This way, whenever mouse leaves an option, that option returns to its place.

Finally, we need to add functionality to this menu.
Right click on any button, choose Actor Control and Add Event Mouse Button Down.
Image
Press left mouse button to set Press mouse button: Left.
Image
Add Action Script Editor.
Add Global Integer Variable option.
Image
Write this code:
Code: Select all
option = cloneindex;

switch(option) {
    case 4: ExitGame(); break;
}
Value of global variable option depends on button that has been pressed. Next, of that variable depends witch case will be activated. If 4th case activates, game shuts down. It will activate only when 5th button is pressed. Of course, for other buttons you will add appropriate cases and instructions. Code will be:
Code: Select all
option = cloneindex;

switch(option) {
    case 0: // some instructions; break;
    case 1: // some instructions; break;
    case 2: // some instructions; break;
    case 3: // some instructions; break;
    case 4: ExitGame(); break;
}

Go to Add and Immediate Action.
Image

Now move the menu outside the view and add Normal Actor. Let's call it popup. You can Add Animation to popup if you want.
We want menu to pop-up every time mouse enters popup.
First place popup to the center. Second, menu must appear in front of popup, so set popup's Z Depth to minimum and slightly increase menu's Z Depth.
Right click on popup, choose Actor Control, Add Event Mouse Enter and Add Action Script Editor. Write this simple code:
Code: Select all
menu.x = -120;
menu.y = -130;

Now every time you place mouse on popup, menu appears in front of it.

Now we need to make menu disappear when mouse leaves it.
Add Filled Region Actor and name it return_menu. "Draw" it around menu.
Image
Set Z Depth of return_menu below Z Depth of menu, because we don't want return_menu to cover menu. Then we wouldn't be able to reach options. We need return_menu to be "around" menu, so every time mouse leaves menu, mouse enters return_menu.
Because return_menu needs to follow the menu, we will add it in popup script.
Right click on popup, choose Actor Control and choose Edit.
Image
Choose Mouse Enter.
Image
Choose Script Editor.
Image
Add to script:
Code: Select all
return_menu.x = -130;
return_menu.y = -140;
Notice that return_menu.y needs to bi higher than menu.y, and return_menu.x more to the left than menu.x. Go to Add and Immediate Action.
Now return_menu follows menu.

Let's add functionality to return_menu.
Right click return_menu, choose Actor Control, Add Event Mouse Enter, Add Action Script Editor:
Code: Select all
menu.x = -120;
menu.y = 700;

return_menu.x = -130;
return_menu.y = -700;
Go to Add and Immediate Action.
This will move return_menu and menu far outside the view.

executable
source (ged and data)
(uses the old way of filling canvas, better use erase() function, as LcL suggested: 1. post)
Attachments
menu_ged.zip
source (ged and data)
(uses the old way of filling canvas, better use erase() function, as LcL kindly suggested (1. post): http://game-editor.com/forum/viewtopic.php?f=27&t=13558&p=99232#p99229)
(81.86 KiB) Downloaded 590 times
menu_exe.zip
executable
(777.33 KiB) Downloaded 559 times
Last edited by koala on Tue Apr 21, 2015 11:54 am, edited 2 times in total.
Phascolarctos cinereus
YouTube: Marko Radivojevic
Google+: Marko Radivojevic
User avatar
koala
 
Posts: 301
Joined: Thu Mar 26, 2015 7:03 pm
Location: Serbia
Score: 30 Give a positive score

Re: How to make a menu

Postby lcl » Tue Apr 21, 2015 7:50 am

Nice one! Great contribution for other people to learn to use Game Editor. One thing I'd like to point out is that there's a better way to fill a canvas with a solid color. Just use the erase function.
Code: Select all
//Syntax is: erase(int r, int g, int b, double transparency)

//For a white color with 0 transparency
erase(255, 255, 255, 0);

//A green color with 0.5 transparency
erase(0, 255, 0, 0.5);
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: How to make a menu

Postby koala » Tue Apr 21, 2015 11:38 am

lcl wrote:Nice one! Great contribution for other people to learn to use Game Editor. One thing I'd like to point out is that there's a better way to fill a canvas with a solid color. Just use the erase function.
Code: Select all
//Syntax is: erase(int r, int g, int b, double transparency)

//For a white color with 0 transparency
erase(255, 255, 255, 0);

//A green color with 0.5 transparency
erase(0, 255, 0, 0.5);
Hey, thanks! :D
I've seen people use this, but I didn't know why and I didn't put it. I have read in Script Reference what does it do, but I still don't understand why is this function used. Would you tell me? Thanks. :D
Or, you wanted to say, instead of for-loop and everything I should just use erase? Now it makes sense.
OK, I think I get it now. :D Thanks a lot! :D
edit:I've actually seen people use erase() function and code to draw canvas border, not erase and for-loop - this confused me. My mistake.
One more thing confused me. In Script Reference it says:
"Erase all Actors with a specified color."
I've interpreted it bad. I've interpreted that erase() function deletes actor that have specified color, instead of filling actor with specified color.
Phascolarctos cinereus
YouTube: Marko Radivojevic
Google+: Marko Radivojevic
User avatar
koala
 
Posts: 301
Joined: Thu Mar 26, 2015 7:03 pm
Location: Serbia
Score: 30 Give a positive score

Re: How to make a menu

Postby lcl » Tue Apr 21, 2015 12:06 pm

I think I can see what your misconception was.

But yeah, erase() is meant to be used when you want to clear a canvas from all that's been drawn on to it, and it allows you to define what color and transparency you want the canvas to be after it has erased everything.

This is the most efficient way of filling the canvas with a solid color. :)

Edit: To best describe what the function erase() actually does, I'd say the following: It fills the whole canvas with the color it's been given.
User avatar
lcl
 
Posts: 2339
Joined: Thu Mar 25, 2010 5:55 pm
Location: Finland
Score: 276 Give a positive score

Re: How to make a menu

Postby Zivouhr » Fri Apr 24, 2015 6:10 pm

Good thread about creating a Menu, thanks!
City of Rott Game created on Game Editor http://cityofrott.wordpress.com/
User avatar
Zivouhr
 
Posts: 549
Joined: Sat May 17, 2014 2:12 pm
Score: 59 Give a positive score

Re: How to make a menu

Postby mindcontrol » Thu Apr 30, 2015 5:15 pm

Thank you for the tread, very usefull, but i have a problem, i need to put the command to each button, and i don't know how to do.. for exemple how can i make the 'Play' button really start the game?
mindcontrol
 
Posts: 24
Joined: Sun Apr 26, 2015 12:54 pm
Score: 2 Give a positive score

Re: How to make a menu

Postby koala » Thu Apr 30, 2015 5:49 pm

mindcontrol wrote:Thank you for the tread, very usefull, but i have a problem, i need to put the command to each button, and i don't know how to do.. for exemple how can i make the 'Play' button really start the game?
Code: Select all
option = cloneindex;

switch(option) {
    case 0: // some instructions; break;
    case 1: // some instructions; break;
    case 2: // some instructions; break;
    case 3: // some instructions; break;
    case 4: ExitGame(); break;
}
For example 'Play' button could be the first one. So after case 0: you could add launch_game(); break; . launch_game() would be some function in Global Code.
Code: Select all
void launch_game() {
    // code
}
In code you could move view to another position, where are the game's actors, you could set initial values of some variables, or whatever you need to do.
Phascolarctos cinereus
YouTube: Marko Radivojevic
Google+: Marko Radivojevic
User avatar
koala
 
Posts: 301
Joined: Thu Mar 26, 2015 7:03 pm
Location: Serbia
Score: 30 Give a positive score

Re: How to make a menu

Postby mindcontrol » Fri May 01, 2015 1:09 pm

koala wrote:
mindcontrol wrote:Thank you for the tread, very usefull, but i have a problem, i need to put the command to each button, and i don't know how to do.. for exemple how can i make the 'Play' button really start the game?
Code: Select all
option = cloneindex;

switch(option) {
    case 0: // some instructions; break;
    case 1: // some instructions; break;
    case 2: // some instructions; break;
    case 3: // some instructions; break;
    case 4: ExitGame(); break;
}
For example 'Play' button could be the first one. So after case 0: you could add launch_game(); break; . launch_game() would be some function in Global Code.
Code: Select all
void launch_game() {
    // code
}
In code you could move view to another position, where are the game's actors, you could set initial values of some variables, or whatever you need to do.



Hmm i have a problem :( , actually i'm using this code on the main player:

if (xscreen>=325) {
view.x+=5; }
if (xscreen<=315) {
view.x-=5; }

if (yscreen>=325) {
view.y+=5; }
if (yscreen<=315 && view.x>-320) {
view.y-=5; }

so everywhere i put the menù the view alaways follow the actor, so i need which when i start the game, the view is on the menù, and by clicking on 'newgame' it pass on the player, how can i do?
mindcontrol
 
Posts: 24
Joined: Sun Apr 26, 2015 12:54 pm
Score: 2 Give a positive score

Re: How to make a menu

Postby koala » Fri May 01, 2015 1:57 pm

mindcontrol wrote:Hmm i have a problem :( , actually i'm using this code on the main player:

if (xscreen>=325) {
view.x+=5; }
if (xscreen<=315) {
view.x-=5; }

if (yscreen>=325) {
view.y+=5; }
if (yscreen<=315 && view.x>-320) {
view.y-=5; }

so everywhere i put the menù the view alaways follow the actor, so i need which when i start the game, the view is on the menù, and by clicking on 'newgame' it pass on the player, how can i do?
This is really nice way to make view follow the main player. :D But as you've said, wherever you place the view it will return to main player. You could add a global variable: start. When you click on 'newgame', start = 1, and the code on the main player will activate.
Code: Select all
if (start) {
    if (xscreen>=325)  {
        view.x+=5; }
    if (xscreen<=315) {
        view.x-=5; }

    if (yscreen>=325)  {
        view.y+=5; }
    if (yscreen<=315 && view.x>-320) {
        view.y-=5; }
}
Now you can place the view wherever you want, it will go to the main player only when you click on 'newgame' button.
Phascolarctos cinereus
YouTube: Marko Radivojevic
Google+: Marko Radivojevic
User avatar
koala
 
Posts: 301
Joined: Thu Mar 26, 2015 7:03 pm
Location: Serbia
Score: 30 Give a positive score

Re: How to make a menu

Postby mindcontrol » Sat May 02, 2015 4:08 pm

wow it was so easy lol , thanks a lot :D
mindcontrol
 
Posts: 24
Joined: Sun Apr 26, 2015 12:54 pm
Score: 2 Give a positive score

Re: How to make a menu

Postby koala » Sat May 02, 2015 4:44 pm

mindcontrol wrote:wow it was so easy lol , thanks a lot :D
No problem. You're welcome. :D
Phascolarctos cinereus
YouTube: Marko Radivojevic
Google+: Marko Radivojevic
User avatar
koala
 
Posts: 301
Joined: Thu Mar 26, 2015 7:03 pm
Location: Serbia
Score: 30 Give a positive score

Re: How to make a menu

Postby bat78 » Wed Jul 29, 2015 1:25 am

Nice tutorial.
Sadly it will loose some of its value when my project comes out as it will support rendering text on canvas using the drawing functions.

Also you could draw the entire menu in one canvas and don't use field regions, of course more coding would be needed (but smaller tutorial, more educating and effort-wise for people who copy/paste)

For readability you can explicitly cast the 4th argument to setpen/erase as double by making it 0.0 or .0 instead of 0
In some highly non-optimized environments this might even execute faster.
The future of "Game-Editor" here
User avatar
bat78
 
Posts: 816
Joined: Sun Dec 14, 2008 9:13 pm
Location: Bulgaria, Sofia
Score: 88 Give a positive score

Re: How to make a menu

Postby knucklecrunchgames » Wed Jul 29, 2015 1:53 am

bat78 wrote:Nice tutorial.
Sadly it will loose some of its value when my project comes out


Pure arrogance.
User avatar
knucklecrunchgames
 
Posts: 1071
Joined: Wed Nov 21, 2012 8:01 pm
Location: In gameEditor.exe
Score: 17 Give a positive score

Re: How to make a menu

Postby bat78 » Wed Jul 29, 2015 2:00 am

knucklecrunchgames wrote:
bat78 wrote:Nice tutorial.
Sadly it will loose some of its value when my project comes out


Pure arrogance.


Oh noo no no, just shut up already. I am tired of you causing unnecessarily drama along that immoderately spamming and taking place as someone or something with rights to refer to people with powerful words you probably don't even understand. Just stop it. If you don't understand my purely-anxious reference then just stop before it's not too late. Seriously just do it, you are digging yourself a grave.
Last edited by bat78 on Wed Jul 29, 2015 2:53 am, edited 2 times in total.
The future of "Game-Editor" here
User avatar
bat78
 
Posts: 816
Joined: Sun Dec 14, 2008 9:13 pm
Location: Bulgaria, Sofia
Score: 88 Give a positive score

Re: How to make a menu

Postby 420foxbot » Wed Jul 29, 2015 2:26 am

bat78 wrote:
knucklecrunchgames wrote:
bat78 wrote:Nice tutorial.
Sadly it will loose some of its value when my project comes out


Pure arrogance.


Just shut up already, I am tired of you causing unnecessarily drama along that off-topicing and taking place as someone or something with rights to call people with pretty strong words you probably don't even understand. Just stop it. If you don't understand my purely-anxious reference then just stop before it's not too late. Seriously just do it, you are digging yourself a grave.


Seemingly other communities have had a problem with him too, haven't they? GameJolt must have far lower tolerance, because you're already banned from there, aren't you? Perhaps, Sean, there is a time where you need to keep your mouth shut.
User avatar
420foxbot
 
Posts: 53
Joined: Mon Apr 20, 2015 8:50 pm
Location: Tampa, Florida
Score: 6 Give a positive score

Next

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest