Menus

Wrote your own tutorial? Post tutorials here for others to learn from!

Menus

Postby ABC » Tue Apr 10, 2012 11:09 am

This my little tutorial for creating menus in Axel.
First off we will create a new class (In this tutorial I called it Menu.)
Code: Select all
package 
{

   public class Menu
   {
      
      public function Menu()
      {
         
      }
      
   }

}


First off we will need to with this class is import Axel using;

Code: Select all
import org.axgl.*;

"*" is just a wildcard and means we can use any and all Axel classes within org.axgl

Next after the class's name make it extend AxEntity.

I like to keep things separate and neat so in the function Menu() add;

Code: Select all
createMenu()


This will do nothing right now as there is no createMenu() function so lets add a blank one with.

Code: Select all
private function createMenu():void
   {

   }


This will still do nothing so let's add some visual elements, lets start off with a background.
In the createMenu() function add a new function called makeBackground() in our createMenu() function like so;

Code: Select all
private function createMenu():void
   {
         makeBackground()
   }


This will still do nothing but call the non existent makeBackground() function so lets make that function;

Code: Select all
private function makeBackground():void
{
   
}


Now we want to create a background the best way to do this would be to create an image the size of your screen then add it to your state.
So first off we need to declare our new sprite inside our class at the top with;

Code: Select all
private var background:AxSprite;


Now going back to our makeBackground() function lets define it by doing this.
Code: Select all
         background = new AxSprite(0, 0).load(1, 2, 3);

What this does it creates a new sprite at 0 in the x coordinates and 0 in the y coordinates. This is the top left of the screen.
Next what is done next is load is chained after defining background as a new sprite to define it further by making it load an image.
Load has 3 variables that we need to set for the menu to be full screen.
1 - graphic (The image which you are going to use.)
2 - frameWidth (The width of the image)
3 - frameHeight (The height of the image)

If you don't know how to embed a graphic check out this tutorial;
http://axgl.org/tutorials.php?id=axelite-basic

Once this is defined we need to add this to our state by using;

Code: Select all
Ax.state.add(background);


This will then add the background to the state;

Next we want to create buttons for the user to click on and to take places. So in our createMenu() function add a call to a new function called makeButtons() then create a new private function makeButtons() like before.

Now we need to add a new variable to the top and it will be;

Code: Select all
private var buttons:Array;

Array I hear you cry? Bear with me.

In your makeButtons() function define this now array with
Code: Select all
buttons = new Array();


Now we will use a function called push() to add our buttons to our Array like so;
Code: Select all
buttons.push(new AxButton(1, 2, 3, 4, 5));


