Beginner's Guide to: Creating a Main Menu


(avery) #1

Hello all,

I am creating this tutorial for a few reasons:

  1. When I was trying to do this, I had to figure it out on my own and it was difficult.
  2. I have not found a full tutorial that explains how to put together your own main menu in any forums that I have searched.

Before you start to speculate, I want to inform you of my opinion. People are going to do what they want to ET. Not all people that create a main menu are bad people. Actually, some people that create a main menu are doing it for the members in their clan so that they can access the clan servers much easier. Some also do it for their personal use. I have done both. No, you do not need to download it to your server, not all people do. It’s not a virus. It’s not making ET worse.

Now that we have that put to the side, here you go! I hope this makes sense. If you notice that it is a bit dummied down, that’s because it is so that even beginners can do it! The first tutorial here will be a basic menu, and I will add more advanced options that I have learned later on. If you have more stuff that you have been able to figure out, please PM them to me and I can look over them, learn them and then add them to the tutorial to make it easier to find. Don’t worry, I will credit you as well!

If you scroll down and look at it now, you might just click away, but I promise you - If you follow this step-by-step, it will work out!

Also… sticky this please?

//////////////////////////////////////////////////////////////////////////////////////////////
////If you have Notepad++ and pakscape, you can skip Step 1.////
/////////////////////////////////////////////////////////////////////////////////////////////

Step 1: Downloading Notepad++ and Pakscape
Step 2: Making the Directory
Step 3: Editing the “main.menu” File
Step 4: Zipping the File Up
Step 5: Testing in ET

[HR][/HR]

Step 1: Downloading Notepad++ and Pakscape

The first thing you would want to do, especially if you have not dealt with coding or editing documents like these before, is to download two programs that makes you life easier.

The first program is called Notepad++. This program is used to open different files like MENU, TXT, and many more to edit what is found inside of them. In normal Notepad, everything is written in very long lines and hard to read, this makes everything more organized and easy to understand.

The second program is called Pakscape. This program is used to unzip and zip different zip and pk3 files that you will find throughout ET. It is important to use the correct extension (zip or pk3) when making new files for ET.

[HR][/HR]

Step 2: Making the Directory

Somewhere that is easy to locate, create a folder named “MENU” (I created the folder on my desktop for easy access).

Now go into your ET installation and open the etmain folder. There, you will find a file called “pak0”. That is the pk3 file that hold what we are looking for. Be sure to make a COPY of that file (Do not take the file out of the etmain folder because the game will not run correctly without it) and insert it into the MENU folder we created on the desktop. Extract or unzip the pak0.pk3 file into the MENU folder.

When extracted, you will find many different files in there. The one that you will need is the “ui” folder. Delete the other folders and only keep the one that is labled “ui”.

Inside the “ui” folder, you will find two more folders that are labled “assets” and “assets2”. Delete the “assets2” folder. Since we are making a basic menu with this tutorial, create another folder in the MENU folder named “extra” so that your direcotry in the MENU folder now reads:

extra
ui

Keep the following files in the “ui” folder:

[ul]
[li]assets[/li][li]global[/li][li]hostgame[/li][li]main[/li][li]menudef[/li][li]menumacros[/li][li]menus[/li][li]options[/li][li]playonline[/li][li]profile[/li][li]quit[/li][li]viewreplay[/li][/ul]

The remaining files can be moved into the extras folder for now. See later tutorial for more advanced options with those.

There you go! The Directory is now created. To review what we should look like now, we should have one MENU folder with the following folders in it: “extra” and “ui”. Inside the “extra” folder should be a BUNCH of files. Inside the “ui” folder were the ones listed above.

[B][HR][/HR]

Step 3: Editing the “main.menu” File[/B]

Right click the main.menu file and select Open With and chose Notepad++ as the program. This will open up what the game reads as your main menu. Do not be affraid of what it looks like. I will explain to you what this actually means.

// Defines //

#define WINDOW_X        16
#define WINDOW_Y        16
#define WINDOW_WIDTH    128
#define WINDOW_HEIGHT    200
#define GROUP_NAME        "grpMain"

This is defining how big the box is on your main menu that is holding the buttons. With more buttons that you may add, you are going to want to make sure you change the value of “#define WINDOW_HEIGHT 200” to something more appropriate. Typically (if buttons are kept normal size), each extra button will add on 24.

On line 37, it reads this:

    name        "main"

