Now things start getting fun. This stage of the tutorial is going to end with you having your own UIScene loading when you start the game. We are going to take a couple steps with it through. The first step is to replace the Frontend map with our own; once that is completed, we will be replacing the Title Screen reference with our own and building the Title Screen UIScene and the Main Menu UIScene, and a final step when we move to our own datastore. This stage is also going to be a little different, because of the nature of kismet and the fact that our code is already completed. I hope you have enjoyed the process up to here. Once this is completed, you can safely depart into your own process. I will be covering a couple advanced topics after this:

• Localization which is used to allow your game to be played in other languages
• Background Matinee providing an automated movie in the background of your UIScene
• Distribution to allow you to see how to package your game up and pass it around to your friends, foes and users
• Package Suggestions which falls under the label of miscellaneous, but is still very important as it allows you to clean up how your code is thrown around and allow you to pass around a patch version of your distribution

Frontend Map Kismet

Go ahead and open up your Editor, remember to include your mod switch. When things load, we will start with the kismet, and then create a dummy level that will allow you to hook in the matinee later. For our purposes, there will simply be a still image behind the UIScene from the player’s viewpoint. If you are not comfortable within Kismet, I suggest you take a break from here and go hit the 3D Buzz website.

In a new sequence – the default first screen if you wish – create a new Level Loaded And Visible Event. To its output, you will need to add a new Open Scene Action and attach one more Open Scene Action to its success output. At the very end, I have included a Log Action to allow you to tell when things have completed. It will allow you to see that our UIScene is being used in place of the UT default when we finish the first stage. Your kismet should look like this.

There are two schools of thought for the next step. If you want to be clearer, I would suggest you use the kismet variables, but if you are so inclined you can simply drop the references directly into the Scene entry in the options for the Open Scene Action. I will include screen shots so kismet variables will suffice.

We need to open up a package for reference, and we will be using it in place of the UIScenes we will be creating in a moment. The package is called UI_Scenes_ChrisBLayout.upk (Located in [Unreal Tournament 3 Install Dir]\UTGame\CookedPC\UI\) and it contains the UT3 Default UIScenes. You should already have seen me reference it previously, and I used it for my testing and building out my values. We are looking for Titlescreen and Background. Select each and set them up as follows:

Note that the variables are Objects, not strings. Once that is complete, go ahead, close the Kismet Editor, and Make a basic map. It does not have to be detailed, similar to our first build of the code. We will revisit this level later when we visit matinees to spruce things up a bunch. You will need at least one player start; otherwise, you can do anything you want. (If you want to have anything seen, you will probably need a light too.). Make sure to save your map into the [Maps] directory.

Open up [Config]/DefaultEngine.ini and add the following block.

[URL]
Name=Ender Wiggins
Map=EFrontEnd.ut3
LocalMap=EFrontEnd.ut3
GameName=End3r's Game
GameNameShort=End3r

When you run the game now, it will load your mod’s configuration file, run your map, and execute your kismet. It will of course be using the default UIScenes, but they are being triggered within your map. You should see your map in the background and you should see the log output on the left hand side.

UIScene Creation & Correlation

Now we can get back into the fun and fray. We need to create two UIScenes to provide the functionality of the UT Default scenes, which we will mold, slowly, into our own. Open the editor back up and then load up your map. Open the generic browser then move over to the Actor Class browser and load in your code package – [Script]/Ender.u – so you have access to the classes we created previously.

Right click into the Generic Browser (make sure you are not in the class listing page) and go down to new UIScene. The window that comes up is very important. This window is where you provide the package, group, and name for your UIScene. This window is also, where you choose the class that your UIScene is derived from.

We should start at the main menu. Select it from the dropdown menu pictured above and give it a name. I suggest you use a new package and do not wrap it up in your map and provide a group name as well. The main advantage of this is that you can exchange them at will and not need to bother worrying about what map its being used in, not to mention the advantage of using multiple references. Most people will likely be putting their logo and other images into the package with this UIScene.

When it opens up the UIScene editor hop back over to your generic browser and open up the MainMenu UIScene from UI_Scenes_ChrisBLayout.upk and you should be able to compare. The minimum you should include in this scene are as follows:

• A UTUIMenuList named lstMenu
• A Label named lblDescription
• Two UISafeRegionPanels named pnlSafeRegion and pnlLongSafeRegion
• Two further images that we will copy so the player can see who they are when logged in
• A UTUIButtonBar named pnlButtonBar

A few of these can be placed automatically, so we should start there. Keep in mind, there is a hierarchy that is quite useful when you have to move something around on the scene. You should take advantage of it as often as you can. Start with the two UISafeRegionPanels. Go to our UIScene and right click in the blank area of the body within the blue rectangle. Under Place Widget is where the UISafeRegionPanel is located. Once selected it will ask you for the name and call the first one pnlSafeRegion. A white rectangle should be created that includes all of the real estate within the blue rectangle. In the bottom right is a hierarchy of the elements within your UIScene, grown off MainMenu. You can edit the order, so you control the overlaying of items. Select and Right click the MainMenu entry and add a second UISafeRegionPanel, name this one pnlLongSafeRegion. Once it is in there, select and right click the long panel. In the menu you can see an option called Reorder Widget. Select this and move the long panel to the bottom.

Right click on the long panel and add a UTUIButtonBar element to it, the name of which should be pnlButtonBar. The list is in alphabetical order so use that to your advantage. The button bar is added to the bottom of the safe panel and centered, as it should be.

Now jump back over to the other main menu (the one in UI_Scenes_ChrisBLayout.upk) and expand the tree under pnlLongSafeRegion. In here, you should see two entries, called imgNameBGPC and imgNameBGConsole. These two items are what allow the name to be shown in the bottom right of the main menu when you log in. If you are not releasing on console I do not think you will need to copy the console image, but I will here for hind sight because I plan to release a few tutorials on how to get the mod into console if I figure it out. Select each of the items, include their sub items as well, and copy them over to our menu tree, under the Long Safe Panel. Place them where you wish. The locations do not come along when you copy and paste.

With all that done you now have some only two items left to add. The Description Label and the Menu List itself. For now go ahead and copy them over from the default, it will save us some time with theming and setting up the datastore yet. At this point, we are going to save the main menu and get the title screen completed.

Go back to your generic browser and create a new UIScene, use the same package and group, but name this one TitleScreen and use the TitleScreen class that we created previously. This is really a very simple UIScene, because its contents are optional. You should include some form of prompt so the user knows its waiting on them but otherwise everything is just fluff and games. As long as you include it within a safe panel, as we did before, you will do fine.

With those two completed all we have to do is redirect the TitleScreen UIScene Reference. Open up the kismet and change the reference to point to our new TitleScreen UIScene. You should look at the value that is thrown into the scene variable, if you have done everything right you will see it cast from our UIScene class. If not, something was screwed up and you need to create it again. It should look like this.

EUIFrontEnd_TitleScreen’End3rUIAssets.Scenes.TitleScreen’

Give your mod a load! It should look like crap, because of how simple and brief things have been thus far, but it is yours nonetheless. Do note that there is an extra item in the menu. You will need to update the Datastore before it reflects the proper values. They are off by one entry, if you click Settings you will be prompted to exit. The next step is to move into the datastore.

Datastore

Okay folks, home stretch. Open up the editor and navigate to your package on the generic browser. Open up your main menu and select the lstMenu element. Expand the datastource element, under data. Change the markup to the tag you used for your datastore, mine is <EMenuItems:MainMenu>. If you do not remember it, you should go open your datastore code up again.

Before you close this out you should take a moment to remove the campaign (and any other elements you are not using) from the “list” listing – it’s under UTSimpleList > List. You should know that when we get into localization we will need to revisit this part of the menu. Currently you should not need anything in the listing our datastore will handle it. The list is simply the placeholder for the later elements. You can also play with the formatting later, to customize it.

With that, you are done; go ahead and save it all out. When you load the mod now you should be able to see the menu system has changed.

As I said earlier, we are going to be going into advanced topics from here out. I hope that there are not too many issues in this but I will be commenting in a few notes. Best of luck. Expect the tutorials to mature over the next week or so as people go through it. Moreover, good luck with your mod adventures.

=) Here is the finished product, note the bg changed on the login screen because it uses our map now.