This one has 5 variables to set;
1 - x (Where on the x coordinates should this be placed?)
2 - y (Where on the y coordinates should this be placed?
3 - graphic (The image that should be used for this.)
4 - frameWidth (The width of one of your images (Axel looks for 3 images Idle, hover, down so when using your custom image and you want to just keep it the same use the same image three times, if you want it to check just when you hover make the last two different))
5 - frameHeight (Height of one of your images (Same as above))

Do this for as many buttons as you want then below it we will create a new loop like so;
Code: Select all
for (var i:int = 0; i < buttons.length; i++)
   {
      buttons[i].text("");
      Ax.state.add(buttons[i]);
   }


What this does is starts from the first button and adds it one by one until it adds them all and it also sets the text of all the buttons to "" as you will get a null reference error if you just leave it blank.

You can set the buttons callback function by chaining and inside your push function add after you define your button. With;

Code: Select all
.onclick(1)


1- Function

or by using;

Code: Select all
buttons[0].onclick(1);


Since it starts from 0;
First button = 0
Second Button = 1
and so on.

Now that we have our buttons in place lets put in some text to tell the player what the button is. It is basically just the same as the makebuttons() so what you do is;
-Declare new function makeText() in createMenu()
-Declare new variable text:Array
-Define new function makeText()
-Define new variable text = new Array();
-Push new AxText(1, 2, 3, 4, 5, 6);

1 - Text on the x coordinate.
2 - Text on the y coordinate.
3 - Font (For default font just use null);
4 - The string of text within "".
5 - Width of text box.
6 - Alignment.

-Make a new for loop

Code: Select all
for (var i:int = 0; i < text.length; i++)
{   
   Ax.state.add(text[i]);
}


Then that is our text done and our visual menu complete. Now to do exiting and clean up.

Create a new private function called clean() (Remember the :void) Inside it create a new loop like so;
Code: Select all
for (var a:int = 0; b < buttons.length; a++)
{
   buttons[a].dispose();
   buttons[a].active = false;
   buttons[a].destroy();
   Ax.state.remove(buttons[a]);
}


What this does is goes through all your buttons, takes them out of the game loop, deactivates them, destroys them then takes them out of the state. Now do the same for the text like so;

Code: Select all
for (var b:int = 0; b < text.length; b++)
{
   text[b].dispose();
   text[b].active = false;
   text[b].destroy();
   Ax.state.remove(text[b]);
}

This does the same as the button remover loop take out of game loop, deactivates, destroys, takes out of state.

Now to do the same with the background;

Code: Select all
background.destroy();
background.active = false;
background.destroy();
Ax.state.remove(background);


Then finally for the menu itself;
Code: Select all
this.destroy();
this.active = false;
Ax.state.remove(this);


Declare a new private boolean variable at the top called exitCheck like so.
Code: Select all
private var exitCheck:Boolean;


Now in createMenu() declare exitCheck = true;

Now set out your update function like this;
Code: Select all
override public function update():void
{
   if(this.active)
      checkInput();
}


Now create a new function called checkInput() and set it out like this;
Code: Select all
private function checkInput():void
{
   if(exitCheck != Ax.keys.pressed(AxKey.P))
   {
      if(exitCheck)
      {
         exitCheck = false;
      }
      else
      {
         exitCheck = true;
         clean();
      }
   }
}


This now checks if the player presses "P" it will use the function clean(); (The key can be anything you want just change it)

To use it import it into your Player by using

Code: Select all
import Menu;


Then create a new private function called openMenu():void

and in it use the function

Code: Select all
Ax.state.add(new MenuManager());


To add it. Then to use it in the player update add the code

Code: Select all
if (Ax.keys.pressed(AxKey.P))
   {
      openMenu();
   }


"P" can be any key I just use that as it basically my pause key.

Before we finish I want to point out that your player can still move, this may be fine for some games but not others.
So in our Player class add a new public static boolean variable called inputLocked and wrap up your movement and update in an if statement like
Code: Select all
if (!inputLocked)
{
   //Blah, blah, blah
   super.update
}


and in create menu use this line;
Code: Select all
Player.inputLocked = true;


and in the clean() function at the end use;
Code: Select all
Player.inputLocked = false;


That is us done with our menu tutorial!
ABC
Sergeant
 
Posts: 28
Joined: Sat Apr 07, 2012 3:16 pm
Location: Britain.

Re: Menus

Postby Azura » Sat Jun 16, 2012 8:24 am

Hey, I have a bit of a problem with the code and was wondering if you or someone else could help?
Whenever I initialize the button and try to change the text I get this error:

Code: Select all
C:\Users\Azura\Desktop\ProjectHavoc\src\org\axgl\AxButton.as(77): col: 10 Error: Attempted access of inaccessible method color through a reference with static type org.axgl.text:AxText.
label.color(.113, .113, .113);


I initialized the button like so:
Code: Select all
private var buttons:Array;
buttons = new Array();
buttons.push(new AxButton(50, 50, Resource.NEWBTN, 190, 60));
buttons[0].text("");
Ax.state.add(buttons[0]);
Azura
Private
 
Posts: 2
Joined: Mon Jun 11, 2012 5:00 am

Re: Menus

Postby ABC » Sat Jun 16, 2012 9:25 am

Hey, I would need more than that to figure out what is up because I tried to recreate it but had no error. This is my complete button creation code;
Code: Select all
      private function generateButtons():void
      {
         Buttons = new Array();
         Buttons.push(new AxButton(10, 10, Resource.ImgItems, 42, 42, false));
         Buttons.push(new AxButton(10, 65,  Resource.ImgStats, 42, 42, false));
         Buttons.push(new AxButton(10, 120, Resource.ImgSettings, 42, 42, false));
         
         for (var i:int = 0; i < Buttons.length; i++)
         {
            Buttons[i].text("");
            add(Buttons[i]);
         }
         
         Buttons[0].onClick(itemMenu);
      }
ABC
Sergeant
 
Posts: 28
Joined: Sat Apr 07, 2012 3:16 pm
Location: Britain.

Re: Menus

Postby leirianna » Wed Jun 20, 2012 1:28 am

Hi everyone!

I actually have the same error as azura, however it comes as soon as I try to create a variable of type AxButton. Even if I don't initialise or use it the compiler complains.

I tried to just comment the line label.color but other problems pop.

ABC I notice that you have a 6th parameter in you button initialisation, a boolean. When I try your code my compiler tells me I have to many parameters. Did you change something in your AxButton class?
leirianna
Private
 
Posts: 1
Joined: Wed Jun 20, 2012 1:10 am

Re: Menus

Postby ABC » Wed Jun 20, 2012 7:31 am

Oh yeah, I modified the button class to suit me. I think the parameter it is referring to is to do with animation. Just erase it. :)
ABC
Sergeant
 
Posts: 28
Joined: Sat Apr 07, 2012 3:16 pm
Location: Britain.

Re: Menus

Postby Raja Robert » Tue Nov 18, 2014 11:03 pm

This is very nice post thanks! :ugeek:
Johni Imtiaz..!!
Raja Robert
Private
 
Posts: 1
Joined: Tue Nov 18, 2014 11:01 pm

Re: Menus

Postby gerryLee » Tue Dec 16, 2014 8:34 pm

This is a great thread this tutorial helps a lot.
gerryLee
Private
 
Posts: 1
Joined: Mon Dec 01, 2014 4:52 pm
Location: canada


Return to User Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest

cron