This is stating what the file is named (without the .menu text). If you open the other .menu files, you will see that this is different.

The Background Logo section is the area that you would want to change your background (if you choose to). I perosnally have chosen not to change this and keep a more clean look to ET.

Now comes the fun stuff that players will actually view.

// Window //

    WINDOW( "MAIN", 50 )

This is the title of the Menu that many people overlook.

// Buttons //

    BUTTON( 6, 32, WINDOW_WIDTH-12, 18, "PLAY ONLINE", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript UpdateFilter ; uiScript ServerSortDown 4 ; open playonline )
    BUTTON( 6, 56, WINDOW_WIDTH-12, 18, "HOST GAME", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript loadArenas ; uiScript initHostGameFeatures ; open hostgame )
    BUTTON( 6, 80, WINDOW_WIDTH-12, 18, "REPLAYS", .3, 14, close main ; open viewreplay )
    BUTTON( 6, 104, WINDOW_WIDTH-12, 18, "OPTIONS", .3, 14, close main ; open options )
    BUTTON( 6, 128, WINDOW_WIDTH-12, 18, "PROFILE", .3, 14, close main ; open profile )
    BUTTON( 6, 152, WINDOW_WIDTH-12, 18, "CREDITS", .3, 14, close main ; open credits_splashdamage )
    BUTTON( 6, 176, WINDOW_WIDTH-12, 18, "EXIT GAME", .3, 14, clearFocus ; open quit )
}

These are clearly the buttons that are in game that you will select.

Let’s go ahead and change the colors of each button from the GREY color that ET defaults, to RED. So change what is above to:

// Window //

    WINDOW( "^1MAIN", 50 )

    BUTTON( 6, 32, WINDOW_WIDTH-12, 18, "^1PLAY ONLINE", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript UpdateFilter ; uiScript ServerSortDown 4 ; open playonline )
    BUTTON( 6, 56, WINDOW_WIDTH-12, 18, "^1HOST GAME", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript loadArenas ; uiScript initHostGameFeatures ; open hostgame )
    BUTTON( 6, 80, WINDOW_WIDTH-12, 18, "^1REPLAYS", .3, 14, close main ; open viewreplay )
    BUTTON( 6, 104, WINDOW_WIDTH-12, 18, "^1OPTIONS", .3, 14, close main ; open options )
    BUTTON( 6, 128, WINDOW_WIDTH-12, 18, "^1PROFILE", .3, 14, close main ; open profile )
    BUTTON( 6, 152, WINDOW_WIDTH-12, 18, "^1CREDITS", .3, 14, close main ; open credits_splashdamage )
    BUTTON( 6, 176, WINDOW_WIDTH-12, 18, "^1EXIT GAME", .3, 14, clearFocus ; open quit )

(The ^1 is the color code for the color red)

Now, say you are wanting to add a button in there for the server that you play on, or maybe it is your clan server.
Reminder: You can place these buttons anywhere, but you need to change the location on each button so one does not overlap the other.

Replace:

    BUTTON( 6, 32, WINDOW_WIDTH-12, 18, "^1PLAY ONLINE", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript UpdateFilter ; uiScript ServerSortDown 4 ; open playonline )
    BUTTON( 6, 56, WINDOW_WIDTH-12, 18, "^1HOST GAME", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript loadArenas ; uiScript initHostGameFeatures ; open hostgame )

With:

    BUTTON( 6, 32, WINDOW_WIDTH-12, 18, "^1PLAY ONLINE", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript UpdateFilter ; uiScript ServerSortDown 4 ; open playonline )
    BUTTON( 6, 56, WINDOW_WIDTH-12, 18, "^1AVERY 1", .3, 14, close main ; exec "connect xxx.xxx.xxx.xxx:xxxxx" )  //// Server IP number replaces the Xs
    BUTTON( 6, 80, WINDOW_WIDTH-12, 18, "^1HOST GAME", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript loadArenas ; uiScript initHostGameFeatures ; open hostgame )

