Screen Overlays with the UI Editor tutorial - GhostWriter mod for Unreal Tournament 3

This tutorial will show you how to create and set up screen overlays within the Unreal Editor. These can be useful for UI elements, in game tutorials, subtitles during cutscenes etc.

First we'll start by making a simple title screen. Here is the image I want to use for the title screen. Remember to save your file in targa (.tga) format if you want parts of your image to be transparent.

So open your map. First we need to set up a matinee sequence so that the camera pans around the level. To do this, place a camera in your scene by first opening the generic browser []. Go to ‘actor classes' and select ‘camera actor' and then right click in your level ‘ add camera actor here'.

<!--[endif]-->

A camera should now appear in your scene. Position it where you would like the camera animation to start from. If you click on the [], then click the camera, the view will snap to the camera's view. This makes it easier to set up the positioning of the camera. Don't forget to click the button again when you are finished!

Next open up Kismet [], right click in the new window and select ‘New Matinee' (Make sure the camera is selected first!)

A matinee box should now appear. Double Click the matinee box and a new window should open.

<!--[endif]-->

In the grey box to the left of this window - right click and select ‘New Empty Group'. Name the group appropriately (I named mine TitleShot).

Next right click on your group and select ‘add NewMovementTrack'.

Your movement track should now appear under your group name. You can now animate the camera. I'm just going to do a quick pan of the level for this tutorial. So with the camera selected, click on the movement track. Move the timeline scroller to however long you want the animation to last (mine was 3 seconds).

Now move the camera to the position where you want the shot to end. Click on the movement track again and press enter. A key should now pop up on the timeline.

If you move the timeline scroller back and forth you should see the camera moving in the viewport.

So that's the camera/matinee set up. If you want the title screen to play when the level starts, go to Kismet, right click - new event - level start up. Connect the ‘out' channel to the ‘play' channel.

We also need to tell Kismet to switch the camera. So right click in the Kismet window, new action - camera - set camera target.

Select the camera in your level and right click in the Kismet window - ‘new object var using CameraActor_X'.

Link this to the ‘camera target' channel. Link the ‘Level startup' channel to the ‘in' channel of the ‘set camera target' box.

You will also want to add a player variable to the ‘target' channel. Right click - new variable - object - player.

When the animation is finished, we want the camera to set to the player camera so add another ‘set camera target' box and link both target channels to a player variable. Then link the ‘completed' channel of the matinee to the ‘in' channel.

If you play the level now, the animation should play. You will notice that you have the Unreal HUD showing. If you do not want this, right click in Kismet - new action - misc - console command.

Select the console command box and look at it's properties. In the ‘command' area, type in ‘SHOWHUD'.

Next link the ‘level startup' and ‘completed' channel of the matinee box to the ‘in' channel of the ‘console command' box. Also, link the target channel to a player variable.

That's the camera animation done.

Now it's time to import our screen overlay. So go to the generic browser. If you already have a custom package, import your image there, otherwise go to file - import. Select your image from its location and click ‘open'. Name the package and the files appropriately.

Your image should now appear in your package.

Now we need to set up a UI scene, so right click in the generic browser and select ‘New UI Scene'. Name it appropriately (mine is called TitleUI). A UIEditor window should now open.

Select the image button and draw a square within the blue frame (your title image should be a square).

Now go back to your package and make sure your title image is selected - then go back to the UI editor. With the square you just drew selected, go to the ‘image - style override' properties and press the small green arrow next to ‘ImageRef'. Your image should now appear in the square.

Now we need to make sure that the image scales properly if the screen resolution changes, so with the title image selected go to the positioning properties. Change each drop down menu to the ‘percentage viewport' setting.

Now de-select the image and change these positioning properties to the same setting as above. With the image de-selected, set up the flag properties like this:

That should be it for the UI editor. Now go back to Kismet. Right click and add - action - UI - ‘open' AND ‘close' scene.

Link the level startup to ‘open scene' and the ‘completed' matinee channel to ‘close scene'. Make sure the UI scene is selected in the generic browser. Click on the ‘open' and ‘close' scene boxes in Kismet, then click the green arrow next to ‘scene' in the properties. You scene should now appear. Do this for both boxes!

Now if you test your level it should work!

Haha mine looks rather ugly! That can be easily changed by replacing the image with a better one :P So that's pretty much it. This only scrapes the surface of the UI editor. There are a number of things that can be achieved with exploration. Here are some other things I've created with it.

I have simply posted this tutorial to share my knowledge of the Unreal Editor and so that the modding community have a resource in this certain area. There may be a million different ways of carrying out the task but this is the way I do it, and it works!