LINKS

Building a menu.

Your own keyboard menu

In this tutorial we will build a Menu from scratch. We are going to build the menu left below. It is a Keyboard based menu and requires no 3rd party software outside of UDK. So Flash is not even required to do this just the power of UDK and any images you wish to use. For this tutorial I will supply you with the textures and the finished map. Before we can go any further, download the file below to continue.

DOWNLOAD:: Mainmenudemo.zip

This menu is all Keyboard based. The screen moves and the word "Press E to start flashes. Below is an image of 3 files found in the Dustmainmenu.upk

STEP ONE

The loading/save section in this tutorial can be found here.

Inside the folder Mainmenudemo.zip extract the files. there should be 6 files called:

• Mainnmenu.udk

• MainMenuComplete.udk

• Dustmainmenu.upk

(Above are only links if something is wrong with the zip folder)

The "MainMenuComplete.udk" is a ready to go menu but the "Mainnmenu.udk" file needs some editing.

The "Dustmainmenu.upk" file contains all the textures.

STEP TWO

Extract the files from the Mainmenudemo.zip file and locate the directory:

C:\UDK\UDK-2013-07\UDKGame\Content\Maps

(Example only)

Put the 3 files in the folder named "Maps"

Hint* Like the image below, left, you need to left mouse click and drag the line to the "True" and release the mouse button. Do the "Player 0" link the same way.

Now, if we select "Play from Here"  when the map starts the image Dustmenudemo will be 60 right and 60 down from the corner of the screen.

STEP THREE

Start UDK, open the map: Mainnmenu.udk

Now, We need to connect the widgets, all of them!!

First, under the menu "Window" at the top of the Kismet screen, make sure "Properties" is ticked.

Click the widget with the comment: "This is the main menu picture". Connect the widget to the bool and  player variable. (Join Active to true) (Join Target to Player 0)

(Example left)

Click the widget with the comment: "This is the main menu picture".

In the properties window, click the magnifying glass to open the UDK Content browser. In the search engine window type: "Dustmenudemo", click "All Assets"  Select the image "Dustmenudemo", go back to the widget and left mouse click the green arrow next to the magnifying glass. This will add the texture to the widget. If it does not work try again, maybe you did not select the image correctly in the content browser to add it.

STEP FOUR

We want the image not to sit in the corner of the screen so under "Display Location" we are going to add 60 to X and 60 to Y coordinates. (Image Left).  Now do the rest:

• For the XL we are going to type 0.5

• For the YL we are going to type 0.3

• For the UL we are going to type 512

• For the VL we are going to type 256

• Check to see if "Is Active" is ticked.

• Authorised Global Scale is 2

The XL 0.5  and the VL 0.3 is height and width display of the image Dustmenudemo.

The 512UL and the 256UL is the size of the image Dustmenudemo. (It must match image size to display correctly)

Now click on the widget with the comment "This is the text image for load and exit options" Now complete this list: (Example left)

• Open UDK Content Browser

• Locate file "Pressetokey" and select it.

• Go back to the widget and click the green arrow.

• For the Display Location X type 60

• For the Display Location Y type 900

• For the XL we are going to type 0.4

• For the YL we are going to type 0.2

• For the UL we are going to type 512

• For the VL we are going to type 256

• Check to see if "Is Active" is ticked.

• Authorised Global Scale is 2

This is the top two widgets completed in Kismet. Now you have a fair idea on what to do, try to follow my lists below.

STEP FIVE

Let's set up a few more widgets: (Example left)

• Locate the Level Loaded widget.

• Connect it to the bool widget and connect the value to true

• Connect the bool target with the false variable

• Connect both the bool targets to the true bool (Under Draw image)

• Connect the out from the false bool back up to the In true bool. (This makes it flash as a "loop")

• Connect the Draw Image Active to True and connect Target to Player 0

• Click on the Draw Image Widget to bring up it's properties.

• Open UDK Content Browser

• Locate file "Pressetostart" and select it.

• Go back to the widget and click the green arrow.

• For the Display Location X type 1400

• For the Display Location Y type 400

• For the XL we are going to type 0.4

• For the YL we are going to type 0.3

• For the UL we are going to type 512

• For the VL we are going to type 128

• Check to see if "Is Active" is ticked.

• Authorised Global Scale is 2

• Connect the Level loaded widget to the widget with the comment "Turn Movement off" to Turn Off (Stops any input/movement)

• Connect the Level Loaded widget to the Matinee widget Play. (Plays movie scene)

• Connect the Matinee widget to the Matinee Data

• Connect the Matinee widget Group to Camera 0 

If you start the map you will now not be able to move, all the images are finished now, but we need to assign the keys.

Select "Play" -"On PC" to test it or it will not load your map you put in the Console Command.

STEP SIX

Let's set up the Key widgets: (Example left)

• Locate the widget with comment "This is the escape key" and select it.

• Under input names [0] type Escape

• Connect the Key/Button Pressed widget to the widget with the comment "This exits game menu" to the in

• Click the widget "This exits game menu" console command.

• Type in EXIT

• Connect Console Command widget to Player0

• Locate the widget with comment "This is the L key" and select it.

• Under input names [0] type L

• Connect the Key/Button Pressed widget to the widget with the comment "This loads your save system" to the in (See this tutorial to learn more)

• Connect Console Command widget to Player0

• Locate the widget with comment "This is the H key" and select it.

• Under input names [0] type H

• Connect the Key/Button Pressed widget to the widget with the comment "This loads your first map" to the in

• Click the widget "This loads your first map" console command.

• Type in open and add The name of your map you want it to load with a space after the word open.( Example left)

• Connect Console Command widget to Player0

That's it.

Select "Play" -"On PC" and test it.

Press ESC key and game should exit.

Press the "H" key and a map with the game name you gave it should load.

The "L" key goes to whatever save system you are going to use. (See this tutorial to learn more)

GOOD LUCK!!!