Now a key to remember… infront of WINDOW_WIDTH-12 on each line, there is a number (32, 56, 80, 104, 228…) in intervals of 24. This is the location that button is put. Since I added 1 button, every button after
that needs to add 24 to it. Once they are all completed, you should easily be able to add 24 to each number and get the next line down like so:

    BUTTON( 6, 32, WINDOW_WIDTH-12, 18, "^1PLAY ONLINE", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript UpdateFilter ; uiScript ServerSortDown 4 ; open playonline )
    BUTTON( 6, 56, WINDOW_WIDTH-12, 18, "^1AVERY 1", .3, 14, close main ; exec "connect xxx.xxx.xxx.xxx:xxxxx" ) 
    BUTTON( 6, 80, WINDOW_WIDTH-12, 18, "^1HOST GAME", .3, 14, close main ; /*close backgroundmusic ; open backgroundmusic_server ;*/ uiScript loadArenas ; uiScript initHostGameFeatures ; open hostgame )
    BUTTON( 6, 104, WINDOW_WIDTH-12, 18, "^1REPLAYS", .3, 14, close main ; open viewreplay )
    BUTTON( 6, 128, WINDOW_WIDTH-12, 18, "^1OPTIONS", .3, 14, close main ; open options )
    BUTTON( 6, 152, WINDOW_WIDTH-12, 18, "^1PROFILE", .3, 14, close main ; open profile )
    BUTTON( 6, 176, WINDOW_WIDTH-12, 18, "^1CREDITS", .3, 14, close main ; open credits_splashdamage )
    BUTTON( 6, 200, WINDOW_WIDTH-12, 18, "^1EXIT GAME", .3, 14, clearFocus ; open quit )

At the top, be sure to make sure you edit this code:

// Defines //

#define WINDOW_X        16
#define WINDOW_Y        16
#define WINDOW_WIDTH    128
#define WINDOW_HEIGHT    200
#define GROUP_NAME        "grpMain"

To:

// Defines //

#define WINDOW_X        16
#define WINDOW_Y        16
#define WINDOW_WIDTH    128
#define WINDOW_HEIGHT    224
#define GROUP_NAME        "grpMain"

[HR][/HR]

Step 4: Zipping the File Up

Since that is all that I will be adding to this menu file, I will go ahead and zip it up using the pakscape program.
Go into the MENU folder where you have listed “extra” and “ui”.
Open a new file in Pakscape, drag the “ui” folder and drop it into the white area on Pakscape.
Click File, Save As. BE SURE TO SAVE AS A PK3 FILE. Save that as what ever you want. It is smart to add a few ~~~ infront so it reads before the regular menu, or any others that are in your etmain. Mine will be saved as “~~~~~~~~~~~~~~~~~~averymenu.pk3”

[B][HR][/HR]

Step 5: Testing in ET[/B]

Put that file you just saved into your ETMAIN folder and open up ET. BAM! If you did everything correctly, you should have your menu in the game.

[B][HR][/HR]

Notes:[/B]

I wish I could add colors to the text and direct links to make it flow better. Sorry guys! :rolleyes:

If you have any questions, please feel free to ask here.

COMING SOON: Adding advanced buttons!


(Scennative) #2

Instead of Pakscape i use 7zip.
Make a zip and rename it to pk3…

Voila


(Mateos) #3

Thanks for the tut.

Usually, what Scennative says work: open one, read, learn, and do yours -> This if you know you have one downloaded. I did like this when I was server admin, and it worked quite well, when NQ changed the .weap scripting, when they added new V menu entries (Had to edit our sound pack), and as well make a connection button for ETmain.


(avery) #4

That’s how I learned. I took a look through 3 different clan ones, found the one I liked better, used that as the base and added stuff as needed. I now have a menu with a member list, our own credits page, a button for extra servers, 5 buttons on the top right for our servers. and then three buttons on the bottom for website, forums, and our clan created etkey generator.


(Scennative) #5

The best way to create a completly new menu, hud or other stuff:

Create a picture in your favorite picture editor (Pain.Net is my absolut favorite) with the resolution 640*480.

Then every 2D stuff is written in 640*480 cordinates.

Have fun ^^


(avery) #6

Can this be stickied to find easier for others that need it?


(Mateos) #7

Or added as a link in a stickied thread?


(Indloon) #8

[QUOTE=Scennative;383572]The best way to create a completly new menu, hud or other stuff:

Create a picture in your favorite picture editor (Pain.Net is my absolut favorite) with the resolution 640*480.

Then every 2D stuff is written in 640*480 cordinates.

Have fun ^^[/QUOTE]

I use 1024x1024 textures for menu

Since the lower resolution textures look like crap.

Wannabe ‘megatextures’ user :smiley: