Hey everyone ,

In this tutorial i will show you how to have your own loading screen based on the map you are loading. For example you are loading MAP_1 so the loading screen will show random pictures of MAP_1. Remember, this tutorial will only use Canvas and will not use any bik movies. In fact, you will have to remove the loading bik movies from the ini in-order for this to work. I used this setup in my own game Engage and its working good. 

1: Start UDK and load your level.
2: Take a nice screenshot ( I use printscreen and paste it on Photoshop). TIP: Press F11 for fullscreen
3: Open Photoshop (i used 2048 x 1024) or any other image editing software and make all the customization’s you want (Color correction, blur, DOF, flares, anything)
4: Save the image and import it in UDK and save the package. Take any number of screenshots you want since we will be randomly choosing the textures.
5: Start your UnrealScript IDE and use the below code:

//  ================================================================================================
//   * File Name:    MyCustomViewportClient
//   * Created By:   Satheesh PV (aka RyanJon2040)
//   * Time Stamp:     05-Dec-13 8:50:00 PM
//   * UDK Path:   G:\UDK\UDK-2013-07
//   * Unreal X-Editor v3.1.5.0
//   * © Copyright 2012 - 2013. All Rights Reserved.
//  ================================================================================================

/*
    The reason why i extended from UTGameViewport is because otherwise Hintmessages wont be displayed.
*/

class MyCustomViewportClient extends UTGameViewportClient;

var Font TransitionFont;
var Font HintFont;
var Texture2D Background;
var LinearColor BackgroundColor;
var array MAP1_BackgroundTextures;
var array MAP2_BackgroundTextures;
var array MAP3_BackgroundTextures;

function DrawTransition(Canvas Canvas)
{
    local string MapName;
    local int Pos;

    switch(Outer.TransitionType)
    {
        case TT_Loading:
            MapName = Outer.TransitionDescription;

            /* Remove .udk from map */
            Pos = InStr(MapName,".");
            if (Pos != -1)
            {
                MapName = left(MapName, Pos);
            }

            /* Get Random Texture */
            Background = GetTextureForMap(MapName);
            DrawImageTransitionMessage(Canvas,MapName);
            break;
        case TT_Saving:
            DrawTransitionMessage(Canvas,SavingMessage);
            break;
        case TT_Connecting:
            DrawTransitionMessage(Canvas,ConnectingMessage);
            break;
        case TT_Precaching:
            DrawTransitionMessage(Canvas,PrecachingMessage);
            break;
        case TT_Paused:
            DrawTransitionMessage(Canvas,PausedMessage);
            break;
    }
}

//Absolutely no need for final modifier. I added it just for fun only. :P
final function DrawImageTransitionMessage(Canvas Canvas,string Message)
{
    local float XL, YL;
    local string DisplayMessage;
    local string HintMessage;
    local class GameClass;
    local string GameClassName;

    /* Capitalize the string */
    DisplayMessage = Caps("LOADING: " $Message$"...");

    /* Assign font to be used with LOADING:  */
    Canvas.Font = TransitionFont;
    Canvas.bCenter = false;

    /* Draw the texture on screen */
    Canvas.SetPos(0,0);
    Canvas.DrawTile(Background, Canvas.ClipX, Canvas.ClipY, 0, 0, Background.SizeX, Background.SizeY, BackgroundColor);

    /* Get the displamessage length and save it to XL and YL */
    Canvas.StrLen( DisplayMessage, XL, YL );

    /* [TEXT SHADOW] Set the position to slightly above bottom right corner of the screen */
    Canvas.SetPos((Canvas.ClipX - XL) - 10, (Canvas.ClipY - YL) - 10);

    /* [TEXT SHADOW] Set the color to black */
    Canvas.SetDrawColor(1,1,1);

    /* [TEXT SHADOW] Draw the shadow Text */
    Canvas.DrawText( DisplayMessage, false );

    /* [TEXT] Set the position to slightly above bottom right corner of the screen */
    Canvas.SetPos((Canvas.ClipX - XL) - 12, (Canvas.ClipY - YL) - 12);

    /* [TEXT] Randomize the colors */
    Canvas.SetDrawColor(Rand(255),Rand(255),Rand(255));

    /* [TEXT] Finally draw the LOADING:

6: Save it to UTGame folder
7: DONT COMPILE NOW!
8: Open DefaultEngine.ini and under section [Engine.Engine] change GameViewportClientClassName to GameViewportClientClassName=UTGame.MyCustomViewpor tClient.
9: Open DefaultEngineUDK.ini and under section [FullScreenMovie] remove all LoadingMovies entries.
10: Delete UDKEngine.ini
11: Do i really have to say that you need to re-compile the scripts and enjoy your loading screens. 

Exercise for you:

1. Canvas supports a variety of Draw* functions. Use them to create advanced loading screens
2. I havent checked if Canvas can draw materials. If they can then draw animated materials.(*hint* *hint* bik movies)

I hope you find this useful. 😀