Creating screen size-aware scaling for the UI

If you have followed the previous recipe, you will notice that when you use Play In Editor, the button that loads is unusually small.

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

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.

Getting ready

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 earlier example, you might wish to adjust the size of the button so that its apparent size is unchanged when viewing your UI on a smaller screen. This recipe shows two different methods for altering the scaling rates.

How to do it...

  1. Create a custom PlayerController subclass. Call it ScalingUIPlayerController.
  2. Inside the class, override BeginPlay:
    virtual void BeginPlay() override;
  3. Add the following code in the implementation of that function:
    Super::BeginPlay();
TSharedRef<SVerticalBox> widget = SNew(SVerticalBox)
+ SVerticalBox::Slot()
.HAlign(HAlign_Center)
.VAlign(VAlign_Center)
[
  SNew(SButton)
  .Content()
  [
    SNew(STextBlock)
    .Text(FText::FromString(TEXT("Test button")))
  ]
];
GEngine->GameViewport->AddViewportWidgetForPlayer(GetLocalPlayer(), widget, 1);
  4. Create a new GameMode subclass called ScalingUIGameMode, and give it a default constructor:
    ScalingUIGameMode();
  5. Within the default constructor, set the default player controller class to ScalingUIPlayerController:
    AScalingUIGameMode::AScalingUIGameMode()
:AGameMode()
{
  PlayerControllerClass = ACustomHUDPlayerController::StaticClass();
}
  6. 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:
    How to do it...
  7. 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.

The In-Editor method

  1. Launch Unreal, then open the Project Settings dialog through the Edit menu:
    The In-Editor method
  2. Under the User Interface section, there is a curve that can be used to alter the UI scaling factor based on the short dimension of your screen:
    The In-Editor method
  3. Click on the second dot, or keypoint, on the graph.
  4. Change its output value to 1.
    The In-Editor method

The Config file method

  1. Browse to your project directory, and look inside the Config folder:
    The Config file method
  2. Open DefaultEngine.ini inside your text editor of choice.
  3. Find the [/Script/Engine.UserInterfaceSettings] section:
    [/Script/Engine.UserInterfaceSettings]
RenderFocusRule=NavigationOnly
DefaultCursor=None
TextEditBeamCursor=None
CrosshairsCursor=None
GrabHandCursor=None
GrabHandClosedCursor=None
SlashedCircleCursor=None
ApplicationScale=1.000000
UIScaleRule=ShortestSide
CustomScalingRuleClass=None
UIScaleCurve=(EditorCurveData=(PreInfinityExtrap=RCCE_Constant,PostInfinityExtrap=RCCE_Constant,Keys=((Time=480.000000,Value=0.444000),(Time=720.000000,Value=1.000000),(Time=1080.000000,Value=1.000000),(Time=8640.000000,Value=8.000000)),DefaultValue=340282346638528859811704183484516925440.000000),ExternalCurve=None)
  4. Look for a key called UIScaleCurve in that section.
  5. 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.
  6. Restart the editor if you have it open.
  7. Start the Play In Editor preview to confirm that your UI now remains readable at the PIE screen's resolution (assuming you are using a 1080p monitor so that the PIE window is running at 720p or thereabouts):
    The Config file method
  8. You can also see how the scaling works if you use a New Editor Window to preview your game.
  9. To do so, click on the arrow to the right of Play on the toolbar.
  10. Select New Editor Window.
  11. Inside this window, you can use the console command r.setreswidthxheight to change the resolution, and observe the changes that result from doing so.

How it works...

  1. As usual, when we want to use a custom PlayerController, we need a custom GameMode to specify which PlayerController to use.
  2. We create both, a custom PlayerController and GameMode, and place some Slate code in the BeginPlay method of PlayerController so that some UI elements are drawn.
  3. Because the main game viewport is usually quite small within the Unreal editor, the UI initially shows in a scaled-down fashion.
  4. This is intended to allow for the game UI to take up less room on smaller resolution displays, but 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.
  5. Unreal stores the configuration data that should persist between sessions, but not necessarily be hard-coded into the executable inside config files.
  6. Config files use an extended version of the .ini file format that has been commonly used with Windows software.
  7. Config files store data using the following syntax:
    [Section Name]
Key=Value
  8. Unreal has a UserInterfaceSettings class, with a property called UIScaleCurve on it.
  9. That UPROPERTY is marked as config, so Unreal serializes the value to the .ini file.
  10. As a result, it stores the UIScale data in the DefaultEngine.ini file, in the Engine.UserInterfaceSettings section.
  11. 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.
  12. 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.
  13. Time refers to the input value. In this case, the input value is the narrower dimension of the screen (usually, the height).
  14. Value is the universal scaling factor applied to the UI when the screen's narrow dimension is approximately the height of the value in the Time field.
  15. So, to set the UI to remain normal-sized at a 1280x720 resolution, set the time/input factor to 720, and the scale factor to 1.

See also

  • You can refer to the UE4 documentation for more information regarding config files
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.151.153