Mobile Previewer

1:Mobile / HTML5 - Open GL ES2, 2:Shader Model 4.0 - DX10/ OpenGL 3.3+, 3:Shader Model 5.0 - DX11/ OpenGL 4.3+.

In Unreal Engine 4 (UE4), you can use the Mobile Previewer to preview what your scene will look like on different mobile devices directly in the UE4 Editor viewport. When enabling the different preview rendering levels, the Materials in your scene will be recompiled to best emulate the look and feature set of the renderer preview that you selected. The Mobile Previewer enables you to switch back and forth between rendering levels seamlessly without having to restart the editor.

Using the Mobile Previewer

The Mobile Previewer enables you to quickly change between different renderers for your current UE4 session so that you can get an idea of what your game will look like on the device(s) that you're targeting while allowing you to work in the editor. To learn how to change to a different renderer preview, follow these steps:

While you do not need to restart the Editor for the new preview rendering level to take effect, the first time you change to a preview rendering level the editor will need to time to recompile the shaders. Subsequent changes to previously used rendering levels should be nearly instantaneous.

  1. From the Main Toolbar, select the Settings button to expand the listed menu items. Under the Scalability section, hover over the Preview Rendering Level to expose the different rendering levels options you can select from.
    PreviewRenderingLevel-1.png
  2. Hover the mouse over the section rendering level you'd like to preview and then left-mouse click to select it. In this example, Default High-End Mobile was selected.
    SelectTargetPlatform.pngYou will see the Changing Preview Rendering Level progress bar pop-up. Wait for this to finish and recompile shaders.
    ChangingPreviewRenderingLevel.png
  3. Once a rendering level has been selected, the Materials in the viewport will automatically update to reflect the new rendering method using the Material Qualities enabled or disabled for for that target platform. (See the Platform Material Quality Settings section of this page for more details on how to adjust these further.)
    Android Vulkan Preview
    Desktop Shader Model 5 (SM5) Preview

The Mobile Previewer is intended to match mobile devices as closely as possible but it may not always be indicative of what your project is going to look like on the target device. You should always make sure to fully test your project on your target device and only use the mobile previewer to see if your work is headed in the right direction.

Mobile Previewer in PIE

You can use the Mobile Preview ES2 (PIE) option to launch a standalone version of your UE4 mobile project that will use the same rendering path as if the project was run on a mobile device. This is a great way to preview the changes you are making without having to go through the entire cooking and deploying process. To launch your UE4 project in a Standalone game that uses the Mobile Preview, you will need to do the following:

  1. From the Main Toolbar, click on the drop-down button that is next to the Play button to expose the Change Play Mode and Play Settings settings.
    ShowPlayModeOptions.png
  2. Select Mobile Preview ES2 (PIE) option and your project will then be launched in a new window that simulates what your project should look like on a mobile device.
  3. T_Activate_Mobile_Preview-1.png

Enabling Vulkan Mobile Preview

You can use the Vulkan Mobile Preview (PIE) option to launch a standalone version of your UE4 mobile project using the Vulkan render. This is a great way to preview the changes you are making without having to go through the entire cooking and deploying process. To launch your UE4 project in a Standalone game that uses the Vulkan Mobile Preview, you will need to do the following:

  1. To enable the Vulkan Previewer you will need to first open up the Editor Preferences by going to the Main Toolbar and clicking on Edit and then select Editor Preferences.
    VulkanMobilePreview_EditorPreferences-2.png
  2. In the Editor Preferences menu, locate the General heading and then click on the Experimental section.
    Click for full image.
  3. Locate the PIE section and then click on the Allow Vulkan Mobile Preview option to enable it.
    Click for full image.

  4. Close the Editor Preferences menu and then from the Main Toolbar, click on the drop-down button that is next to the Play button to expose the Change Play Mode and Play Settings settings.
    ShowPlayModeOptions.png

  5. Select the Vulkan Mobile Preview (PIE) option and your project will then be launched in a new window that simulates what your project should look like on a mobile device.
    VulkanMobilePreview_UseVulkanMobilePreview.png

Platform Material Quality Settings

In the Project Settings under the Platforms category, you can select different platform Material Quality sections to enable or disable specific features for the target platform.

Click for full image.

For any of these changes to take effect, be sure to click the Update Preview Shaders button.

Preview Rendering Level Selections

When you select your Preview Rendering Level, you will have a few options select from. Use the table below to select the option that best fits your target device.

Device Target

Description

High-End Mobile / Metal

Default High-End Mobile

This will emulate the default high-end mobile material quality settings without using any material quality overrides specified in the Project Settings.

Android GLES 3.1

Provides a preview emulation of supported Android OpenGL ES3.1 quality settings. The Material Quality settings can be set in the Project Settings > Android Material Quality - ES31 section.

Android Vulkan

Provides a preview emulation of supported Android Vulkan quality settings. The Material Quality settings can be set in the Project Settings > Android Material Quality - Vulkan section.

iOS Metal

Provides a preview emulation of supported iOS Metal quality settings. The Material Quality settings can be set in the Project Settings > iOS Material Quality - Metal section.

Mobile / HTML5

Default Mobile / HTML5

This will emulate the default mobile material quality settings without using any material quality overrides specified in the Project Settings.

Android

Provides a preview emulation of supported Android OpenGL ES2 quality settings. The Material Quality settings can be set in the Project Settings > Android Material Quality - ES2 section.

iOS ES2

Provides a preview emulation of supported iOS OpenGL ES2 quality settings. The Material Quality settings can be set in the Project Settings > iOS Material Quality - ES2 section.

Some of the available Preview Rendering Levels are not visible until you've enabled them as a target platform via the Project Settings, namely, Android OpenGLES 3.1 and Android Vulkan. iOS Metal defaults to on, however, it will also be removed as an available preview option if its target platform is disabled.

Mobile Device Preview Options

Due to the wide range of mobile phone bezel designs, making sure that parts of your UI are not obscured by the mobile devices that is used can be a changeling issue to overcome. To help make sure your UI is not obscured by the device, you can use the Device Launch option to overlay different mobile phone bezel designs. To use this in your UE4 project, all you need to do is the following.
  1. First, open up your Editor Preferences by going to the Main Toolbar and clicking on Edit and then select Editor Preferences.
    VulkanMobilePreview_EditorPreferences-2.png
  2. In the Editor Preferences menu, locate the General heading and then click on the Experimental section.
    Click for full image.
  3. Locate the PIE section and then click on the Enable mobile PIE with preview device launch options to enable the bezel overlays.
    Click for full image.

  4. Close the Editor Preferences menu and then from the Main Toolbar, click on the drop-down button that is next to the Play button to expose the Change Play Mode and Play Settings settings.
    ShowPlayModeOptions.png

  5. From the displayed menu, go to Mobile Preview (PIE) Android and then select the device you want to test against from the list.
    SelectDevicePreview.png

  6. Now press the Launch button to launch your project. When your project loads it will be using the device preview like in the following image.
    PhoneBezel.png