[Tutorial] Change Loading Screens based on map (Using Canvas and no bik movie)


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:
 text */
    Canvas.DrawText( DisplayMessage, false );

    /* No need to draw hints for Main menu */
    if (Message != "MainMenu")
    {
        /* Find the game class: Eg: returns UTDeathmatch_0 */
        GameClass = class(FindObject(Outer.TransitionGameType, class'Class'));

        /* Cast teh game class name to string */
        GameClassName = string( GameClass.Name );

        /* Get random hint message from Game Class */
        HintMessage = LoadRandomLocalizedHintMessage( string( class'UTDeathmatch'.Name ), GameClassName);

        /* Hint message exists so... */
        if( Len( HintMessage ) > 0 )
        {
            /* Assign font to be used with HINTMESSAGE */
            Canvas.Font = HintFont;

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

            /* We want the Hint message to be centered. So center the text */
            Canvas.SetPos((Canvas.ClipX - XL) / 2, Canvas.ClipY / 2);

            /* Again randomize the colors */
            Canvas.SetDrawColor(Rand(255),Rand(255),Rand(255));

            /* [TEXT] Finally draw the Hintmessage text */
            Canvas.DrawText( HintMessage, false );
        }
    }
}

final protected function Texture2D GetTextureForMap(string mapName)
{
    switch(mapName)
    {
        case "Map1":
            return MAP1_BackgroundTextures[Rand(MAP1_BackgroundTextures.length)];
        break;
        case "Map2":
            return MAP2_BackgroundTextures[Rand(MAP2_BackgroundTextures.length)];
        break;
        case "Map3":
            return MAP3_BackgroundTextures[Rand(MAP3_BackgroundTextures.length)];
        break;
        default:
            return //any default texture here;
        break;
    }
}

DefaultProperties
{
    HintFont=Font'YourPackage.YourHintFont'
    TransitionFont=Font'YourPackage.YourTransitionFont'
    BackgroundColor=(R=1.0,G=1.0,B=1.0,A=1.0)

    MAP1_BackgroundTextures[0]=Texture2D'YourPackage.YourGroup.YourMap1Texture'
    MAP1_BackgroundTextures[1]=Texture2D'YourPackage.YourGroup.YourMap1Texture'
    MAP1_BackgroundTextures[2]=Texture2D'YourPackage.YourGroup.YourMap1Texture'

    MAP2_BackgroundTextures[0]=Texture2D'YourPackage.YourGroup.YourMap2Texture'
    MAP2_BackgroundTextures[1]=Texture2D'YourPackage.YourGroup.YourMap2Texture'
    MAP2_BackgroundTextures[2]=Texture2D'YourPackage.YourGroup.YourMap2Texture'

    MAP3_BackgroundTextures[0]=Texture2D'YourPackage.YourGroup.YourMap3Texture'
    MAP3_BackgroundTextures[1]=Texture2D'YourPackage.YourGroup.YourMap3Texture'
    MAP3_BackgroundTextures[2]=Texture2D'YourPackage.YourGroup.YourMap3Texture'
}

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. 😀

About Satheesh (aka ryanjon2040)

Genuine Unreal Engine user

Posted on December 15, 2013, in Tutorials and tagged , , , , , , . Bookmark the permalink. 5 Comments.

  1. thanks for this tutorial it’s very helpfull for me 😀

    Like

  2. thx a lot man,helpful ~~

    Like

  3. Hi 🙂

    I have tried this tut but cant compile. I get an error on Var array line saying missing <
    Is there something else i need to add?

    Thanks 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: