{"id":3237,"date":"2021-01-02T19:26:43","date_gmt":"2021-01-02T11:26:43","guid":{"rendered":"http:\/\/blog.coolcoding.cn\/?p=3237"},"modified":"2021-01-02T19:40:29","modified_gmt":"2021-01-02T11:40:29","slug":"creating-screen-size-aware-scaling-for-the-ui","status":"publish","type":"post","link":"https:\/\/blog.coolcoding.cn\/?p=3237","title":{"rendered":"Creating screen size-aware scaling for the UI"},"content":{"rendered":"\n

If you have followed the previous recipe, you will notice that when you use Play In Editor<\/strong>, the button that loads is unusually small.<\/p>\n\n\n\n

The reason for this is UI Scaling, a system that allows you to scale the user interface based on the screen size. User interface elements are represented in terms of pixels, usually in absolute terms (the button should be 10 pixels tall).<\/p>\n\n\n\n

The problem with this is that if you use a higher-resolution panel, 10 pixels might be much smaller, because each pixel is smaller in size.<\/p>\n\n\n\n

Getting ready<\/h1>\n\n\n\n

The UI scaling system in Unreal allows you to control a global scale modifier, which will scale all the controls on the screen based on the screen resolution. Given the previous example, you might wish to adjust the size of the button so that its apparent size is unchanged when you view your UI on a smaller screen. This recipe shows two different methods for altering the scaling rates.<\/p>\n\n\n\n

How to do it…<\/h1>\n\n\n\n
  1. Create a custom PlayerController subclass. Call it ScalingUIPlayerController.<\/li>
  2. Inside the class, override BeginPlay:<\/li><\/ol>\n\n\n\n
    #pragma once

    #include \"CoreMinimal.h\"
    #include \"GameFramework\/PlayerController.h\"
    #include \"ScalingUIPlayerController.generated.h\"

    \/**
     * 
     *\/
    UCLASS()
    class CHAPTER_14_API AScalingUIPlayerController : public APlayerController
    {
        GENERATED_BODY()
        
    public:<\/strong>
        virtual void BeginPlay() override;<\/strong>
    };
     <\/pre>\n\n\n\n
    1. Add the following code in the implementation of that function inside of ScalingUIPlayerController.cpp:<\/li><\/ol>\n\n\n\n
      #include \"ScalingUIPlayerController.h\"
      #include \"SlateBasics.h\"<\/strong>

      void AScalingUIPlayerController::BeginPlay()<\/strong>
      {<\/strong>
          Super::BeginPlay();<\/strong>
          TSharedRef<SVerticalBox> widget = SNew(SVerticalBox)<\/strong>
              + SVerticalBox::Slot()<\/strong>

              .HAlign(HAlign_Center)<\/strong>
              .VAlign(VAlign_Center)<\/strong>
              [<\/strong>
                  SNew(SButton)<\/strong>
                  .Content()<\/strong>
              [<\/strong>
                  SNew(STextBlock)<\/strong>
                  .Text(FText::FromString(TEXT(\"Test button\")))<\/strong>
              ]<\/strong>
              ];<\/strong>
          GEngine->GameViewport->AddViewportWidgetForPlayer(GetLocalPlayer(), widget, 1);<\/strong>
      }<\/strong><\/pre>\n\n\n\n
      1. Create a new GameModeBase subclass called ScalingUIGameMode and give it a default constructor:<\/li><\/ol>\n\n\n\n
        #pragma once

        #include \"CoreMinimal.h\"
        #include \"GameFramework\/GameModeBase.h\"
        #include \"ScalingUIGameMode.generated.h\"

        \/**
         * 
         *\/
        UCLASS()
        class CHAPTER_14_API AScalingUIGameMode : public AGameModeBase
        {
            GENERATED_BODY()
            
            AScalingUIGameMode();<\/strong>
        };<\/pre>\n\n\n\n
        1. Within the default constructor, set the default player controller class to ScalingUIPlayerController:<\/li><\/ol>\n\n\n\n
          #include \"ScalingUIGameMode.h\"
          #include \"CustomHUDPlayerController.h\"

          AScalingUIGameMode::AScalingUIGameMode() : AGameModeBase()
          {
              PlayerControllerClass = ACustomHUDPlayerController::StaticClass();
          }<\/pre>\n\n\n\n
          1. Save and compile your new classes.<\/li>
          2. Within the Editor, open the World Settings menu from the toolbar by going to Settings | World Settings.<\/li>
          3. Inside World Settings, override the level’s Game Mode to be our ScalingUIGameMode.<\/li><\/ol>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
            This should give you a user interface like the one from the previous recipe. Note that the UI is very tiny if you use Play In Editor:<\/p>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
            Tiny button on the game screen <\/p>\n\n\n\n
            To alter the rate at which the UI scales down or up, we need to change the scaling curve. We can do that through two different methods.<\/p>\n\n\n\n
            Using the In-Editor method<\/h1>\n\n\n\n
            1. Launch Unreal, then open the Project Settings dialog through the Edit menu:<\/li><\/ol>\n\n\n\n
              \"\"\/<\/figure>\n\n\n\n
              1. Under the Engine – User Interface section, there is a curve called the DPI Curve, which can be used to alter the UI scaling factor based on the short dimension of your screen:<\/li><\/ol>\n\n\n\n
                \"\"\/<\/figure>\n\n\n\n
                1. Click on the second dot, or keypoint, on the graph.<\/li>
                2. Change its Scale value to 1. Then, do the same for the first dot and set its Scale value to 1 as well:<\/li><\/ol>\n\n\n\n
                  \"\"\/<\/figure>\n\n\n\n
                  1. Return to the main editor and run the game again. You should notice that the button is larger than it was before:<\/li><\/ol>\n\n\n\n
                    \"\"\/<\/figure>\n\n\n\n
                    Easier to see button on the game screen\n\n<\/p>\n\n\n\n
                    Using the Config file method<\/h1>\n\n\n\n
                    1. Browse to your project directory and look inside the Config folder:<\/li><\/ol>\n\n\n\n
                      \"\"\/<\/figure>\n\n\n\n
                      1. Open DefaultEngine.ini, which is located in the Config folder of your project, inside your text editor of choice.<\/li>
                      2. Find the [\/Script\/Engine.UserInterfaceSettings] section:<\/li><\/ol>\n\n\n\n
                        [\/Script\/Engine.UserInterfaceSettings]
                        UIScaleCurve=(EditorCurveData=(PreInfinityExtrap=RCCE_Constant,PostInfinityExtrap=RCCE_Constant,DefaultValue=340282346638528859811704183484516925440.000000,Keys=((Time=480.000000,Value=1.000000),(Time=720.000000,Value=1.000000),(Time=1080.000000,Value=1.000000),(Time=8640.000000,Value=8.000000))),ExternalCurve=None)<\/pre>\n\n\n\n
                        1. Look for a key called UIScaleCurve in that section.<\/li>
                        2. In the value for that key, you’ll notice a number of (Time=x,Value=y) pairs. Edit the second pair so that its Time value is 720.000000 and the Value is 1.000000 if it isn’t already.<\/li>
                        3. Restart the editor if you have it open.<\/li>
                        4. Start the Play In Editor preview to confirm that your UI now remains readable at the PIE<\/strong> screen’s resolution (assuming you are using a 1080p monitor so that the PIE window is running at 720p or thereabouts):<\/li><\/ol>\n\n\n\n
                          \"\"\/<\/figure>\n\n\n\n
                          1. You can also see how the scaling works if you use a New Editor Window to preview your game.<\/li>
                          2. To do so, click on the arrow to the right of Play on the toolbar.<\/li>
                          3. Select New Editor Window.<\/li>
                          4. Inside this window, you can use the console command r.SetRes widthxheight to change the resolution (for example, r.SetRes 200×200), and observe the changes that result from doing so.<\/li><\/ol>\n\n\n\n
                            How it works…<\/h1>\n\n\n\n
                            As usual, when we want to use a custom PlayerController, we need a custom GameMode to specify which PlayerController to use.<\/p>\n\n\n\n
                            We create both a custom PlayerController and GameMode, and then place some Slate code in the BeginPlay method of PlayerController so that some UI elements are drawn.<\/p>\n\n\n\n
                            Because the main game viewport is usually quite small within the Unreal editor, the UI initially shows in a scaled-down fashion. This is intended to allow for the game UI to take up less room on smaller resolution displays, but this can have the side effect of making the text very difficult to read if the window isn’t being stretched to fit the full screen.<\/p>\n\n\n\n
                            Unreal stores the configuration data that should persist between sessions but not necessarily be hard coded into the executable inside config files. Config files use an extended version of the .ini file format, which has been commonly used with Windows software.<\/p>\n\n\n\n
                            Config files store data using the following syntax:<\/p>\n\n\n\n
                            [Section Name] \nKey=Value <\/pre>\n\n\n\n
                            Unreal has a UserInterfaceSettings class, with a property called UIScaleCurve on it. That UPROPERTY is marked as config, so Unreal serializes the value to the .ini file.<\/p>\n\n\n\n
                            As a result, it stores the UIScale data in the DefaultEngine.ini file, in the Engine.UserInterfaceSettings section.<\/p>\n\n\n\n
                            The data is stored using a text format, which contains a list of key points. Editing the Time, Value pairs alters or adds new key points to the curve.<\/p>\n\n\n\n
                            The Project Settings dialog is a simple frontend for directly editing the .ini files yourself, and for designers, it is an intuitive way to edit the curve. However, having the data stored textually allows for programmers to potentially develop build tools that modify properties such as UIScale without having to recompile their game.<\/p>\n\n\n\n
                            Time refers to the input value. In this case, the input value is the narrower dimension of the screen (usually, the height).<\/p>\n\n\n\n
                            Value is the universal scaling factor that’s applied to the UI when the screen’s narrow dimension is approximately the height of the value in the Time field.<\/p>\n\n\n\n
                            So, to set the UI to remain normal-sized at a 1280 x 720 resolution, set the time\/input factor to 720 and the scale factor to 1.<\/p>\n\n\n\n
                            See also<\/h1>\n\n\n\n